Make Visual Studio Code Format Your Code with ESLint Rules

0
React

After adding ESLint to the project, everyone’s code became much cleaner. But because we weren’t familiar with ESLint rules at first, we spent a lot of time counting spaces and toggling between double and single quotes.

This severely impacted development efficiency and mood!!!! This severely impacted development efficiency and mood!!!! This severely impacted development efficiency and mood!!!!

Important things must be said three times!!!

Below is a method using the Visual Studio Code ESLint plugin. After configuration, your code will be automatically formatted according to ESLint rules.

  1. Install the ESLint plugin in Visual Studio Code
  2. On Windows: File > Preferences > Settings / On Mac: Code > Preferences
  3. Search for eslint.autoFixOnSave, find it and set to true

Restart your Visual Studio Code. When you open a code file and save it, the code will automatically format according to ESLint rules. This greatly improves development efficiency and unifies code standards.

Here are some ESLint rules from our project:

{
  rules: {
    'accessor-pairs': 2,
    'arrow-spacing': [1, { 'before': true, 'after': true }],
    'array-bracket-spacing': [1, 'never'],
    'block-spacing': [1, 'always'],
    'brace-style': [2, '1tbs', { 'allowSingleLine': true }],
    'camelcase': [2, { 'properties': 'never' }],
    'comma-dangle': [1, 'only-multiline'],
    'comma-spacing': [1, { 'before': false, 'after': true }],
    'comma-style': [2, 'last'],
    'constructor-super': 1,
    'curly': [2, 'multi-line'],
    'dot-location': [2, 'property'],
    'eol-last': 1,
    'eqeqeq': [2, 'allow-null'],
    'generator-star-spacing': [2, { 'before': true, 'after': true }],
    'handle-callback-err': [2, '^(err|error)$' ],
    'indent': [2, 2, { 'SwitchCase': 1 }],
    'jsx-quotes': [2, 'prefer-single'],
    'key-spacing': [2, { 'beforeColon': false, 'afterColon': true }],
    'keyword-spacing': [2, { 'before': true, 'after': true }],
    'new-cap': [2, { 'newIsCap': true, 'capIsNew': false }],
    'new-parens': 2,
    'object-curly-spacing': [2, 'always', { objectsInObjects: false }],
    'no-array-constructor': 2,
    'no-caller': 2,
    'no-class-assign': 2,
    'no-cond-assign': 2,
    'no-const-assign': 2,
    'no-control-regex': 2,
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 1,
    'no-delete-var': 2,
    'no-dupe-args': 2,
    'no-dupe-class-members': 2,
    'no-dupe-keys': 2,
    'no-duplicate-case': 2,
    'no-empty-character-class': 2,
    'no-empty-pattern': 2,
    'no-eval': 2,
    'no-ex-assign': 2,
    'no-extend-native': 2,
    'no-extra-bind': 2,
    'no-extra-boolean-cast': 2,
    'no-extra-parens': [2, 'functions'],
    'no-fallthrough': 2,
    'no-floating-decimal': 2,
    'no-func-assign': 2,
    'no-implied-eval': 2,
    'no-inner-declarations': [2, 'functions'],
    'no-invalid-regexp': 2,
    'no-irregular-whitespace': 2,
    'no-iterator': 2,
    'no-label-var': 2,
    'no-labels': [2, { 'allowLoop': false, 'allowSwitch': false }],
    'no-lone-blocks': 2,
    'no-mixed-spaces-and-tabs': 2,
    'no-multi-spaces': 2,
    'no-multi-str': 2,
    'no-multiple-empty-lines': [2, { 'max': 1 }],
    'no-native-reassign': 2,
    'no-negated-in-lhs': 2,
    'no-new-object': 2,
    'no-new-require': 2,
    'no-new-symbol': 2,
    'no-new-wrappers': 2,
    'no-obj-calls': 2,
    'no-octal': 2,
    'no-octal-escape': 2,
    'no-path-concat': 2,
    'no-proto': 2,
    'no-redeclare': 2,
    'no-regex-spaces': 2,
    'no-return-assign': [2, 'except-parens'],
    'no-self-assign': 2,
    'no-self-compare': 2,
    'no-sequences': 2,
    'no-shadow-restricted-names': 2,
    'no-spaced-func': 2,
    'no-sparse-arrays': 2,
    'no-this-before-super': 2,
    'no-throw-literal': 2,
    'no-trailing-spaces': 1,
    'no-undef': 2,
    'no-undef-init': 2,
    'no-unexpected-multiline': 2,
    'no-unmodified-loop-condition': 2,
    'no-unneeded-ternary': [2, { 'defaultAssignment': false }],
    'no-unreachable': 2,
    'no-unsafe-finally': 2,
    'no-unused-vars': [1, { 'vars': 'all', 'args': 'none' }],
    'no-useless-call': 2,
    'no-useless-computed-key': 2,
    'no-useless-constructor': 2,
    'no-whitespace-before-property': 2,
    'no-with': 2,
    'one-var': [2, { 'initialized': 'never' }],
    'operator-linebreak': [2, 'after', { 'overrides': { '?': 'before', ':': 'before' } }],
    'padded-blocks': [2, 'never'],
    'quotes': [2, 'single', { 'avoidEscape': true, 'allowTemplateLiterals': true }],
    'semi': [2, 'never'],
    'semi-spacing': [2, { 'before': false, 'after': true }],
    'space-before-blocks': [2, 'always'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
    'space-unary-ops': [2, { 'words': true, 'nonwords': false }],
    'spaced-comment': [2, 'always', { 'markers': ['!', ',', '/', '-'] }],
    'template-curly-spacing': [2, 'never'],
    'use-isnan': 2,
    'valid-typeof': 2,
    'wrap-iife': [2, 'any'],
    'yield-star-spacing': [2, 'both'],
    'yoda': [2, 'never'],
    'prefer-const': 0,
    'no-useless-escape': 0,
    'space-before-function-paren': 0,
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
  }
}

Article Link:

/en/archive/vscode-eslint-format/

# Related Articles