React 中如何使用 ESLint 和 Prettier 格式化代码？

推荐答案

在 React 项目中使用 ESLint 和 Prettier 格式化代码的步骤如下：

1. 安装依赖： 首先，安装 ESLint 和 Prettier 以及相关的插件：

   npm install --save-dev eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier

2. 配置 ESLint： 在项目根目录下创建 .eslintrc.json 文件，并添加以下配置：

   // www.javascriptcn.com code example
   {
     "extends": [
       "eslint:recommended",
       "plugin:react/recommended",
       "plugin:prettier/recommended"
     ],
     "plugins": ["react", "prettier"],
     "rules": {
       "prettier/prettier": "error"
     },
     "parserOptions": {
       "ecmaVersion": 2021,
       "sourceType": "module",
       "ecmaFeatures": {
         "jsx": true
       }
     },
     "settings": {
       "react": {
         "version": "detect"
       }
     }
   }

3. 配置 Prettier： 在项目根目录下创建 .prettierrc 文件，并添加以下配置：

   {
     "semi": true,
     "singleQuote": true,
     "trailingComma": "es5",
     "printWidth": 80,
     "tabWidth": 2
   }

4. 配置 VSCode（可选）： 如果你使用 VSCode，可以在 .vscode/settings.json 中添加以下配置，以便在保存时自动格式化代码：

   // www.javascriptcn.com code example
   {
     "editor.formatOnSave": true,
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "eslint.enable": true,
     "eslint.run": "onSave",
     "eslint.options": {
       "extensions": [".js", ".jsx"]
     }
   }

5. 运行 ESLint 和 Prettier： 你可以在 package.json 中添加以下脚本来运行 ESLint 和 Prettier：

   "scripts": {
     "lint": "eslint 'src/**/*.{js,jsx}'",
     "format": "prettier --write 'src/**/*.{js,jsx}'"
   }

本题详细解读

1. ESLint 和 Prettier 的作用

• ESLint：主要用于检测代码中的潜在问题和错误，并强制执行代码风格规范。
• Prettier：主要用于自动格式化代码，确保代码风格的一致性。

2. 配置文件的解析

• .eslintrc.json：这是 ESLint 的配置文件，定义了 ESLint 的规则和插件。eslint-plugin-react 用于 React 特定的规则，eslint-config-prettier 用于关闭与 Prettier 冲突的规则，eslint-plugin-prettier 用于将 Prettier 作为 ESLint 的规则运行。
• .prettierrc：这是 Prettier 的配置文件，定义了代码格式化的规则，如缩进、引号、分号等。

3. VSCode 配置

• editor.formatOnSave：设置为 true 时，保存文件时会自动格式化代码。
• editor.defaultFormatter：设置为 Prettier，以便使用 Prettier 进行格式化。
• eslint.enable 和 eslint.run：启用 ESLint 并在保存时运行。

4. 脚本命令

• lint：运行 ESLint 检查代码。
• format：运行 Prettier 格式化代码。

通过以上配置，你可以在 React 项目中有效地使用 ESLint 和 Prettier 来保持代码的一致性和可读性。