Cree un proyecto webpack+React+TS de 0 a 1 (6)

prefacio

Capítulo anterior: Cree un proyecto webpack+React minimalista desde cero (5)

Después de algunos lanzamientos, el autor simplemente ha creado un proyecto webpack + reaccionar + TS; ahora defina el estilo del código. Después de todo, el trabajo en equipo, un buen estilo de código aún puede ayudar al equipo a mejorar la eficiencia.

instalar eslint

Instalar eslint globalmente

npm i eslint -g
复制代码

Inicialización del archivo de configuración

eslint --init
复制代码

How would you like to use ESLint?

• Para comprobar la sintaxis solamente
• Para comprobar la sintaxis y encontrar problemas
• To check syntax, find problems, and enforce code style

What type of modules does your project use?

• JavaScript modules (import/export)
• CommonJS (requerir/exportaciones)
• Ninguno de esos

Which framework does your project use?

• React
• Vue.js
• Ninguno de esos

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
• Responde preguntas sobre tu estilo.

Which style guide do you want to follow?

• Airbnb: https://github.com/airbnb/javascript
• Estándar: 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

Esperando a que se instale eslint

Would you like to install them now with npm?

• Yes
• No

Larga espera, cuando veo la oración, la instalación de eslint está completa

Successfully created .eslintrc.js file in

Configuración predeterminada de eslint

Después de instalar el directorio raíz de eslint, se generará el archivo .eslintrc.js

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
复制代码

Formatear código automáticamente

Nuevo .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"
  }
}

复制代码

Complemento del editor vscode

• Prettier - Formateador de código
• ESLint

Estos dos complementos para vscode ayudan a formatear el código durante la edición del código