开发Vue或者React的项目的时候,我们经常用到ESLint进行代码的校验,当代码出现不符合规范的格式的时候,ESLint会在控制台提示相关的异常信息。
ESLint极大的提高了团队代码的一致性和规范性,接下来老马介绍一下我的VSCode的相关配置和插件实现保存代码的时候,根据ESLint的配置自动修复代码和格式化。
VSCode安装插件
ESLint,VSCode代码中提示错误
vuetur:Vue开发的神器,格式化、代码段等不用说了....
Prettier - Code formatter,代码格式化插件,非常牛,可以自定义格式化的配置
配置VSCode的用户配置
{
...
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// 保存自动修复
"eslint.autoFixOnSave": true,
// jsx自动修复有问题,取消js的format
"editor.formatOnSave": false,
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
"prettier.singleQuote": true,
// 点击保存时,根据 eslint 规则自定修复,同时集成 prettier 到 eslint 中
"prettier.eslintIntegration": true,
...
}