background

In a collaboration project, different developers write code style is different, such as whether to need to add a semicolon at the end of the line, line feeds, Spaces, tighten, scattered in the project of the console processing method, maximum length code line, etc., if there is no unified standard in the project will result in code style is multifarious, does not favor the code to read and maintain.

The target

In order to have a uniform coding specification in the project, we used ESLint + Prettier for the constraint.

1, Use ESLint + prettier to add a common code specification

2. Format the files that do not meet the specification under the existing project

3, configure the editor, automatically detect the new or modified code specification legitimacy

1. Install eslint

npm i -D eslint babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
Copy the code

Eslint-plugin-a11y eslint-plugin-a11y eslint-plugin-a11y eslint-plugin-a11y eslint-plugin-a11y eslint-plugin-a11y Eslint-plugin-a11y

Add.eslintrc.js configuration

// .eslintrc.js
module.exports = {
    // root: true, // Root configuration file
    extends: [
        // 'Airbnb ', // inherit the Airbnb specification
        'prettier'./ / prettier configuration].parser: 'babel-eslint'.// A parser is needed to turn the source code into an abstract syntax tree
    // Specify parser options
    parserOptions: {
        sourceType: 'module'.ecmaversion: 2015,},// Specify the runtime environment for the script
    env: {
        browser: true,},plugins: ['prettier' 'react-hooks'].rules: {
        'prettier/prettier': 'error'.'no-console': 'off'.'no-undef': 'off'.'no-debugger': 'off'.'import/no-extraneous-dependencies': 'off'.'no-param-reassign': 'off'.'no-plusplus': 'off'.'no-unused-vars': 'off'.'no-unused-expressions': 'off'.'max-classes-per-file': 'off'.'operator-assignment': 'off'."react-hooks/rules-of-hooks": "error".// Check the Hook rules
        "react-hooks/exhaustive-deps": "error" // Check for effect dependencies}};Copy the code

2. Install the prettier

Installing the prettier plug-in:

npm i -D prettier eslint-plugin-prettier eslint-config-prettier
Copy the code

Add the. Prettierrc.js configuration

// .prettierrc.js
module.exports = {
  // A line of up to 100 characters
  printWidth: 100.// Use 4 Spaces for indentation
  tabWidth: 4.// Instead of indentation, use Spaces
  useTabs: false.// A semicolon is required at the end of the line
  semi: true.// Use single quotes
  singleQuote: true.// The key of the object is quoted only when necessary
  quoteProps: 'as-needed'.JSX uses double quotes instead of single quotes
  jsxSingleQuote: false.// Do not need a comma at the end
  trailingComma: 'es5'.// Spaces are required at the beginning and end of braces
  bracketSpacing: true.// JSX tag Angle brackets require line breaks
  jsxBracketSameLine: false.// Arrow functions with only one argument also need parentheses
  arrowParens: 'always'.// The range in which each file is formatted is the entire content of the file
  rangeStart: 0.rangeEnd: Infinity.// There is no need to write @prettier at the beginning of the file
  requirePragma: false.// There is no need to automatically insert @prettier at the beginning of a file
  insertPragma: false.// Use the default line folding standard
  proseWrap: 'preserve'.// Depending on the display style, HTML should be folded or not
  htmlWhitespaceSensitivity: 'css'.// Use lf for line breaks
  endOfLine: 'auto'};Copy the code

3. The configuration vscode

. Vscode/Settings. Json file

{
    "window.zoomLevel": 2."editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": [
        "javascript"."javascriptreact"."vue"."map"]."liveServer.settings.port": 5501
}

Copy the code