preface

React webPack +React

The author has simply built a webpack + React + TS project. Now define the code style. After all, a good code style can help a team be more efficient.

Install eslint

Install ESLint globally

npm i eslint -g
Copy the code

The configuration file is initialized

eslint --init
Copy the code

How would you like to use ESLint?

  • To check syntax only
  • To check syntax and find problems
  • To check syntax, find problems, and enforce code style

What type of modules does your project use?

  • JavaScript modules (import/export)
  • CommonJS (require/exports)
  • None of these

Which framework does your project use?

  • React
  • Vue.js
  • None of these

Does your project use TypeScript?

  • Yes
  • No

Where does your code run?

  • Browser
  • Node

How would you like to define a style for your project?

  • Use a popular style guide
  • Answer questions about your style

Which style guide do you want to follow?

  • Airbnb: https://github.com/airbnb/javascript
  • Standard: github.com/standard/st…
  • Google: github.com/google/esli…
  • XO: github.com/xojs/eslint…

What format do you want your config file to be in?

  • JavaScript
  • YAML
  • JSON

Wait for ESLint to install

Would you like to install them now with npm?

  • Yes
  • No

Long wait when seeing this sentence ESLint install complete

Successfully created .eslintrc.js file in

Default ESLint configuration

After installing esLint, the.eslintrc.js file will be generated in the root directory

module.exports = {
  env: {
    browser: true.es2021: true,},extends: ['plugin:react/recommended'.'airbnb'].parserOptions: {
    ecmaFeatures: {
      jsx: true,},ecmaVersion: 'latest'.sourceType: 'module',},plugins: ['react'].rules: {
      // Write some ESLint rules here}};Copy the code

Install @ types/react @ types/react – dom

npm i @types/react @types/react-dom -D
Copy the code

Automatic formatting code

New. Vscode/Settings. Json

{
  "prettier.semi": true."prettier.singleQuote": true."editor.defaultFormatter": "esbenp.prettier-vscode"."editor.formatOnSave": true."[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"}}Copy the code

Vscode editor plug-in

  • Prettier – Code formatter
  • ESLint

Vscode these two plug-ins help in formatting code during the code editing process