Erstellen Sie ein Webpack+React+TS-Projekt von 0 bis 1 (6)

Vorwort

Vorheriges Kapitel: Erstellen Sie ein minimalistisches Webpack+React-Projekt von Grund auf neu (5)

Nach einigem Herumwälzen hat der Autor einfach ein Webpack + React + TS-Projekt erstellt; jetzt definieren Sie den Codestil. Schließlich kann Teamarbeit, ein guter Codestil dem Team immer noch helfen, die Effizienz zu verbessern.

eslint installieren

Eslint global installieren

npm i eslint -g
复制代码

Initialisierung der Konfigurationsdatei

eslint --init
复制代码

How would you like to use ESLint?

• Nur um die Syntax zu prüfen
• Um die Syntax zu überprüfen und Probleme zu finden
• To check syntax, find problems, and enforce code style

What type of modules does your project use?

• JavaScript modules (import/export)
• CommonJS (erfordern/exportiert)
• Keiner von diesen

Which framework does your project use?

• React
• Vue.js
• Keiner von diesen

Does your project use TypeScript?

• Yes
• Nein

Where does your code run?

• Browser
• Node

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

• Use a popular style guide
• Beantworten Sie Fragen zu Ihrem Stil

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

Warten auf die Installation von eslint

Would you like to install them now with npm?

• Yes
• Nein

Lange warten, wenn ich den Satz sehe, eslint installation is complete

Successfully created .eslintrc.js file in

Standard-Eslint-Konfiguration

Nach der Installation des eslint-Stammverzeichnisses wird die Datei .eslintrc.js generiert

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

Verwenden Sie @types/react @types/react-dom

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

Code automatisch formatieren

Neue .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

• Schöner - Code-Formatierer
• ESLint

Diese beiden Plugins für vscode helfen beim Formatieren von Code während der Codebearbeitung