vscode配置eslint

vscode配置eslint

提示

如果你不想使用 ESLint 校验（不推荐取消），只要找到 vue.config.js 文件。 进行如下设置 lintOnSave: false 即可

工欲善其事，必先利其器，个人推荐 eslint+vscode 来写 vue，绝对有种飞一般的感觉。

每次保存，vscode 就能标红不符合 eslint 规则的地方，同时还会做一些简单的自我修正。

实际配置示例:

  // eslint 配置开始
  "eslint.validate": [
	"javascript",
	"javascriptreact",
	"vue-html"
	],
  "eslint.run": "onSave",
  "eslint.alwaysShowStatus": true,
  "eslint.codeAction.showDocumentation": {
    "enable": true
  },
  // 当保存的时候 eslint自动修复数据
  "editor.codeActionsOnSave": {
	"source.fixAll.eslint": "explicit"
  },
  "eslint.options": {
    "files.autoSave": "off",
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue-html",
      {
        "language": "vue",
        "autoFix": true
      }
    ],
    "eslint.run": "onSave",
	// 当保存的时候 eslint自动修复数据
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "explicit"
	},
  },
  "eslint.codeActionsOnSave.rules": null,
  // eslint 配置结束

首先安装 eslint 插件

alt text

配置vscode

安装并配置完成 ESLint 后，我们继续回到 VSCode 进行扩展设置，依次点击 文件 > 首选项 > 设置 打开 VSCode 配置文件,添加如下配置

{
  "files.autoSave": "off",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue-html",
    {
      "language": "vue",
      "autoFix": true
    }
  ],
  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true
}

这样每次保存的时候就可以根据根目录下.eslintrc.js 你配置的 eslint 规则来检查和做一些简单的 fix

报错处理

vscode的elsint配置报错The setting is deprecated. Use editor.codeActionsOnSave instead with a source

提示:The setting is deprecated. Use editor.codeActionsOnSave instead with a source.fixAll.eslint member.
意思是：此配置已作废，使用editor.codeActionsOnSave，里面配置source.fixAll.eslint 属性
把"eslint.autoFixOnSave": true 改成:

 "editor.codeActionsOnSave": {
	"source.fixAll.eslint": "explicit"
  },

自动修复

npm run lint -- --fix