Recently, I took over a project whose format was in disorder. Because it was to be developed by several people, I wanted to configure the verification rules and automatic formatting.

preface

  • Projects are created using create-react-app.
  • Validation uses ESLint, with React-app and Airbnb and Prettier
  • Prettier is used for formatting
  • The development environment is VSCode

Install the VSCode plugins: ESLint and Prettier

The plugin is used to aid the developer tool VSCode, which would otherwise have to run ESLint for validation and Prettier for formatting.

ESLint plug-inYou can have VSCode show your errors according to the rules.

Prettier plug-inYou can have VSCode format code like Prettier.

Manual formatting or automatic formatting is required. If multiple formatting plug-ins exist, configure the default formatting plug-in

Install dependencies

eslint

ESLint is already installed in the create-react-app project and does not need to be installed again

eslint-config-react-app

Same as above

eslint-config-airbnb

yarn add --dev eslint-config-airbnb
Copy the code

eslint-config-prettier

yarn add --dev eslint-config-prettier
Copy the code

eslint-plugin-prettier

yarn add --dev eslint-plugin-prettier
Copy the code

prettier

yarn add prettier --dev --exact
Copy the code

ESLint validates configurations

Create the.eslintrc.js file under the project

module.exports = {
  extends: [
    'react-app'// React helps configure some syntax, such as the arrow function'airbnb'.'plugin:prettier/recommended', // prettier configuration], rules: {'react/jsx-filename-extension': 'off', // Turn off airbnb Settings for JSX that must be written in the JSX file'react/prop-types': 'off'// Turn off airbnb validation for prop-types that must be added'react/destructuring-assignment': [
      true.'always',
      {
        ignoreClassFields: false],},'react/jsx-one-expression-per-line': 'off'// Turning off the requirement that an expression must wrap conflicts with Prettier'react/jsx-wrap-multilines': {
      "prop": "ignore"Prettier: "JSX must be parentheses"},'comma-dangle': [
      'error',
      {
        arrays: 'always-multiline',
        objects: 'always-multiline',
        imports: 'always-multiline',
        exports: 'always-multiline'.functions: 'only-multiline'},], // Turn off Airbnb's restriction on function call arguments, not one line, also comma at the end},],'jsx-a11y/no-static-element-interactions': 'off'// Turn off role for non-interactive elements plus events'jsx-a11y/click-events-have-key-events': 'off'// Closing the click event requires a corresponding keyboard event'no-bitwise': 'off'}, overrides: [{files: ['**/Mi/*.js'.'**/Mi/*.jsx'],
      rules: {
        'react/prop-types': 'error'Prop-types},},],};Copy the code

Prettier Formats the configuration

The.prettierrc.json file is created under the project. The file does two important things:

  1. Eslint validates rules that esLint references during validation
  2. It’s also a formatting rule that you refer to when you format files

Note: changes to this file often don’t take effect immediately, and restarting VSCode will

{
  "trailingComma": "es5"."singleQuote": true
}

Copy the code

For example, Prettier formatting, which by default does not have a trailingComma, but airbnb reports it as comma trailingComma es5, which means adding a comma when the es5 environment allows it.

Installation and Configuration End

Happy coding… However, we can continue to expand, such as configuring automatic formatting when saving, configuring automatic formatting when submitting Git, configuring automatic verification when submitting Git, etc.

The attached

The ESLint configuration item extends extends understanding

Eslint provides hundreds of? Thousand? “Rules”, but they are usually turned off by default. This is also the philosophy of esLint writers: I give you rules, but I don’t say whether it’s good or not, you make them up. So extends is a rule that each person makes, and the latter overwrites the former.

"extends": [
    "react-app"// React helps configure some syntax, such as the arrow function"airbnb"."plugin:prettier/recommended"// prettier configuration]Copy the code

For example, if I used prettier > Airbnb > react-app, the rule after extends would override the first if there was the same configuration for prettier > Airbnb > react-app.

  • The react – app rules
  • Someone whose rules
  • The AirbN-base rule will be referenced by the Airbnb rule
  • Prettier rules

Prettier thoughts

Prettier is a formatting rule that gives you a handful of configurable items, just use them. Anyway, the goal is to unify the team style. I don’t care if it’s good or not. It’s a subjective question. If you provide too many, it becomes a debate about how Prettier is a good configuration. Enter another dispute.

The plugin: prettier/it is actually a shorthand

The official documentation means that this configuration is equivalent to simultaneous configuration

"extends": ["prettier"]
Copy the code

and

"plugins": ["prettier"]."rules": {
    "prettier/prettier": "error"
}
Copy the code

About rule priority

Official documents have detailed explanation, here are two points:

  1. The configuration file overrides the configuration in package.json
  2. By default, the root configuration file will not be searched up until the global configuration file is configured. If you do not want to conflict between the project and the individual, you can configure it (for example, the unified project indent is 2 Spaces, the individual is 4 Spaces).