前端代码规范方案（ESLint 和 Prettier结合使用），可以自动检测并修复。。前端代码规范方案（ESLint 和

ESLint 和 Prettier结合使用

ESLint 和 Prettier的对比

ESLint 和 Prettier 是两种不同类型的工具，虽然它们在代码质量和风格方面有相似之处，但它们的目的和功能有所不同。

各自优势

1.ESLint 是一个插件化的静态代码分析工具，主要用于识别和报告 JavaScript 代码中的问题。它可以检测代码中的错误、潜在问题以及不遵循规定的编码风格。

2.Prettier 是一个代码格式化工具，专注于确保代码的一致性和可读性。它自动化了代码的格式化，使代码看起来整洁、一致。

主要区别

• 关注点不同：ESLint 关注代码的质量、潜在错误和最佳实践，而 Prettier 关注代码的格式化和外观。
• 规则的可定制性：ESLint 允许高度定制规则，Prettier 的格式化规则是固定的。
• 功能重叠较少：虽然 ESLint 也可以进行一些样式检查，但它并不是专注于格式化；相反，Prettier 将所有格式化作业自动完成。

两个插件各自的优势分析，在项目中可以配合使用，可以同时配置 ESLint 和 Prettier，这样在 ESLint 检查代码的同时，也可以进行代码格式化，从而实现代码质量和一致性的双重保障。 （特别需要注意的是要禁用 ESLint 中的所有格式化规则，确保 Prettier 控制格式化，防止两个冲突）

以下是安装、配置、使用的步骤：

在VS Code安装 ESLint 插件

1. 访问插件市场，可以通过点击侧边栏的扩展图标或按下 Ctrl+Shift+X。

2. 搜索 "ESLint"。

1. 找到 ESLint 插件后，点击安装。

2. 安装完成后，重启 VSCode 以激活插件。

安装 Prettier 插件

1. 同样在 VSCode 的插件市场中搜索 "Prettier"。

2. 找到 Prettier 插件后，点击安装（有不同的版本，我安装的是下图这个）。

0. 安装完成后，重启 VSCode。

安装完成后，配置文件，防止格式化发生冲突，以下是配置和集成的过程

配置 ESLint

详情请看，中文文档地址（eslint.nodejs.cn/docs/latest…）

1. 在项目根目录下初始化 ESLint 配置文件，可以通过运行 npx eslint --init 命令来创建 eslint.config.mjs 配置文件。（有的版本是 .eslintrc.js配置文件）

// eslint.config.js
import js from "@eslint/js";
​
export default [
    js.configs.recommended,
​
    {
        rules: {
            "no-unused-vars": "warn",
            "no-undef": "warn"
        }
    }
];

2.在 .eslintrc 文件中，可以添加 eslint-config-prettier 来禁用与 Prettier 冲突的 ESLint 规则，确保两者能够协同工作。

配置 Prettier

1. 在项目根目录下创建 .prettierrc 文件，用于配置 Prettier 的规则，例如：

   {
     "singleQuote": true,//指定 Prettier 在格式化代码时应该使用单引号 ' 而不是双引号 " 来包围 JavaScript                    中的字符串字面量。例如，它会将 "hello" 格式化为 'hello'。
     "trailingComma": "es5",//控制 Prettier 如何处理对象、数组等末尾的逗号。"es5" 表示在 ES5 模式下，                           Prettier 会在多行中的对象或数组的最后一个元素后面添加逗号（尾随逗号），而在单                         行中则不会添加。尾随逗号在 ES6 中是有效的，但在 ES5 中可能会导致语法错误，因                         此 Prettier 根据代码的行数来决定是否添加。
     "tabWidth": 2,//指定了在代码中使用多少个空格来表示一个制表符（Tab）。这里设置为 2 表示每个制表符相当于                两个空格的宽度。
     "semi": true //这个选项指定 Prettier 在格式化代码时应该在每个语句的末尾添加分号 ;。如果设置为 false，               则 Prettier 不会在语句末尾添加分号，除非这样做是必要的（例如，在某些情况下，不加分号可能               会导致 JavaScript 引擎解释错误）。
   }
   

