项目配置eslint+prettier

背景

在一个多人协作的项目中，不同的开发人员写的代码的风格不太一样，比如是否需要在行末加分号，换行、空格、缩紧、项目中散落的console处理方法、单行代码最大长度等等，如果项目中没有统一的规范就会导致代码风格的五花八门，不利于代码的阅读和维护。

---

目标

为了项目中有统一的编码规范，我们使用eslint + prettier 来进行约束。

1、使用 eslint + prettier添加统一代码规范

2、格式化现有项目下的不符合规范的文件

3、配置编辑器，自动检测新增或修改的代码的规范合法性

---

1. 安装eslint

npm i -D eslint babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

这里有两个react插件：
eslint-plugin-jsx-a11y：检验jsx语法
eslint-plugin-react：设定react组件的相关规范

添加.eslintrc.js配置

// .eslintrc.js
module.exports = {
    // root: true, //根配置文件
    extends: [
        // 'airbnb', // 继承airbnb规范
        'prettier', // prettier配置
    ],
    parser: 'babel-eslint', // 需要一个parser解析器，把源代码转成抽象语法树
    // 指定解析器选项
    parserOptions: {
        sourceType: 'module',
        ecmaversion: 2015,
    },
    // 指定脚本的运行环境
    env: {
        browser: true,
    },
    plugins: ['prettier' 'react-hooks'],
    rules: {
        'prettier/prettier': 'error',
        'no-console': 'off',
        'no-undef': 'off',
        'no-debugger': 'off',
        'import/no-extraneous-dependencies': 'off',
        'no-param-reassign': 'off',
        'no-plusplus': 'off',
        'no-unused-vars': 'off',
        'no-unused-expressions': 'off',
        'max-classes-per-file': 'off',
        'operator-assignment': 'off',
         "react-hooks/rules-of-hooks": "error", // 检查 Hook 的规则
        "react-hooks/exhaustive-deps": "error" // 检查 effect 的依赖
    },
};

2. 安装prettier

安装prettier插件：

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

添加.prettierrc.js配置

// .prettierrc.js
module.exports = {
  // 一行最多 100 字符
  printWidth: 100,
  // 使用 4 个空格缩进
  tabWidth: 4,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾不需要逗号
  trailingComma: 'es5',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // 换行符使用 lf
  endOfLine: 'auto',
};

3.配置vscode

.vscode/settings.json文件

{
    "window.zoomLevel": 2,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "map"
    ],
    "liveServer.settings.port": 5501
}