1、安裝插件eslint
2、安裝自動(dòng)修復(fù)插件

    "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, //此項(xiàng)是用來告訴eslint找當(dāng)前配置文件不能往父級查找
  "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規(guī)則*/
}
}

4、首選項(xiàng)-設(shè)置-settings.json 做配置如下，重點(diǎn)是關(guān)于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": {
            // 屬性列太長才折行,默認(rèn)的force-expand-multiline不美觀
            "wrap_attributes": "auto"
        },
        "prettier": {
            //去掉代碼結(jié)尾分號
            "semi": false,
            //使用eslint的代碼格式進(jìn)行校驗(yàn)
            "eslintIntegration": true,
            //采用單引號
            "singleQuote": true
        }
    },
    //格式化.vue中html，js
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    //讓函數(shù)(名)和后面的括號之間加個(gè)空格
    "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