vscode 自动 eslint 校验

在对 Element-UI 二次开发之前,先配置了 vscode 的 eslint 校验,走了一些弯路,这里记录一下。

  • 开启保存时自动校验后,我的 vscode 默认是使用的 prettier 的 formatter,于是在校验时就会和 eslint 产生一些冲突。也就是保存成了 prettier 的规则,lint 时会有报错。
  • 当时傻乎乎地根据 eslint 的规则写了几个 prettier 的规则到 package.json 里,才终于发现这样治标不治本。
  • 另一个问题是 eslint 不会检验 .vue 文件,于是启用了 vetur 的校验,它默认的 formatter 也是 prettier。也曾尝试在 vscode 的 settings.json 里加入:
"[vue]": {
    "editor.defaultFormatter": "octref.vetur"
}, 
"vetur.format.defaultFormatterOptions": {                    
  "prettier": {                                                                        
    "singleQuote": true,
    "comma-dangle": "never"
  }
}
  • 但其实我想要的是按照 eslint 的规则校验啊,清醒一下!
    如下配置成功解题:
"editor.formatOnSave": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},
"eslint.validate": [
  "javascript",
  "javascriptreact",
  "vue"
]

如果用 ts,eslint.validate 里再加入 typescript``typescriptreact
如此,校验修复的事情不再让 prettier 和 vetur 来插手,纯正的 eslint 规则。(想要 prettier 的话其实作为 eslint 的插件来引入使用会更方便)


同样的 vscode,同样的 settings.json,在另一个项目里 eslint 的自动校验竟然没有生效,怎么回事?
发现在文件开头 import 下面有红色波浪线,显示:

ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.

提示我 eslint 没有开启。
View -> appearance -> show status bar 打开 vscode 的底部状态栏,果然 eslint 显示禁用,点击后选择 Allow Everywhere 即可。


附 vscode 快捷指令:
command + shift + p 打开指令输入框。
输入 open settings 打开设置文件。
一些设置更改了以后要重启才生效,实际上输入 reload window 重新加载窗口即可。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容