最简易版，在React中使用Eslint+Prettier

在多人合作的项目中，同意代码风格是特别重要的一件事，如果一个人的缩进是2空格，另一个人的缩进是4空格，那即使代码没有做修改，也会被git识别成文件有改动。这情况是很没有必要且可以避免的。
下面我就分享如何使用eslint和prettier来很轻松地达到我们的目的–代码格式化做到基本统一。
文章将会分成三个部分

1. eslint的使用和说明
2. prettier在eslint的使用和说明
3. 让IDE保存按照eslint配置自动格式化

文章的插件讲解将会基于最原始的react官方脚手架搭建的项目

eslint的使用和说明

什么eslint

在react中使用eslint

安装

npm i eslint -D

编写eslint配置文件

在项目根目录中新建一个文件名为：.eslintrc.js

也可以创建后缀json，yml等的文件，但不能没有后缀（如： .eslintrc），没有后缀的写法已经被弃用了

其内容如下：

module.exports = {
  parserOptions: {
    ecmaVersion: 'latest', // 使用最新的 ECMAScript 版本
    sourceType: 'module', // 使用模块化的文件结构
  },
  env: {
    browser: true, // 启用浏览器环境
    es2021: true, // 使用 ES2021 版本的特性
    commonjs: true, // 启用 CommonJS 模块规范
  },
  parser: '@typescript-eslint/parser', // 使用 '@typescript-eslint/parser' 作为解析器，用于解析 TypeScript 代码
  extends: [
    'eslint:recommended', // 使用 ESLint 推荐的基本规则
    'plugin:react/recommended', // 使用 react 插件推荐的规则
    'plugin:@typescript-eslint/recommended', // 使用 @typescript-eslint 插件推荐的规则
  ],
  plugins: ['react'], // 启用 react 插件
  rules: {
    quotes: ["error", "single"], // 强制使用单引号
  },
};

上面的配置内容已经写了些注释，让大家可以大致知道每个配置项代表什么意思。这已经是最基本的配置内容了。支持了typescript，react的格式校验，支持最新的es语法，esm模块，浏览器全局变量，es2021的全局变量，commonjs的全局变量。
我们可以修改quotes: ["error", "single"]内容，来验证eslint是否生效。

为什么其中写了sourceType: 'module', 还要写commonjs: true,这可能会让一些人迷糊。前者表示校验整个项目是以esm模块的语法来进行校验的。而后者表示支持commonjs模块下的环境变量。
其实可以试试将后者删掉，会发现eslint校验规则依旧存在并不受影响，那么，哪里变了？
这里变了：

这里会有个红线，虽然不影响校验效果，但是影响心情😄。

加上了commonjs: true后，这个报错就消失了~
（暂不知道，这样做有没哟其他的影响，知道的jym评论区告诉我👍）
还有中做法，是添加node:true

eslint的配置项讲解（供想深入了解的同学。可跳过）

//正在努力撰写中

prettier在eslint的使用和说明

什么是prettier

prettier是一个有自己风格的代码格式化工具。它可以支持多种语言，例如JavaScript, TypeScript, CSS, HTML, Markdown等。它可以和大多数的编辑器集成，例如VS Code, WebStorm, Atom等。它的作用是通过解析你的代码，然后按照一定的规则重新打印出来，保证你的代码风格统一和美观。它可以帮助你节省时间和精力，避免在代码审查中讨论风格问题，提高代码质量和可读性。

prettier与eslint不同的是，

1. eslint既有代码风格的校验，也有语法的校验，prettier只负责代码的格式化。
2. eslint可以校验多种类型的文件（ts,tsx,js,jsx,html,md,vue），只要安装相应的插件，prettier也可以校验多种类型的文件(包括但不仅限于css，sass)，但是它支持的范围更广泛。

也就是说你想在代码中对css文件格式化，就必须使用prettier

在eslint中使用prettier

我们知道eslint和prettier都有对代码风格的校验，所以如果同时生效，就必然会有冲突。相比于手动解决冲突，还可以使用eslint-config-prettier这个扩展来自动关闭这些规则。
需要该功能需要一个依赖eslint-config-prettier

npm i eslint-config-prettier -D

该依赖是一个eslint插件，功能是关闭了eslint中与prettier有冲突的rules
使用方法：

