vue模版中.gitignore和.prettierrc功能区分

问题点：彻底解决 .prettierrc 和 .eslintrc 的冲突问题

Prettier ：是一个固执己见的代码格式化器。只关心代码的格式，如分号、引号、缩进、行长等，强制代码变成统一的风格，不检查代码逻辑和质量。

ESLint : 是一个代码质量和错误检查器 。它主要寻找代码中的错误模式、坏味道和潜在 bug。但它的部分规则（如 quotes, semi, indent）也涉及代码风格。

冲突解决方案：职责分离，让 Prettier 完全负责代码格式化，并让 ESLint 只专注于代码质量。

第 1 步：安装必要的包

lua 复制代码

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

1.1、 eslint-config-prettier ：关闭所有与 Prettier 冲突的 ESLint 规则 。它是一个配置集，会覆盖掉 ESLint 中所有不必要的或可能与 Prettier 冲突的规则（主要是那些风格规则）。 1.2. eslint-plugin-prettier ：将 Prettier 作为一条 ESLint 规则来运行 。它会在你运行 eslint 时，调用 Prettier 检查代码格式。如果格式不对，它会以 ESLint 错误（prettier/prettier）的形式报告出来。

第 2 步：配置 ESLint (.eslintrc.js)

extends 数组的最后一项 添加 'plugin:prettier/recommended'。

java 复制代码

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    // 1. 继承其他现有的ESLint配置（例如ESLint推荐规则、React插件、Vue插件等）
    'eslint:recommended',
    'plugin:react/recommended',
    // ... 你的其他配置

    // 2. 【核心】确保这行在 extends 数组的最后！
    // 这行代码实际上做了三件事：
    //   a. 启用了 eslint-plugin-prettier
    //   b. 设置了 'prettier/prettier' 规则为 'error'
    //   c. 扩展了 eslint-config-prettier 来关闭所有冲突的规则
    'plugin:prettier/recommended'
  ],
  // 通常不需要再单独在 `plugins` 里声明 'prettier'，因为上面的 extends 已经包含了。
  rules: {
    // 3. 这里可以放置你自己的其他规则覆盖
    // 注意：所有关于格式的规则（分号、引号等）现在都应交给 Prettier 管理。
    // 这里只配置代码质量规则，例如：
    'no-unused-vars': 'warn',
    'react/prop-types': 'off' // 例如关闭某个规则
  },
  // ... 其他配置
};

第 3 步：配置 Prettier (.prettierrc)

json 复制代码

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

创建一个测试文件 ，比如 test.js，故意写得格式混乱（比如用双引号、不加分号）。
运行命令：

css 复制代码

npx eslint --fix test.js

检查文件：
- 如果文件被自动格式化为你在 .prettierrc 中定义的风格（如单引号、加了分号），并且没有 ESLint 报 prettier/prettier 错误，说明配置成功！
- 如果还有冲突，检查你的 extends 顺序是否正确。

配置编辑器/IDE（以 VSCode 为例）

为了让开发体验更流畅，需要正确配置编辑器。

安装插件 ：确保已安装 ESLint 和 Prettier - Code formatter 插件。
配置 VSCode 设置 (settings.json) ：

json 复制代码

{
  // 启用保存时自动修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  // 指定默认格式化器为 Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 【重要】关闭编辑器自带的保存时格式化，我们用ESLint来触发
  "editor.formatOnSave": false,
  // 确保ESLint验证这些文件类型
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "html"
  ]
}

当保存文件时，VSCode 会触发 eslint --fix，它既修复了 ESLint 能修复的质量问题，又通过 eslint-plugin-prettier 调用了 Prettier 进行格式化。一切都在一次保存中完成。

最终效果 ：你运行 eslint --fix 时，它会先用自己的规则修复代码质量问题，然后调用 Prettier 进行格式化，一举两得。