admin 插件资讯 2023-01-01

VSCode 插件之 ESLint

“eslint.enable” – 启用/禁用 vscode-eslint。默认情况下是启用的。

“eslint.validate” – 一个语言标识符数组，指定要执行验证的文件，默认为 [“javascript”, “javascriptreact”]。如果待校验的文件类型属于 “eslint.validate”，vscode-eslint 会开启 ESLint 校验，如果 ESLint 配置文件中没有引入相应的插件，那么 ESLint 会报错。这是一个旧的设置。

“eslint.probe” – 一个语言标识符数组，指定要执行验证的文件，默认值为 [“javascript”、”javascriptreact”、”typecript”、”typecriptreact”、”html”、”vue”、”markdown”]。如果待校验的文件类型属于 eslint.probe，且 ESLint 配置文件中没有引入相应的插件，那么 probe（探测）失败， vscode-eslint 不会开启 ESLint 校验；如果待校验的文件类型属于 eslint.probe，且 ESLint 配置文件中引入了相应的插件，那么 probe 成功， vscode-eslint 会开启 ESLint 校验。

例如开发 Vue ，需要在 “eslint.probe” 中添加 [“html”, “vue”]，在项目中安装 eslint-plugin-vue, eslint-plugin-html ，这样才会在 .vue 单文件中开启 ESLint 检测，VSCode 才会在代码编辑器中正确的高亮错误的语法，并且会在窗口中输出错误信息。

为了更好的了解 vscode-eslint 的运行，我们可以在 settings.json 中设置 “eslint.trace.server”: “verbose”，这样就可以在输出中看到更多日志。

示例：

当 “eslint.validate” 和 “eslint.probe” 中都添加了 vue，从图中看到报了 Parsing error，表明已经开始 ESLint 校验。报错是因为使用的是 ESLint 默认的 parser – Espree，它无法正确的解析 .vue 文件。

当 “eslint.validate” 中没有添加 vue，”eslint.probe” 中添加了 vue，从图中看到没有报错。注意：从 “eslint.validate” 中删除 vue 保存之后，App.vue 中的报错不会立马消失，需要重新启动 VSCode 后，App.vue 中的报错才会消失。

在上例的基础上，在 ESLint 配置文件中引入 eslint-plugin-vue，可以看到开始了 ESLint 校验。

“editor.codeActionsOnSave” (@since 2.0.0) – 支持 source.fixAll.eslint。如果设置为 “true”，所有 ESLint/ESLint 插件（@typescript-eslint/eslint-plugin, eslint-plugin-vue, eslint-plugin-react 等）的可自动修复的错误都将在保存时被修复。你也可以选择性地启用和禁用特定的语言。

// 保存的时候自动修复 ESLint/ESLint 插件中可自动修复的错误{ “editor.codeActionsOnSave”: { “source.fixAll.eslint”: true }}// 禁用 HTML 文件的 codeActionsOnSave{ “[html]”: { “editor.codeActionsOnSave”: { “source.fixAll.eslint”: false } }}复制代码

“eslint.alwaysShowStatus” – 是否总是在状态栏显示 ESLint 标志，默认是 false。