1. 创建react项目

这里推荐使用create-react-app创建，因为使用了typescript,我在创建项目时选择了ts模板，使用请参考create-react-app。

npx create-react-app 项目名 --template typescript

2.安装Prettier依赖

npm i eslint-config-prettier eslint-plugin-prettier prettier --save-dev

执行npx eslint --init生成eslint配置文件

在这里插入图片描述在进行到最后一步，提示是否安装依赖时，我选择了否，因为create-react-app默认创建时就已下载了eslint所有的依赖，重复安装会产生不必要的错误。

执行完上述命令，在src下会生成一个.eslintrc.js，这

3. 添加.eslintignore并修改.eslintrc.js

// .eslintrc.js  
module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended"
    ],
    "settings": {
        "react": {
            "version": "999.999.999" //消除npm run lint时的警告信息
        }
    },
    "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": {
        "no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/no-explicit-any": ["off"]
    }
}

添加.eslingtignore文件，代码检查时不会检查这些文件或者文件夹

//.eslintignore

README.md
.DS_Store
node_modules
/dist

/tests/e2e/videos/
/tests/e2e/screenshots/

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

# Lock File
package-lock.json
yarn.lock

# autoGen
/autoGen
/public/cdn
/public/cdnimages

4. 创建.prettierignore .prettierrc.js

//.prettierignore
README.md
.DS_Store
node_modules
/dist

/tests/e2e/videos/
/tests/e2e/screenshots/

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

# Lock File
package-lock.json
yarn.lock

# autoGen
/autoGen
/public/cdn
/public/cdnimages

//.prettier.js
module.exports = {
  // 箭头函数只有一个参数的时候可以忽略括号
  arrowParens: 'avoid',
  // 括号内部不要出现空格
  bracketSpacing: true,
  // 行结束符使用 Unix 格式
  endOfLine: 'lf',
  // true: Put > on the last line instead of at a new line
  jsxBracketSameLine: false,
  // 行宽
  printWidth: 100,
  // 换行方式
  proseWrap: 'preserve',
  // 分号
  semi: false,
  // 使用单引号
  singleQuote: true,
  // 缩进
  tabWidth: 2,
  // 使用 tab 缩进
  useTabs: false,
  // 后置逗号，多行对象、数组在最后一行增加逗号
  trailingComma: 'es5',
  parser: 'typescript',
}

更多配置项请前往prettier官网

5. vscode配置

在根目录下创建.vscode/settings.json文件，并进行以下配置

{
    "editor.formatOnSave": true, //保存时格式化
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit" //保存文件时是否自动修复ESLint问题,手动触发
    }
}

6. 测试格式化效果

为确保配置生效，重新启动一下vscode

ctrl+s 保存 App.tsx 发现在prettier中配置的规则已生效，没有了句尾分号，变量使用单引号在这里插入图片描述

React18配置Eslint+Prettier代码格式化