vscode 自动修复eslint错误

Sela ·

更新时间:2024-11-14

· 790 次阅读

一般情况下，在项目中使用eslint后，通过在vscode的插件中安装eslint vetur即可通过工具的自我检测功能，实现自动修复。可以首选-设置中，设置保存时自动修复，也可以通过快捷键使用

按F1，搜索eslint:fix all auto-fixable priblems 即可

最近遇到了一个奇葩问题，同一个项目，换了一台电脑，同样的配置，vscode工具突然失灵了，找了好久，才发现是它在搞怪，eslint-plugin-html，原因是同一台电脑，打开了不同的项目，另一个项目使用的是eslint-plugin-vue，于是这个两个东西产生了摩擦，最终eslint-plugin-vue战胜了eslint-plugin-html，于是使用eslint-plugin-vue的项目可以自动检测，使用eslint-plugin-html的失灵了，如果你也遇到了相同的问题，可以尝试着换成eslint-plugin-vue试试。这里同时给出eslint的添加方法（方法很多，这里简要说下）。
1，新建.eslintrc.js，内容如下

// https://eslint.org/docs/user-guide/configuring
module.exports = {
    root: true,
    parserOptions: {
      parser: 'babel-eslint'
    },
    env: {
      browser: true,
    },
    extends: [
      // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
      // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
      'plugin:vue/essential', 
      // https://github.com/standard/standard/blob/master/docs/RULES-en.md
      'standard'
    ],
    // required to lint *.vue files
    plugins: [
      'vue'
    ],
    // add your custom rules here
    rules: {
       'vue/no-parsing-error': [2, {"x-invalid-end-tag": false}],
       'v/vue/valid-v-for': 0,
       'no-control-regex': 0,
       "quotes": [1, "single"], //引号类型 `` "" ''
        'arrow-parens': 0,
        // allow async-await
        'generator-star-spacing': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
        "space-before-function-paren": 0,
        "indent": ["error", 2],
        "eqeqeq": [0, "always"],
        "standard/object-curly-even-spacing": [0, "either"],
    }
  }

2,在package.json中添加

 "scripts": {
    "lint": "eslint --fix --ext .js,.vue src test/unit test/e2e/specs",
 }
"devDependencies": {
		   "babel-eslint": "^8.2.1",
		   "eslint": "^4.15.0",
		   "eslint": "^4.15.0",
		   "eslint-config-standard": "^10.2.1",
		   "eslint-friendly-formatter": "^3.0.0",
	       "eslint-loader": "^1.7.1",
	       "eslint-plugin-html": "^3.0.0",
	       "eslint-plugin-import": "^2.7.0",
	       "eslint-plugin-node": "^5.2.0",
	       "eslint-plugin-promise": "^3.4.0",
	       "eslint-plugin-standard": "^3.0.1",
	       "eslint-plugin-vue": "^4.0.0"
	      }

3,在webpack.base.conf修改

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
        formatter: require('eslint-friendly-formatter'),
        // emitWarning: !config.dev.showEslintErrorsInOverlay
    }
})
  rules: [
            // ...(config.dev.useEslint ? [createLintingRule()] : []),
            createLintingRule(),
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            ...
     ]

4,cnpm install到此结束。

备注：也许这个方法经过你的尝试，并不适合你。假如你有更好的解决方案，请留言。

作者：山海一哥

自动 eslint vscode

1024 个赞