Eslint + prettier when we need to stick to the same code style for multiplayer development, esLint + prettier usually does

Eslint mainly inspects JS code while Prettier formats code

webpack

In Webpack, in order to keep the style consistent, we can generally check the code at compile time, and if there is a style problem, it will prompt an error

Depend on the installation
npm i eslint babel-eslint eslint-webpack-plugin eslint-plugin-import eslint-plugin-jsx-a11y eslint-import-resolver-webpack eslint-config-prettier eslint-plugin-prettier eslint-plugin-react -D
Copy the code

New. Eslintrc. Js

Module. exports = {env: {browser: true, es2021: true, // compatible with import export etc. Es6 syntax node: True // requires compatibility with require syntax}, extends: [ 'eslint:recommended', 'plugin:react/recommended', 'plugin:prettier/recommended' ], parserOptions: { ecmaFeatures: { jsx: true }, ecmaVersion: 13, sourceType: 'module' }, plugins: ['react', 'prettier'], rules: { 'prettier/prettier': 'error' // endOfLine: 'CRLF' } }Copy the code

New. Prettierrc. Js

Module.exports = {// a line of up to 80 characters printWidth: 80, // uses 2 Spaces to indent tabWidth: 2, // does not use indentation, uses the space useTabs: False, // A semicolon at the end of a line is required, // singleQuote: true, // The key of the object is quoted only when necessary: 'as-needed', // JSX uses double quotes instead of single quotes, // trailingComma: 'None ', // braces need spacing at the beginning and end of bracketSpacing: true, // JSX tag Angle brackets need newline jsxBracketSameLine: False, // arrowParens: 'always', // Each file is formatted to the full contents of the file rangeStart: 0, rangeEnd: // @prettier requirePragma: false does not automatically insert @prettier insertPragma: False, / / use the default fold line standard proseWrap: 'preserve, / / according to display style decided to don't fold line htmlWhitespaceSensitivity HTML:' CSS 'endOfLine: 'auto', eslintIntegration: true // EsLint is used for verification to prevent ESLint from colliding with Prettier};Copy the code

New. Prettierignore

Mainly exclude some files that do not require code format detection

node_modules/*
dist/*
Copy the code

vscode

While we are configuring code reviews in WebPack, we also need code reviews in normal development, which is a good place to start with the editor plug-in

  • ESLint
  • Prettier – Code formatter

They recognize the.eslintrc.js.prettierrc.js configuration in the project, but we also need to do some separate configuration

In vscode settings.json

"RequireConfig ": true, "eslint.run": "onType", // If there is an error "editor.codeActionsOnSave": {" source.fixall.eslint ": true // Automatically formatted when saved},Copy the code