VScode设置Eslint规则并在保存时自动修复



最近被eslint校验给折磨死了,而且使用Prettier、Vetur等插件,格式效果也不好,总是有点问题。最后终于配置好了,码起代码来,真心舒服,哈哈哈。

转载于CSDN-Web编程少女

平时常用的ESLint规则参考如下,并将文件保存至.eslintrc.js文件:
ESLint规则.

首先在Vscode安装Eslint、Prettier-Code、formatter、Vetur插件。

接着点开VScode的文件—>首选项—>设置处选择setting,根据个人情况选择user还是Workspce

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{
// tab 大小为2个空格
"editor.tabSize": 2,
// // 保存时格式化
"editor.formatOnSave": false,
// // 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
// eslint 检测文件类型
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
"prettyhtml": {
"printWidth": 200,
"singleQuote": false,
"wrapAttributes": false,
"sortAttributes": false
},
"prettier": {
"semi": false,
"singleQuote": true
}
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"window.zoomLevel": 0,
"editor.semanticTokenColorCustomizations": null
}

最后,按 ctrl+s 即可自动修复不符合Eslint要求的代码。

另外,为了防止组件export default 组件的 name值被自动修复成PascalCase编码,在.eslintrc.js文件的这一行语句将error,改成off。

1
"vue/name-property-casing": ["off", "PascalCase"]
打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信