【ESLint 篇】最全的互联网大厂的 .prettierrc跟 .eslintrc 文件的配置提供给大家参考

以下是一个互联网大厂常用的 .prettierrc 和 .eslintrc 文件的配置示例，这些配置结合了代码格式化（Prettier）和代码质量检查（ESLint）的最佳实践。你可以根据具体项目的需求进行调整。

.prettierrc 配置示例

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

• printWidth: 代码行的最大宽度（100）。
• tabWidth: 每个缩进级别使用的空格数量（2）。
• useTabs: 使用空格进行缩进。
• semi: 在每个语句的末尾添加分号。
• singleQuote: 使用单引号代替双引号。
• trailingComma: 在所有可能的地方添加尾随逗号。
• bracketSpacing: 在对象字面量中的括号之间加空格。
• jsxBracketSameLine: 在多行 JSX 元素的最后一行的末尾放置 >。
• arrowParens: 在箭头函数的参数中总是使用括号。
• endOfLine: 使用 LF 作为换行符。

.eslintrc 配置示例

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": ["error"],
    "react/prop-types": "off",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
    "no-console": "warn",
    "no-debugger": "warn",
    "no-var": "error",
    "prefer-const": "error",
    "eqeqeq": ["error", "always"]
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

• env: 指定代码运行的环境，如浏览器、ES2021 和 Node.js。
• extends: 扩展的规则集合，包括 ESLint 推荐规则、React 推荐规则、TypeScript 推荐规则和 Prettier 推荐规则。
• parser: 使用 @typescript-eslint/parser 解析 TypeScript 代码。
• parserOptions: 解析选项，包括支持 JSX 和 ES2021 语法。
• plugins: 使用的插件列表，包括 React、TypeScript 和 Prettier。
• rules: 自定义的 ESLint 规则。
  • prettier/prettier: 将 Prettier 的规则作为 ESLint 错误处理。
  • react/prop-types: 关闭 React PropTypes 检查（因为 TypeScript 通常已经提供类型检查）。
  • @typescript-eslint/no-unused-vars: 错误的未使用变量规则，忽略以 _ 开头的参数。
  • no-console: 警告使用 console。
  • no-debugger: 警告使用 debugger。
  • no-var: 错误的 var 使用。
  • prefer-const: 错误的 let 替换为 const。
  • eqeqeq: 强制使用严格相等（===）。
• settings: 配置 React 版本自动检测。

这些配置示例提供了一个良好的起点，适用于大多数现代 JavaScript/TypeScript 项目。如果你的项目有特定需求，可以根据实际情况进行调整。