VScode配置ESLint检测语法

eslint失效：导致两种效果：
1.格式错误不报红，列如：代码前多空格。
2.no quick fix，缺少eslint fix 指令，快速寻找并解决问题。
在根目录下的.vscode下的settings.jsonCtrl + Shift + P”打开命令面板，选择“Preferences: Open Settings (JSON)”中加入如下代码可以解决

"eslint.validate": [
  "vue",
  "html",
  "javascript",
  "typescript",
  "javascriptreact",
  "typescriptreact"
],

{  
  "editor.codeActionsOnSave": {  
    "source.fixAll.eslint": true, // 明确保存时自动修复 ESLint 问题  
    "source.fixAll.stylelint": "explicit" // 对于 Stylelint，保存时提示是否修复  
  },  
  "files.autoSaveDelay": 10000,  
  "editor.inlineSuggest.enabled": true,  
  "update.mode": "none",  
  "update.enableWindowsBackgroundUpdates": false,  
  "workbench.iconTheme": "vs-minimal",  
  "[vue]": {  
    "editor.defaultFormatter": "esbenp.prettier-vscode" // Vue 文件使用 Prettier 格式化  
  },  
  "javascript.updateImportsOnFileMove.enabled": "always",  
  "explorer.confirmDelete": false,  
  "[javascript]": {  
    "editor.defaultFormatter": "esbenp.prettier-vscode" // JavaScript 文件使用 Prettier 格式化  
  },  
  "window.zoomLevel": -1,  
  "git.enableSmartCommit": true,  
  "git.confirmSync": false,  
  "workbench.colorTheme": "After Dark",  
  "eslint.validate": [  
    "vue",  
    "html",  
    "javascript",  
    "typescript",  
    "javascriptreact",  
    "typescriptreact"  
  ],  
  "eslint.run": "onSave",  
  "editor.formatOnSave": true,  
  "eslint.autoFixOnSave": true,  
  "javascript.format.semicolons": "ignore",  
  // 如果您不希望 ESLint 作为全局默认格式化器，可以移除以下行  
  // "editor.defaultFormatter": "dbaeumer.vscode-eslint",  
}

 

.eslintrc.js配置

