React+Ts配置Eslint+Prettier代码检测与格式化

为了在React项目中使用TypeScript并配置Eslint和Prettier，你需要按照以下步骤操作：

1. 安装必要的包：

npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-node
npm install --save-dev prettier

2. 创建.eslintrc.js或.eslintrc.json配置文件，并添加以下内容：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'plugin:react/recommended',
    'airbnb',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    // 在这里添加或覆盖规则
  },
};

3. 创建.prettierrc配置文件，并添加以下内容：

{
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "useTabs": false,
  "endOfLine": "auto"
}

4. 在package.json中添加lint和format脚本：

{
  "scripts": {
    "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
  }
}

5. 运行lint和format命令：

npm run lint
npm run format

这样就配置了Eslint和Prettier，它们会在特定的文件扩展名上检测代码质量并格式化代码。在VSCode或其他编辑器中，你可以安装相应插件来自动运行这些命令。