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
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 文件

touch .prettierrc

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

// .prettierrc
{
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "ignore",
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none"
}

配置 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
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
{
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "ignore",
  "printWidth": 100,
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none"
}

本文链接:

https://ponjs.com/archives/47.html
1 + 3 =
快来做第一个评论的人吧~