const INDENT = 4;
const MAX_DEEP = 3;
const MAX_LENGTH = 120;
module.exports = {
    'globals': {
        __dirname: true,
        process: true
    },
    'env': {
        'browser': true,
        'es6': true,
        'commonjs': true,
    },
    'extends': [
        'eslint:recommended',
        'plugin:vue/essential'
    ],
    'parserOptions': {
        'ecmaVersion': 2018,
        'sourceType': 'module'
    },
    'plugins': [
        'vue'
    ],
    'rules': {
        'indent': ['error', 4],
        'vue/html-indent': ['error', INDENT, {
            attribute: 1,
            baseIndent: 1,
            closeBracket: 0,
            alignAttributesVertically: true,
            ignores: [],
        }],
        'vue/html-quotes': ['error', 'double', { avoidEscape: false }],
        'vue/attribute-hyphenation': ['off'],
        'accessor-pairs': 'error',
        'array-bracket-newline': 'off',
        'array-bracket-spacing': [
            'error',
            'never',
        ],
        'array-callback-return': 'off',
        'array-element-newline': 'off',
        'arrow-body-style': 'off',
        'arrow-parens': 'off',
        'arrow-spacing': 'error',
        'block-scoped-var': 'off',
        'block-spacing': 'off',
        'brace-style': 'off',
        'camelcase': 'error',
        'capitalized-comments': 'off',
        'class-methods-use-this': 'off',
        'comma-dangle': ['error', 'always-multiline'],
        'comma-spacing': 'error',
        'comma-style': [
            'error',
            'last',
        ],
        'complexity': ['error', 10],
        'computed-property-spacing': 'off',
        'consistent-return': 'off',
        'consistent-this': 'off',
        'curly': 'off',
        'default-case': 'off',
        'default-param-last': 'error',
        'dot-location': 'off',
        'dot-notation': 'off',
        'eol-last': ['warn', 'always'],
        'eqeqeq': 'error',
        'func-call-spacing': ['error', 'never'],
        'func-name-matching': 'off',
        'func-names': 'off',
        'func-style': 'off',
        'function-call-argument-newline': 'off',
        'function-paren-newline': 'off',
        'generator-star-spacing': 'error',
        'grouped-accessor-pairs': 'error',
        'guard-for-in': 'error',
        'id-length': 'off',
        'id-match': 'error',
        'implicit-arrow-linebreak': [
            'error',
            'beside',
        ],
        'indent': ['error', INDENT],
        'init-declarations': 'off',
        'jsx-quotes': 'error',
        'key-spacing': 'error',
        'keyword-spacing': 'error',
        'line-comment-position': 'off',
        'linebreak-style': 'off',
        'lines-around-comment': 'off',
        'lines-between-class-members': 'off',
        'max-classes-per-file': 'error',
        'max-depth': ['error', MAX_DEEP],
        'max-len': ['error', MAX_LENGTH],
        'max-lines': ['error', {
            max: 600,
            skipBlankLines: true,
            skipComments: true,
        }],
        'max-lines-per-function': ['error', {
            max: 50,
            skipBlankLines: true,
            skipComments: true,
        }],
        'max-nested-callbacks': 'error',
        'max-params': 'off',
        'max-statements': 'off',
        'max-statements-per-line': 'off',
        'multiline-comment-style': ['error', 'starred-block'],
        'multiline-ternary': 'off',
        'new-parens': 'off',
        'newline-per-chained-call': 'off',
        'no-alert': 'error',
        'no-array-constructor': 'off',
        'no-await-in-loop': 'error',
        'no-bitwise': 'off',
        'no-caller': 'error',
        'no-confusing-arrow': [
            'error',
            {
                allowParens: true,
            },
        ],
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
        'no-constructor-return': 'error',
        'no-continue': 'off',
        'no-div-regex': 'off',
        'no-duplicate-imports': 'error',
        'no-else-return': 'off',
        'no-empty-function': 'off',
        'no-eq-null': 'off',
        'no-eval': 'error',
        'no-extend-native': 'off',
        'no-extra-bind': 'error',
        'no-extra-label': 'error',
        'no-extra-parens': 'off',
        'no-floating-decimal': 'off',
        'no-implicit-globals': 'error',
        'no-implied-eval': 'error',
        'no-inline-comments': 'off',
        'no-invalid-this': 'off',
        'no-iterator': 'error',
        'no-label-var': 'error',
        'no-labels': 'error',
        'no-lone-blocks': 'off',
        'no-lonely-if': 'off',
        'no-loop-func': 'warn',
        'no-magic-numbers': ['error', {
            ignore: [1, -1, 0, 2, 7, 24, 60, 10, 100, 1000],
            ignoreArrayIndexes: true,
        }],
        'no-mixed-operators': 'off',
        'no-multi-assign': 'off',
        'no-multi-spaces': 'off',
        'no-multi-str': 'error',
        'no-multiple-empty-lines': 'off',
        'no-negated-condition': 'off',
        'no-nested-ternary': 'off',
        'no-new': 'off',
        'no-new-func': 'off',
        'no-new-object': 'error',
        'no-new-wrappers': 'error',
        'no-octal-escape': 'error',
        'no-param-reassign': 'off',
        'no-plusplus': 'off',
        'no-promise-executor-return': 'off',
        'no-proto': 'off',
        'no-restricted-globals': 'error',
        'no-restricted-imports': 'error',
        'no-restricted-properties': 'error',
        'no-restricted-syntax': 'error',
        'no-return-assign': 'off',
        'no-return-await': 'error',
        'no-script-url': 'error',
        'no-self-compare': 'off',
        'no-sequences': 'off',
        'no-shadow': 'off',
        'no-tabs': 'off',
        'no-template-curly-in-string': 'error',
        'no-ternary': 'off',
        'no-throw-literal': 'error',
        'no-trailing-spaces': 'error',
        'no-undef-init': 'error',
        'no-undefined': 'off',
        'no-underscore-dangle': 'off',
        'no-unmodified-loop-condition': 'error',
        'no-unneeded-ternary': 'error',
        'no-unreachable-loop': 'off',
        'no-unused-expressions': 'off',
        'no-use-before-define': 'off',
        'no-useless-call': 'error',
        'no-useless-computed-key': 'error',
        'no-useless-concat': 'off',
        'no-useless-constructor': 'error',
        'no-useless-rename': 'error',
        'no-useless-return': 'off',
        'no-var': 'error',
        'no-void': 'off',
        'no-warning-comments': 'off',
        'no-whitespace-before-property': 'error',
        'nonblock-statement-body-position': [
            'error',
            'any',
        ],
        'object-curly-newline': 'error',
        'object-curly-spacing': 'off',
        'object-property-newline': 'off',
        'object-shorthand': 'off',
        'one-var': 'off',
        'one-var-declaration-per-line': 'off',
        'operator-assignment': 'off',
        'operator-linebreak': ['error', 'before'],
        'padded-blocks': 'off',
        'padding-line-between-statements': 'error',
        'prefer-arrow-callback': 'off',
        'prefer-const': ['error', {
            destructuring: 'all',
            ignoreReadBeforeAssign: false,
        }],
        'prefer-destructuring': 'off',
        'prefer-exponentiation-operator': 'off',
        'prefer-named-capture-group': 'off',
        'prefer-numeric-literals': 'error',
        'prefer-object-spread': 'off',
        'prefer-promise-reject-errors': 'off',
        'prefer-regex-literals': 'off',
        'prefer-rest-params': 'off',
        'prefer-spread': 'off',
        'prefer-template': 'off',
        'quote-props': ['error', 'consistent-as-needed'],
        'quotes': ['error', 'single', {
            allowTemplateLiterals: true,
        }],
        'radix': 'off',
        'require-atomic-updates': 'error',
        'require-await': 'error',
        'require-unicode-regexp': 'off',
        'rest-spread-spacing': [
            'error',
            'never',
        ],
        'semi': ['error', 'always'],
        'semi-spacing': 'error',
        'semi-style': 'off',
        'sort-keys': 'off',
        'sort-vars': 'off',
        'space-before-blocks': 'error',
        'space-before-function-paren': ['error', 'never'],
        'space-in-parens': 'off',
        'space-infix-ops': 'error',
        'space-unary-ops': 'off',
        'spaced-comment': 'error',
        'strict': 'off',
        'switch-colon-spacing': [
            'error',
            {
                after: false,
                before: false,
            },
        ],
        'symbol-description': 'error',
        'template-curly-spacing': [
            'error',
            'never',
        ],
        'template-tag-spacing': 'error',
        'unicode-bom': [
            'error',
            'never',
        ],
        'valid-typeof': [
            'error',
            {
                requireStringLiterals: false,
            },
        ],
        'vars-on-top': 'off',
        'wrap-iife': 'off',
        'wrap-regex': 'off',
        'yield-star-spacing': 'error',
        'yoda': 'off',
        'vue/multi-word-component-names': 'off',
    }
};

 .eslintignore配置

.eslintrc.js
/dist
/modules
/node_modules
/src/iconfont

VSCode 默认保存时格式化配置

ESLint官网

Prettier官网