Eslint和Prettier的配置与冲突处理

// .eslintrc.js 或 .eslintrc.json
{
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "rules": {
    // 这里可以覆盖或添加规则，如果有必要的话
  }
}
 
// .prettierrc 或 .prettierrc.json 或 prettier.config.js
{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  // 其他 Prettier 配置
}
 
// package.json
{
  "scripts": {
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
    // 其他脚本
  },
  "devDependencies": {
    "eslint": "^7.11.0",
    "eslint-config-prettier": "^6.13.0",
    "eslint-plugin-prettier": "^3.1.3",
    "prettier": "^1.19.1"
    // 其他依赖
  }
}

在这个例子中，我们配置了 ESLint 和 Prettier 来一起工作。首先，在 .eslintrc 文件中，我们通过扩展 airbnb 配置和 eslint-plugin-prettier/recommended 规则集来使用 Prettier 作为 ESLint 的一部分。然后，在 .prettierrc 文件中，我们定义了 Prettier 的规则。在 package.json 中，我们配置了 lint 脚本来运行 ESLint，并确保所需的 Prettier 和 ESLint 插件作为开发依赖。

这样配置后，当你运行 npm run lint 时，它会检查代码格式是否符合 Prettier 和 ESLint 规则，同时，你可以通过编辑器插件（如 VSCode 中的 ESLint 和 Prettier 插件）在编写代码时自动格式化和检查。