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