给 react 项目中加入 eslint + prettier

前言

react 项目开始时可能要配置不少东西，这里就直接配置一些常用的便捷类的配置吧，至少短期内应该是可以可以使用的，时间长了，还是要重新配置一下最好，不过使用也没问题，就是不是最新的了😂

配置 eslint 代码规范

yarn add eslint --dev
npx eslint --init

会自动生成 .eslintrc.js 文件 我们可以不配置，也可以点进去配置一下 rules 等信息(rules不配置可能有些用起来挺难受，可以调整一下)，下面长这样

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        node: true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "react"
    ],
    "rules": {
        '@typescript-eslint/interface-name-prefix': 'off',
        '@typescript-eslint/explicit-function-return-type': 'off',
        '@typescript-eslint/explicit-module-boundary-types': 'off',
        '@typescript-eslint/no-explicit-any': 'off'
    }
}

配置 prettier 代码格式化工具

yarn add prettier --dev

项目主目录创建 .prettierrc 文件，加入下面几个

{
    "trailingComma": "all",
    "tabWidth": 4,
    "semi": false, //;false舍弃
    "singleQuote": true //单引号
}

package.json 中的 scripts 加入下面就可以直接全局格式化了

 "scripts": {
    ...
    "prettier": "prettier --write ."
  },

vscode + prettier

如果想充分利用 vscode 更便利使用，下载插件 pertter - coder formatter，如下所示

在项目根目录中加入下面文件 .vscode/settings.json(即创建一个 .vscode 文件夹，里面创建 settings.json 文件)

{
    // eslint主要功能设定规范,捕获不规范的错误等 美化代码或者格式化代码功能交给prettier
    "eslint.format.enable": false,
    //打开保存格式化功能(保存代码的时候自动格式化)
    "editor.formatOnSave": true,
    //使用 prettier  作为默认格式化程序
    "editor.defaultFormatter": "esbenp.prettier-vscode"
}

如下所示

这样我们就可以在开发中，直接右键格式化代码，直接应用 prettier 格式化操作了

避免eslint与prettier冲突

为了避免 eslint 和 prettier 冲突处理，需要加入 eslint-config-prettier（开发项目时不一定冲突，避免一些特殊的情况）

yarn add eslint-config-prettier --dev

其他配置简单参考

测试参考案例

配置案例demo，typescript版，可供参考😂 github

一般直接使用 create-react-app 命令，或者别人配置好的直接使用即可
//js版本
npx create-react-app 项目名字
yarn create react-app 项目名字
//ts版本
npx create-react-app 项目名字 --template typescript
yarn create react-app 项目名字 --template typescript