vscode react ESLint Prettier 接入

初始化 npx create-react-app . --typescript

1. 初始化配置

npm run eject

2. 安装依赖

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

3. Eslint 配置

AppRoot 表示根目录
// {AppRoot}/.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: ['prettier/@typescript-eslint', 'plugin:prettier/recommended'], //使用推荐的React代码检测规范
  plugins: ['@typescript-eslint'],
  env: {
    browser: true,
    node: true,
  },
  settings: {
    //自动发现React的版本，从而进行规范react代码
    react: {
      pragma: 'React',
      version: 'detect',
    },
  },
  parserOptions: {
    //指定ESLint可以解析JSX语法
    ecmaVersion: 2019,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  rules: {},
}

{AppRoot}/.eslintignore

/lambda/
/scripts
/config
.history

4. Prettier 配置

// {AppRoot}/.prettierrc.js

module.exports = {
    printWidth: 120, // 每行代码不超过120个字符长度
    semi: true, // 在语句末尾打印分号。
    singleQuote: true, // 单引号
    trailingComma: 'none', // 尾随逗号
    bracketSpacing: true, // 在对象的括号之间需要括号分割
    jsxBracketSameLine: false, // 将>多行JSX元素的放在最后一行的末尾，而不是一个>放在下一行
    arrowParens: 'avoid', // 箭头函数参数周围是否需要使用括号包裹，avoid 尽可能不用括号包裹
    tabWidth: 4, // 指定每个缩进级别的空格数。
    useTabs: false, // 使用制表符而不是空格缩进行
    endOfLine: 'auto' // 解决跨平台下代码行结束不一致的问题
};

// {AppRoot}/.prettierignore

**/*.svg
package.json
.umi
.umi-production
/dist
.dockerignore
.DS_Store
.eslintignore
*.png
*.toml
docker
.editorconfig
Dockerfile*
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
.history
CNAME
/build
serviceWorker.*

5. Webpack 配置修改[如需要修改Prettier或者eslint配置时需要设置这个，如不需要修改规则则可以跳过这步]

{AppRoot}/webpack.config.js

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  enforce: 'pre',
  use: [
    {
      options: {
        cache: false, // 这里改为false ，经常会因为eslint的缓存导致你修改了代码也没有及时更新检测的问题
        formatter: require.resolve('react-dev-utils/eslintFormatter'),
        eslintPath: require.resolve('eslint'),
        resolvePluginsRelativeTo: __dirname,
      },
      loader: require.resolve('eslint-loader'),
    },
  ],
  include: paths.appSrc,
}

6. 提交时的校验git hook

1. 安装依赖

npm i lint-staged husky -D

2. 修改 package.json

{AppRoot}/package.json
{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/*.{js,jsx,mjs,ts,tsx}": [
      "node_modules/.bin/prettier --write",
      "node_modules/.bin/eslint --fix",
      "git add"
    ],
    "src/*.{css,scss,less,json,html,md,markdown}": [
      "node_modules/.bin/prettier --write",
      "git add"
    ]
  }
  ...
}

3. 测试 commit 命令

git add .
git commit -m 'test commit'

7. IDE 配置[可选]

7.1 VSCode 配置
7.1.1 安装 ESLint
检查代码错误
7.1.2 安装 prettier
用来格式化代码
安装成功后，可以设置项目 vscode 配置来实现保存代码自动格式化
{AppRoot}/.vscode/settings.json

{
  "editor.formatOnSave": true // 开启保存格式化
}