eslint v9 如何搭配 prettier 配置react、typescript项目

ESLint 和 Prettier 都是非常流行的 JavaScript 代码风格检查工具。在 React 和 TypeScript 项目的配置中，它们可以协同工作以确保代码一致性。

首先，安装最新版本的 ESLint (v9) 和 Prettier：

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-react eslint-plugin-import --save-dev

接下来，创建或更新 `.eslintrc.js` 文件，配置 ESLint 以支持 TypeScript，并启用 Prettier:

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react'],
  extends: [
    'prettier', // 引入 Prettier 的配置
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended'
  ],
  rules: {
    // 根据需要自定义规则
    'import/prefer-default-export': 'off', // 如果不需要默认导出规则
    'no-unused-vars': ['error', { args: 'none' }] // 抑制未使用的变量错误
  },
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: 'module',
    ecmaFeatures: { jsx: true }
  },
  settings: {
    react: {
     pragma: 'React.createElement'
    }
  }
};

Prettier 的配置通常会放在 `prettier.config.js` 中，如果你还没有这个文件，可以创建一个并设置基础的风格：

module.exports = {
  printWidth: 80,
  semi: true, // 使用分号
  singleQuote: true, // 使用单引号代替双引号
  trailingComma: 'all',
  bracketSpacing: true,
  arrowParens: 'always',
  proseWrap: 'never',
  endOfLine: 'lf', // 使用LF换行符
  parser: 'babel-eslint' // 需要配合 @typescript-eslint/parser 使用，告诉 Prettier 解析器为 ESLint 扩展
};

现在，当你运行 `eslint .` 或者 `npx eslint --ext .ts,.tsx .`，ESLint 将会结合 Prettier 的规则检查并格式化你的代码。如果发现不符合规范的地方，可以使用 `npx prettier --write` 自动格式化。