vscode eslint插件安装及配置

1、安装插件eslint
2、安装自动修复插件

    "eslint": "^5.16.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.7.1",
    "eslint-plugin-vue": "^5.0.0",
    "eslint-plugin-html": "^5.0.5",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^3.0.1",

3、新建文件.eslintrc.js

module.exports = {
  root: true, //此项是用来告诉eslint找当前配置文件不能往父级查找
  "env": {
    "browser": true,
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/essential"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "vue"
  ],
rules: {
/*这里是eslint规则*/
}
}

4、首选项-设置-settings.json 做配置如下，重点是关于eslint部分

{
    "workbench.colorTheme": "One Dark Pro",
    "vetur.format.options.useTabs": true,
    "editor.fontSize": 14,
    "editor.tabSize": 3,
    "files.associations": {
        "*.vue": "vue"
    },
    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "html",
            "autoFix": true
        },
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "vetur.validation.template": false,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            // 属性列太长才折行,默认的force-expand-multiline不美观
            "wrap_attributes": "auto"
        },
        "prettier": {
            //去掉代码结尾分号
            "semi": false,
            //使用eslint的代码格式进行校验
            "eslintIntegration": true,
            //采用单引号
            "singleQuote": true
        }
    },
    //格式化.vue中html，js
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    //让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "search.exclude": {
        "**/Node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "git.confirmSync": false,
    "window.zoomLevel": 0,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": true,
    "editor.minimap.renderCharacters": false,
    "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
    "editor.codeLens": true,
    "editor.snippetSuggestions": "top",
    "extensions.ignoreRecommendations": false,
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    }
}

推荐使用插件
https://blog.csdn.net/weixin_43570367/article/details/104354080?utm_source=app