eslint+prettier前端代码规范配置

前端代码规范配置

参考来源：https://blog.csdn.net/u013361179/article/details/108885859

前言

1. eslint的作用：eslint作用是按照一定规则，检测代码质量；

2. prettier的作用：prettier起到的作用是按照统一风格去美化代码

   目前支持的格式：

   • javascript、jsx、ts、tsx
   • flow
   • json
   • css、less、scss
   • graphql
   • markdown
   • yaml

ESlint虽然可以检测代码质量问题并给出提示，但是格式化的能力有限，只能格式化js，不支持css,html等语言。而Prettier具有更强大的功能，能够支持包括 js、ts、各种 css、vue 和 md 等前端绝大部分的语言和文件格式。因此，我们可以通过ESlint和Prettier组合使用，用Eslint进行代码校验，用Prettier统一代码风格。

eslint规则

规则配置：https://blog.51cto.com/itcjf/2995936#types–complex

prettier规则

官网：https://www.prettier.cn/

settings.json文件

setting 配置（ctrl+shift+P打开）

setting.json文件分为工作区和用户区，

1. 工作区：如果只是想改变该项目的配置，就在工作区；
2. 用户区：如果是想所有项目都用改配置就在用户区添加，用户区添加以后其他电脑登录对应用户也会同步更新的；

vetur

注意：在 vscode 中其实 Vetur 也有一套 Format 规则，因此会和 prettier 冲突。打开 setting-扩展-Vetur 将 Vetur 的规则改成 Prettier 就好了。如果有需要忽略的文件可以在 .eslintignore 文件中进行配置（可以忽略）

配置流程

一、vscode插件商城安装插件

首先安装的代码格式化插件：vetur、ESLint

二、安装依赖

1. npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint

   npm i -D eslint babel-eslint eslint-plugin-vue @vue/cli-plugin-eslint --legacy-peer-deps
   

​ eslint: ESLint 的核心代码
​ babel-eslint: eslint 与 babel 整合包
​ eslint-plugin-vue @vue/cli-plugin-eslint: eslint 与 vue 整合包

2. npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli

   npm i -D prettier eslint-plugin-prettier eslint-config-prettier prettier-eslint-cli --legacy-peer-deps
   

   prettier：prettier 插件的核心代码
   eslint-plugin-prettier：这个插件的主要作用就是将 prettier 作为 ESLint 的规则来使用，相当于代码不符合 Prettier 的标准时，会报一个 ESLint 错误
   eslint-config-prettier：解决 ESLint 中的样式规范和 prettier 中样式规范的冲突，以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效，本质上这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。
   prettier-eslint-cli:prettier-eslint-cli 允许多个文件用 prettier-eslint 进行格式化

三、配置eslint（.eslintrc.js）

ESlint配置中各项值的含义：

https://eslint.bootcss.com/docs/user-guide/configuring

1. parserOptions

   解析器选项。指定你想支持的语言，默认支持es5。指定啥语言，eslint就按照啥语法检查。

2. parser

   指定要使用的解析器。（parser和parserOptions要同时使用）

3. processor

   指定插件的处理器。（需要和 plugins 字段配合使用）处理器可以从另一种文件中提取 JavaScript 代码，然后让 ESLint 检测 JavaScript 代码。或者处理器可以在预处理中转换 JavaScript 代码。

4. environments

   指定代码运行环境。

5. globals

   定义全局变量。告知 eslint，不必报 no-undef 错误。

6. rules

   手动自定义代码规范。

   • off 或 0：表示不验证规则。
   • warn 或 1：表示验证规则，当不满足时，给警告。
   • error或 2 ：表示验证规则，不满足时报错。

7. extends

   用于继承某些基础配置。值可以是字符串/数组。值为数组时，每个配置继承它前面的配置。(说白了，就是别人提前写好了一套 rules，你直接拿过来用就行。不用自己一个一个一个的，写 rules 规则。)

ESlint配置

在项目的根目录下，新建.eslintrc.js 或者一键生成npm init @eslint/config文件，将定义的eslint规则拷贝进去

