ESLint+prettier 统一代码风格配置

在使用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 即可.