最全互联网大厂的 prettier跟 eslint文件的配置，文件后缀为.cjs

下面是一份互联网大厂常用的 Prettier 和 ESLint 的配置示例，文件后缀为 .cjs。这些配置文件使用 CommonJS 模块系统，适用于 Node.js 环境中的项目。

.prettierrc.cjs 配置示例

module.exports = {
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'always',
  endOfLine: 'lf',
};

.eslintrc.cjs 配置示例

module.exports = {
  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',
    },
  },
};

解释

.prettierrc.cjs

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

.eslintrc.cjs

• 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 项目。如果你的项目有特定需求，可以根据实际情况进行调整。