{
extends: [
'eslint:recommended', 
'plugin:react/recommended', 
'plugin:@typescript-eslint/recommended', 
'prettier' //全部关闭eslint中有关prettier，不管冲没冲突
],
}

如果只想关闭一部分，可以这么写extends: [ ...,"plugins:prettier/recommended"]

除此之外，我还想在运行eslint时同时运行prettier，并且把prettier的错误作为eslint的错误来显示。这时候可以安装另外一个依赖

npm i eslint-plugin-prettier -D

使用方法：

{
  plugins: ['react', 'prettier'],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'prettier/prettier': ['error'], // 打开所有的prettier的rule
  },
}

到这里差不多就结束配置了，不过还差一样东西，就是prettier的配置，如果没有这个配置，那eslint就只能按照默认的rule来格式化代码了。

新建一个文件.prettierrc.js

module.exports = {
    // 是否在语句末尾添加分号
    semi: true,
    // 是否使用单引号而不是双引号
    singleQuote: true,
    // 缩进的空格数
    tabWidth: 4,
    // 每行的最大字符数
    printWidth: 120,
    // 是否在多行元素的最后一行放一个括号
    bracketSameLine: true,
    // 箭头函数的参数是否总是用括号包裹
    arrowParens: 'always',
    // 在JSX中是否使用单引号而不是双引号
    jsxSingleQuote: true,
    // 在对象字面量中是否添加空格，例如 { foo: bar }
    bracketSpacing: true,
};

好了，下面我们开始验证我们的配置是否生效
刚开始的App.tsx文件中，缩进的空格数是4

修改tabWidth->tabWidth: 8

module.exports = {
    // 缩进的空格数
    tabWidth: 8,
};

在命令行中执行：

npx prettier --write src/App.tsx

然后再看App.tsx,文件，发现缩进变成8个空格了

说明prettier生效了，那eslint有没有生效呢，我们将tabWidth改回去->tabWidth: 4，执行eslint命令

npx eslint --fix src/App.tsx

再看看APP.tsx，发现缩进又变成4个空格了

哇这种感觉很棒，eslint和prettier真正融合在一起，对代码格式共用同一套配置文件。
要是觉得敲命令麻烦，可以将格式化的命令放在package脚本中：

{
  "scripts": {
        "lint": "eslint --fix src/**/*.{ts,tsx}",
        "format": "prettier --write 'src/**/*.{css,ts,tsx,json}'"
    },
}

让IDE按照eslint配置的自动格式代码

安装两个插件，eslint，prettier

修改vscode/setting.json

全局用eslint格式化代码

{
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "html"],
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[typescript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[css]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    }
}

也可以使用prettier作为格式化插件，效果都是一样的

{
  "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
}

注意的点

注意的点：

1. 虽然可以通过 ESLint 配置将prettier的rules配置传递给 Prettier，但不建议这样做。因为编辑器扩展不会从ESLint 读取设置。

就像这样：

{
  rules: {
        'react/react-in-jsx-scope': 'off',
        'prettier/prettier': [
            'error',
            {
                tabWidth: 4,
            },
        ],
    },
}

也就是说如果你是用了IDE保存自动格式化的功能，与prettier有关的插件，只能读取.prettierrc配置文件，不能读取eslint配置中的prettier，这会导致不一样的体验。
类似于用prettier保存文件之后，却收到了eslint(prettier/prettier)的报错信息

注意的点：
2. 上面说过，可以利用eslint-plugin-prettier 插件，把prettier的错误作为eslint的错误来显示。但这样做有个小问题，就是当我们修改了.prettierrc中的rule的时候，eslint插件在编辑器中的风格校验规则还是旧的。这个时候必须通过reload vscode来解决。( ctrl + shift + p, 输入 reload window即可)

总结：

这篇文章讲了如何在react原始的脚手架中，使用eslint和prettier。过程清晰，步骤简单。不仅可以拿来即用，也可以深入了解掌握逻辑，是个不可多得的好文章。
文章还着重介绍了eslint与prettier的结合，以及和IDE的编辑联合使用，这是这篇文章的难点所在，网上也没有对应的文章，这也是我花了比较长的时间搞定的。
大家如有不明白的地方，可以私信与我，也可以文章评论。我长期活跃在掘金社区