Build a webpack+React+TS project from 0 to 1 (6)

foreword

Previous chapter: Build a minimalist webpack+React project from scratch (5)

After some tossing, the author has simply built a webpack + react + TS project; now define the code style. After all, team work, a good code style can still help the team to improve efficiency.

install eslint

Install eslint globally

npm i eslint -g
复制代码

Configuration file initialization

eslint --init
复制代码

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

Waiting for eslint to install

Would you like to install them now with npm?

• Yes
• No

Long wait, when I see the sentence eslint installation is complete

Successfully created .eslintrc.js file in

Default eslint configuration

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

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['plugin:react/recommended', 'airbnb'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
      // 这里写一些eslint规则
  },
};
复制代码

安装 @types/react @types/react-dom

npm i @types/react @types/react-dom -D
复制代码

Automatically format 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"
  }
}

复制代码

vscode editor plugin

• Prettier - Code formatter
• ESLint

These two plugins for vscode help format code during code editing