react配置eslint、prettier和commitlint规范工程

1. 配置prettier:

(1). install Prettier locally:

yarn add --dev --exact prettier

Then, create an empty config file to let editors and other tooling know you are using Prettier:

echo {}> .prettierrc.json

Next, create a .prettierignore file to let the Prettier CLI and editors know which files to not format. Here’s an example:

# Ignore artifacts:
build
coverage

Now, format all files with Prettier:

// 本地运行
yarn prettier --write .

(2). Pre-commit Hook:

You can use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via git add before you commit.

Make sure Prettier is installed and is in your devDependencies before you proceed.

npx mrm lint-staged

报错:

Preset "default" not found.
We’ve tried to load "mrm-preset-default" and "default" npm packages.

The problem is within mrm which is currently in version 3 that seems to be incompatible with lint-staged, to fix this you got to specify mrm version 2 by running npx mrm@2 lint-staged
问题在于mrm当前版本3似乎与lint-staged不兼容,要解决此问题,您必须通过运行指定mrm版本2 npx mrm@2 lint-staged

npx mrm@2 lint-staged

This will install husky and lint-staged, then add a configuration to the project’s package.json that will automatically format supported files in a pre-commit hook.

// 这块如果是mrm@2安装的,需要手加
"husky": {
  "hooks": {
    "pre-commint": "lint-staged"
  }
},
"lint-staged": {
  "*.{js,css,md,ts,tsx}": "prettier --write"  // add to ts、tsx
}

(3). ESLint (and other linters):

防止与eslint本身的冲突

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. There’s a similar config for Stylelint: stylelint-config-prettier

yarn add eslint-config-prettier -D

"eslintConfig": {
  "extends": [
    "react-app",
    "react-app/jest",
    "prettier" // 使用prettier规则覆盖原来的规则,保证不冲突.
  ]
}

2. commit lint:

# Install commitlint cli and conventional config:
// 表示安装@commitlint/config-conventional、@commitlint/cli两个包
yarn add @commitlint/{config-conventional,cli} -D

# Configure commitlint to use conventional config:
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

# Add in package.json:
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

# For example:
"husky": {
  "hooks": {
    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
  }
}