module.exports = {
    // 指定代码的运行环境
    env: {
        browser: true,
        node: true,
        es6: true,
    },
    extends: [
        //继承 vue 的标准特性
        'eslint:recommended',
        'plugin:vue/essential'],
    globals: {
        Atomics: 'readonly',
        SharedArrayBuffer: 'readonly'
    },
    parserOptions: {
        // 定义ESLint的解析器
        parser: "babel-eslint",
        sourceType: "module",
    },
    plugins: ['vue'],
    rules: {
        indent: [
            2,
            2, // 缩进两个
            {
                SwitchCase: 1, // switch case缩进缩进2格（2x1）
                VariableDeclarator: 'first' // const let var 对齐缩进
            }
        ],
        eqeqeq: 2, // 要求使用 === 和 !==
        'lines-around-comment': [
            2,
            {
                beforeBlockComment: true, // 块注释之前空行
                beforeLineComment: false, // 行注释之前空行
                allowBlockStart: true, // 允许注释出现在块语句的开始位置
                allowObjectStart: true, // 允许注释出现在对象字面量的开始位置
                allowArrayStart: true, // 允许注释出现在数组字面量的开始位置
                allowClassStart: true, // 允许注释出现在类的开始位置
                ignorePattern: '#'
            }
        ],
        'spaced-comment': 2, // 注释上的空格，//xxx => // xxx
        'no-whitespace-before-property': 2, // 禁止点调用有空格 a. b => a.b
        'no-multiple-empty-lines': [
            2,
            {
                max: 1, // 连续最大空行数
                maxEOF: 0 // 文件末尾空行数
            }
        ],
        'block-spacing': [2, 'always'], // 代码块空格{return} => { return }
        'arrow-spacing': 2, // 要求箭头函数的箭头部分前后的空格
        quotes: [
            2,
            'single',
            {
                // 允许字符串使用单引号或者双引号，只要字符串中包含了一个其他引号，否则需要转义
                avoidEscape: true,
                // 允许字符串使用反勾号
                allowTemplateLiterals: true
            }
        ],
        'brace-style': 2, // else 与它的大括号同行。
        curly: 2, // if 语句如果包含多个语句则使用大括号。
        'operator-linebreak': 2, // 三元表达式如果是多行，则 ? 和 : 放在各自的行上。
        // 对属性名强制使用驼峰
        camelcase: [2, {
            properties: "always"
        }],
        "no-console": 2,//禁止使用console
        'comma-dangle': 2, // 无多余逗号。
        'no-underscore-dangle': 2// 此规则不允许在标识符中使用悬空下划线。
    }
};

四、配置prettier （.prettierrc.js）（可选）

可配置也可不配置：若不配置在setting.json文件中加入"vetur.format.defaultFormatter.js": "none",即可

//一键格式化
npx prettier --write .

在项目的根目录下，创建.prettierrc.js 文件，定义的prettier规则拷贝进去

module.exports = {
  // 最大长度80个字符
  printWidth: 80,
  // 行末分号
  semi: true,
  // 单引号
  singleQuote: true,
  // JSX双引号
  jsxSingleQuote: false,
  // 尽可能使用尾随逗号（包括函数参数）
  trailingComma: 'none',
  // 在对象文字中打印括号之间的空格。
  bracketSpacing: true,
  // > 标签放在最后一行的末尾，而不是单独放在下一行
  jsxBracketSameLine: false,
  // 缩进
  tabWidth: 2,
  // 使用tab还是空格
  useTabs: false,
  // 行尾换行格式
  endOfLine: 'auto',
  //空格敏感
  HTMLWhitespaceSensitivity: 'ignore',
  extends: [
    //继承 vue 的标准特性
    'plugin:vue/essential',
    'eslint:recommended',
    //避免冲突
    'plugin:prettier/recommended'
  ]
};

五、配置setting.json文件

ctrl+shift+P打开，将配置拷贝进去以后，保存关闭

  //设置vetur默认html代码格式化风格
  "vetur.format.defaultFormatter.html": "prettier",
  // 为ESLint启用“保存时自动修复”，并且仍然具有格式和快速修复功能
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
  "eslint.enable": true,
  "eslint.options": {
    "extensions": [
      ".js",
      ".vue",
      ".ts",
      ".tsx"
    ]
  },
//保存的时候格式化代码
  "editor.formatOnSave": true,
  "eslint.validate": [
    "vue",
    "html",
    "javascript",
    "typescript",
    "javascriptreact",
    "typescriptreact"
  ],

六、配置eslintignore文件（.eslintignore）

需要忽略格式化的文件就放入该文件

node_modules
.vscode
.idea
/public
.eslintrc.js
.DS_Store
/dist

七、最后

上述步骤完成以后，记得一定要重启VSCode才会生效

转换思路：

eslint规则+eslint插件：代码规则不符合eslint配置报红色错误提示；

eslint规则：代码不符合eslint规则，编译的时候报错；

prettier规则：让和eslint冲突的规则统一,自动保存的时候；

自动保存是分为两步的：
第一步是eslint自动修复js代码；
第二步是prettier格式化html+css代码和部分js代码，而在这个时候prettier格式化js代码会和eslint规则有冲突，这个时候eslint-config-prettier依赖会让以 prettier 的样式规范为准，使 ESLint 中的样式规范自动失效；

问题：

1. 已经有eslint规则，为什么还要单独去写prettier规则？
   因为eslint规则只是针对于js代码，prettier规则是对于大部分代码格式化都有用的，vetur插件中自带prettier规范，对于prettier如果不想配置，直接在setting.json文件中加入："vetur.format.defaultFormatter.js": "none"即可（主要是使vetur对js代码格式化失效）

2. 哪些代码是可以自动修复的？
   空格，双引号这些格式的代码是可以自动修复的，代码规范报错会提示到具体代码，手动修改、

参考来源：https://blog.csdn.net/u013361179/article/details/108885859