VSCode 集成 ESLint 和 Prettier

本文最后更新于:2020年12月30日 早上

情景

ESLint 是一个前端代码质量检测工具,然而配置非常非常非常的麻烦(前端的配置真的是超多呢),所以在吾辈的 VueJS 项目中直接使用了 standard 规则。然而问题在于有了代码规则,还需要自动的格式化,否则为了手动格式化是一件极其痛苦的事情。。。

步骤

VSCode 安装下面三个插件

然后在 User Settings,添加以下配置

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
// 配置 ESlint 和 Prettier
"eslint.autoFixOnSave": true, // 每次保存的时候将代码按 eslint 格式进行修复
"prettier.eslintIntegration": true, // 让 prettier 使用 eslint 的代码格式进行校验
"prettier.semi": false, // 去掉代码结尾的分号
"prettier.singleQuote": true, // 使用单引号替代双引号
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数 (名) 和后面的括号之间加个空格
"vetur.format.defaultFormatter.html": "js-beautify-html", // 格式化. vue 中 html
"vetur.format.defaultFormatter.js": "vscode-typescript", // 让 vue 中的 js 按编辑器自带的 ts 格式进行格式化
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" // 属性强制折行对齐
}
},
"eslint.validate": [
// 开启对. vue 文件中错误的检查
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
]

好了,现在可以正常使用 VSCode 的格式化功能了,保存时也会进行格式化同时修复 ESLint 发现的错误。


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!