2. 可以在 VSCode 的 settings.json 中设置 Prettier 为默认的格式化工具，并启用保存时自动格式化：

   {
     "editor.defaultFormatter": "esbenp.prettier-vscode",//指定 Prettier 作为 VSCode 中默认的代码格式化                                                 工具
     "editor.formatOnSave": true //这个设置使得 VSCode 在你保存文件时自动格式化代码
   }
   

集成 ESLint 和 Prettier

1. 确保 .eslintrc 配置文件中包含了 eslint-plugin-prettier 和 eslint-config-prettier，这样 ESLint 就会忽略与 Prettier 冲突的规则。

2.  npm install --save-dev eslint-plugin-prettier eslint-config-prettier --legacy-peer-deps
   

3. 在 settings.json 中配置 ESLint 自动修复：

   {
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true    //在保存文件时，VSCode 应该自动执行 ESLint 提供的所有修复操作（即                                   ESLint 能够自动修复的代码问题）。这通常包括代码风格问题和某些类型                                    的代码错误。
     }
   }
   

使用 Git 钩子

1. 使用 Husky 来设置 Git 钩子，确保在提交代码前自动运行 ESLint 和 Prettier。

2. 安装 Husky 和 lint-staged：

   npm install --save-dev husky lint-staged
   

3. 在 package.json 中添加 pre-commit 脚本，例如：

   "husky": {
       "hooks": {
         "pre-commit": "lint-staged"
       }
     },
   "scripts": {
     "pre-commit": "lint-staged" //当执行 npm run pre-commit 或在 Git 提交过程中自动触发时，               lint-staged 将会运行。
   },
   "lint-staged": {
     "*.js": [  //这个配置将应用于所有 .js 文件
       "prettier --write", //使用 Prettier 对文件进行格式化，并直接写入文件。这意味着它会将代码格式                      化为，Prettier 指定的风格，并更新文件内容。
       "eslint --fix", //使用 ESLint 检查代码，并尝试自动修复所有可修复的问题（例如代码风格问题或某                     些简单的错误）
       "git add"  //将格式化和修复后的文件重新添加到 Git 暂存区。这样做是为了确保在执行 git commit                时，提交的代码已经是格式化和修复过的版本。
     ]
   }
   

通过上述步骤，就可以使用代码格式化。以下是使用方法：* **

使用 Prettier 格式化代码

第一种是手动格式化，1.在 VSCode 中打开你想要格式化的文件。使用快捷键 Shift+Alt+F来格式化当前文件，也可以鼠标右键然后选择 Format Document”（格式化文档）

第二种是通过命令格式化，

运行

npm prettier --write [file-path]

命令来格式化指定的文件或文件夹。例如：

npm prettier --write src/

第三种是通过 Git 钩子自动格式化和保存时自动格式化上面配置文件中有说明，

当运行 git add 命令将文件添加到暂存区时，如果 Husky 的 pre-commit 钩子已经设置好，它会触发 lint-staged 脚本，自动运行 Prettier 和 ESLint 来格式化暂存区中的文件。

使用 ESLint 检查和修复代码

在 VSCode 中打开你想要检查的文件。保存文件时，如果设置了 editor.codeActionsOnSave，ESLint 会自动检查并修复问题。也可以手动触发检查，通过点击编辑器下方的 ESLint 问题标记，然后选择“Fix all in file”（修复文件中的所有问题）

命令行检查和修复(两个工具方法相似)

npm eslint [file-path]

命令来检查指定的文件或文件夹。例如：

npm eslint src/

要修复可自动修复的问题，使用--fix选项

npm eslint --fix src/

0. 通过 Git 钩子自动检查和修复：

类似于 Prettier，当你运行 `git add` 命令时，`lint-staged` 脚本也会运行 ESLint 的 `--fix` 命令来修复暂存区中的文件。

配置好之后在项目中测试，好多页面报错。 点击保存会自动修复。

vsCode左下角会显示，两个插件的坐标，点击会输出错误信息!