Write in front:

  • ESLint: Find and fix problems in your JavaScript code.
  • Prettier: Prettier is an opinionated code formatter.
  • Husky: Husky can prevent bad git commit, git push and more.
  • Lint-passage: Run linters against staged git files and don’t let 💩 slip into your code base!
  • EditorConfig: EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
  • Stylelint: A mighty, modern linter that helps you avoid errors and enforce – conventions in your styles.
  • Developer tools: VS Code, plug-in: Prettier, ESLint
  • Development framework: React V16+, React CLI
  • Version control: Git
  • References:
    • git hooks
    • eslint-plugin-react: React specific linting rules for ESLint
    • Configuring Prettier Options
    • VS Code Docs
    • Line endings: Configure Git to end the line
    • Eslint-plugin-react-hooks: react Hook rules for esLint

Construction project:

npx create-react-app [your-project-name]
cd [your-project-name]
# npm run eject
Copy the code

Initialize the ESLint configuration file:

./node_modules/.bin/eslint --init
Copy the code

Select the configuration you like based on the problem (if you choose wrong, you can change it later in the configuration file). When done, the.eslintrc.js file will be generated in the project root directory.

. Eslintrc. Js:

module.exports = {
  env: {
    browser: true.es6: true.node: true,},extends: 'eslint:recommended'.globals: {
    Atomics: 'readonly'.SharedArrayBuffer: 'readonly'._: true,},parser: 'babel-eslint'.// Resolve the experimental public Class Fields syntax error
  parserOptions: {
    ecmaFeatures: {
      jsx: true,},ecmaVersion: 2018.sourceType: 'module',},plugins: ['react'.'react-hooks'].rules: {
    'react-hooks/rules-of-hooks': 'error'.// Check the Hook rules
    'react-hooks/exhaustive-deps': 'warn'.// Check the dependencies of effect
    indent: [
      'error'.2,
      {
        SwitchCase: 1],},// 'linebreakstyle ': ['error',' Unix '], // Linebreakstyle ': ['error', 'Unix '], // Linebreakstyle' Mac: 'Unix' -> LF, win: 'Windows' -> CRLF
    quotes: ['error'.'single'].semi: ['error'.'always'].'multiline-ternary': ['error'.'always-multiline'].// The ternary operator is newline
    'react/jsx-uses-react': 'error'.// Prevent React to be incorrectly marked as unused
    'react/jsx-uses-vars': 'error'.// Prevent variables used in JSX to be incorrectly marked as unused
    'no-console': 'off',}};Copy the code

Initializing the configuration of Prettier

Create the.prettierrc.js file in the root directory:

module.exports = {
  trailingComma: 'all'.printWidth: 80.tabWidth: 2.semi: true.singleQuote: true.jsxBracketSameLine: true.jsxSingleQuote: true.arrowParens: 'always'};Copy the code

Install Prettier, husky, and Lint-Staged:

npm install --save-dev --save-exact prettier
npm install --save-dev husky
npm install --save-dev lint-staged
Copy the code

Note: Be sure to use –save-dev installed under devDependencies.

Initialize Lint-Passage configuration:

npx mrm lint-staged
Copy the code

When done, the husky and Lint-Passage configurations are generated in package.json (here are the manually modified configurations) :

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "*.{js,jsx,css,less,json,md}": [
      "prettier --write"."git add"]."**/*.less": "stylelint --syntax less"."**/*.{js,jsx}": "npm run lint-staged:js"
  },
Copy the code

Configuration stylelint:

npm install stylelint --save-dev
Copy the code

Create a new.stylelintr.js file in the root directory:

module.exports = {
  extends: 'stylelint-config-standard'.rules: {
    'block-no-empty': true.'comment-empty-line-before': [
      'always',
      {
        ignore: ['stylelint-commands'.'after-comment'],},],indentation: [2].'max-empty-lines': 2,}};Copy the code

The following error may be encountered:

Could not find "stylelint-config-standard". Do you need a `configBasedir`?
Copy the code

Solution:

View: stylelint – config – standard

npm install stylelint-config-standard --save-dev
Copy the code

Configure the script command in package.json:

"scripts": {
    "lint": "npm run lint:js && npm run lint:style && npm run lint:prettier"."lint-staged": "lint-staged"."lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx "."lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style"."lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src"."lint:prettier": "check-prettier lint"."lint:style": "stylelint --fix \"src/**/*.less\" --syntax less"."prettier": "prettier -c --write \"**/*\""
  },
Copy the code

VS Code install Prettier, ESLint (not Google)

Configure the VS Code editor:

While saving the file, the prettier plug-in will automatically format the code:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"."editor.formatOnSave": true
}
Copy the code

Create portable custom editor Settings:

Create a.editorConfig file in the root directory and configure it as follows:

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab
Copy the code

Other configurations:

If you don’t need an end-of-line configuration, comment out end_of_line in.editorConfig and linebreak style under rules in.eslintrc.js, or don’t configure the editorConfig file at all. Use the default configuration.

Create a.gitattributes file in the project root directory and configure it as follows:

* text=auto
Copy the code

‘linebreak-style’: [‘error’, ‘Unix ‘], // linebreak. Mac use ‘Unix’ to correspond to LF, Win use ‘Windows’ to correspond to CRLF

If a ‘line terminator’ configuration is required, for example, use LF. Linebreak-style: [‘error’, ‘Unix ‘] end_of_line = lf,.eslintrc.js

Also configure “files.eol” for VS Code: “\n”, add configuration *.js text eol=lf, *.jsx text eol= LF, etc.

. Gitattributes Configuration reference online. This line terminator is generally not used for configuration.

Reference: line endings

Write at the end:

The above configurations can be found in the top link and can be configured according to your own style.