第二章 React项目配置ESlint和Prettier实现自动格式化代码以及统一代码风格

// .eslintrc.js
module.exports = {
  extends: [
    'react-app',
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  settings: {
    react: {
      version: 'detect',
    },
  },
  rules: {
    // 在这里添加或覆盖 ESLint 规则
  },
};
 
// .prettierrc.js
module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  printWidth: 80,
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: 'avoid',
  endOfLine: 'auto',
};

这段代码演示了如何配置 .eslintrc.js 和 .prettierrc.js 文件，以确保代码遵循 React 项目中的 ESLint 和 Prettier 规则。其中 extends 字段指定了 ESLint 和 Prettier 的配置集，rules 字段允许你覆盖或添加特定的 ESLint 规则。.prettierrc.js 文件中定义了 Prettier 的格式化规则。