react 配置 eslint + prettier

创建 react 项目

npx create-react-app my-app --template typescript

配置 eslint

安装依赖

yarn add eslint -D

在项目根目录创建 .eslintrc.js 文件

touch .eslintrc.js

将 package.json 中的 eslintConfig 项删除，迁移到 .eslintrc.js

// .eslintrc.js
/** @type {import('eslint').Linter.Config} */
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'eslint:recommended',
    'react-app',
    'react-app/jest'
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
}

注意这里有个坑，创建后的项目默认是有 react-app react-app/jest，但是如果要支持这两项需要安装eslint-config-react-app，且不仅安装这一个就行，还要安装其他依赖一起。所以我们这里把这两项删了。但是要支持 react 语法，这里我们安装 eslint-plugin-react 就行

yarn add eslint-plugin-react -D

// .eslintrc.js
extends: [
  'eslint:recommended',
  'plugin:react/recommended'
],
settings: {
  react: {
    version: 'detect',
  },
},

配置 prettier

安装依赖

yarn add prettier eslint-plugin-prettier eslint-config-prettier -D

在项目根目录创建 .prettierrc.js 文件

touch .prettierrc.js

下面列出个人的常用配置，更多配置可查看官方文档

// .prettierrc.js
/** @type {import('prettier').Config} */
module.exports = {
  arrowParens: 'avoid',
  endOfLine: 'lf',
  htmlWhitespaceSensitivity: 'ignore',
  printWidth: 100,
  proseWrap: 'never',
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
}

配置 eslint

// .eslintrc.js
extends: [
  // ...
  'plugin:prettier/recommended'
],
rules: {
  'prettier/prettier': 'error'
}

配置 Typescript

安装依赖

yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

配置 eslint

// .eslintrc.js
extends: [
  // ...
  'plugin:@typescript-eslint/recommended'
]

配置 scripts

在 package.json 文件的 scripts 中，加入下面该命令。然后执行 yarn lint，就可以格式所有文件

{
  "scripts": {
    // ...
    "lint": "eslint --fix ."
  }
}

汇总

yarn add eslint eslint-plugin-react prettier eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

// .eslintrc.js
/** @type {import('eslint').Linter.Config} */
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  // parserOptions: {
  //   ecmaVersion: 2020,
  //   sourceType: 'module',
  // },
  rules: {
    'prettier/prettier': 'error',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
}

// .prettierrc.js
/** @type {import('prettier').Config} */
module.exports = {
  arrowParens: 'avoid',
  endOfLine: 'lf',
  htmlWhitespaceSensitivity: 'ignore',
  printWidth: 100,
  proseWrap: 'never',
  semi: false,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
}