eslint-config-prettier

eslint-config-prettier 是一种可用于确保 ESLint 和 Prettier 之间无冲突的包。

使用方法

1. 首先，你需要安装 eslint-config-prettier：

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

2. 接着，你需要在 .eslintrc 中添加 prettier 配置：

   {
     "extends": ["eslint:recommended", "prettier"]
   }
   

3. 最后，你需要在 package.json 中添加 prettier 配置：

   {
     "prettier": {
       "printWidth": 80,
       "singleQuote": true,
       "trailingComma": "es5"
     }
   }
   

这样，你就可以使用 ESLint 进行代码规范检查，同时使用 Prettier 进行代码格式化。

配置项

当你在 .eslintrc 中添加 prettier 配置时，可以使用以下配置项：

• prettier/prettier：将 Prettier 的规则应用于 ESLint 中。这可以确保 ESLint 和 Prettier 配置的一致性。

{
  "extends": ["eslint:recommended", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

• prettier/react：为 React 项目添加 Prettier 规则集。

{
  "extends": ["eslint:recommended", "prettier", "plugin:react/recommended"],
  "rules": {
    "prettier/prettier": "error"
  }
}

• prettier/@typescript-eslint：为 TypeScript 项目添加 Prettier 规则集。

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

总结

使用 eslint-config-prettier 可以轻松地集成 ESLint 和 Prettier，从而确保代码规范检查和代码格式化之间没有冲突。这是一种非常有用的工具，可以提高代码质量和开发效率。