vscode自動修復eslintエラー

一般的に、プロジェクトでeslintを使用した後、vscodeのプラグインにeslint veturをインストールすることで、ツールの自己検出機能により、自動修復を実現できます.オプション-設定では、保存時に自動的に修復するか、ショートカットキーで使用するかを設定します.

 F1，  eslint:fix all auto-fixable priblems   

最近1つの奇抜な問題に出会って、同じプロジェクト、1台のコンピュータを交換して、同じ配置、vscodeツールは突然機能しなくなって、長い間探して、やっとそれがおかしいことを発見して、eslint-plugin-html、原因は同じコンピュータで、異なるプロジェクトを開けて、別のプロジェクトはeslint-plugin-vueを使って、そこでこの2つのものは摩擦を生んで、最終的に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に「eslint-plugin-html」を追加するのは、使用を開始するプラグインです.使用時に削除し、最後の「eslint-plugin-vue」に置き換えます.

 "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はこれで終わります.
備考:この方法はあなたの試みを経て、あなたに合わないかもしれません.もしあなたがもっと良い解決策があれば、伝言を残してください.