在使用VSCode进行开发时,使用ESLint语法检测工具和prettier格式化代码工具时会出现prettier 的代码风格与ESLint的标准规则不统一.
本文将详细记录如何统一二者的代码风格. 有不恰当的地方欢迎评论区补充和修正哦~
1. 首先在VSCode中下载好prettier 插件后,设置为默认的代码格式化工具
2. 打开设置,搜索Format on save 并勾选. 即可在保存时格式化代码''
3.在组件中进行测试,保存时会出现以下报错信息
信息解读 :
1) quotes : Strings must use singlequote // 即必须使用单引号
2) semi : Extra semicolon // 额外的分号 , 即不需要在每个语句的末尾添加分号
3) comma-dangle : Unexpected trailing comma // 尾随逗号
4) space-before-function-paren : Missing space before function parentheses //函数括号前缺少空格
5) indent : Expected indentation of 2 spaces but found 4 //即一个Tab缩进应该是2个空格,VSCode设置的是4个空格;
4. 解决以上代码风格不统一报错 :
1) 新建 .prettierrc 文件 :
{
"singleQuote": true,
"semi": false,
"trailingComma": "none"
}
2) 修改 .eslintrc.js文件 的 rules配置 :
rules: {
'space-before-function-paren': 'off' //添加此行代码
}
3) 打开VSCode设置,搜索Tab Size 设置 为 2 即可.