美文网首页
vscode 自动 eslint 校验

vscode 自动 eslint 校验

作者: 梧桐月明中 | 来源:发表于2020-11-16 16:11 被阅读0次

在对 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 重新加载窗口即可。

相关文章

网友评论

      本文标题:vscode 自动 eslint 校验

      本文链接:https://www.haomeiwen.com/subject/smqzbktx.html