Estilo de código y configuración desarrollados por el equipo de ESLint

Language 2023-05-08 01:29:50 views: null

Estilo de codificación para el desarrollo del equipo.

En un equipo que desarrolla el mismo proyecto, el estilo de código de cada miembro debe ser coherente.

Por ejemplo:

① Las cadenas en JS están representadas por comillas simples uniformemente

② Codificar sangría, usar dos espacios uniformemente

③ No se permiten >2 líneas en blanco consecutivas

④ Al final de la declaración, se debe agregar un punto y coma

⑤ ......

Tenga en cuenta que las reglas anteriores no son fijas. Solo para ilustrar, por ejemplo, el proyecto de mi empresa requiere un punto y coma al final de la declaración, lo cual también es posible.

Simplemente significa que el estilo de código de un equipo debe estar unificado.

Cómo garantizar un estilo de código uniforme

Utilice la herramienta de inspección de código ESLint.

Después de usar ESlint, los programadores se ven obligados a usar el estilo de código prescrito para el desarrollo.

Si se violan las reglas, el código informará un error.

¿Qué es ESLint?

Concepto oficial: ESLint es una herramienta de linting JavaScript y JSX componible.

Comprensión popular: una herramienta para restringir el estilo de codificación de los miembros del equipo.

Sitio web oficial: ESLint - Herramienta de inspección de código JavaScript conectable - Documentación en chino de ESLint ESLint es una regla de sintaxis de JavaScript conectable y configurable y una herramienta de inspección de estilo de código. ESLint puede ayudarlo a escribir fácilmente código JavaScript de alta calidad https://eslint.bootcss.com/

¿Cuáles son los beneficios de ESLint?

Asegúrese de que el estilo del código escrito sea coherente cuando el equipo colabore en el desarrollo.

Cómo usar ESLint para verificar el estilo del código en el proyecto

Después de instalar el proyecto a través de la herramienta de scaffolding @vue/cli, eslint se instaló y configuró de manera predeterminada.

Usaremos las reglas predeterminadas estipuladas por el complemento eslint de Vue para la inspección del código. Tenga en cuenta que no son las reglas predeterminadas oficiales de eslint.

Si necesita modificar las reglas, puede consultar el sitio web oficial .

Demuestra cómo configurar ESlint

Las dos configuraciones que se muestran a continuación deben configurarse . Está relacionado con la configuración posterior de vscode.

Con respecto a la configuración de ESLint, debe colocarse en el archivo de configuración.

Con respecto al archivo de configuración de ESLint, el oficial tiene instrucciones detalladas, por supuesto muy detalladas (Luo Suo)

Para un proyecto, elementos de configuración de ESLint:

  • Póngalo .eslintrc.jsen ; si usa @vue/[email protected] para crear un proyecto como este
  • Póngalo en el nodo package.jsonen eslintConfig; si usa @vue/cli5.0.x para crear un proyecto como este

Independientemente del archivo anterior, encontramos rulesel nodo , este rulesnodo es para configurar las reglas de ESLint

Por ejemplo, si configuramos el final de cada declaración sin agregar un punto y coma, debemos agregar las siguientes reglas rulesal nodo :

"rules": {
  "semi": ["error", "never"]
}

El archivo de configuración se ha modificado y el proyecto debe reiniciarse (la ventana de la terminal debe reiniciarse con npm run serve)

Por ejemplo, para configurar si agregar un espacio entre "nombre de la función" y "paréntesis", debe agregar ruleslas siguientes reglas al nodo:

"rules": {
  "space-before-function-paren": [
    "error",
    {
      "anonymous": "always",
      "named": "never",
      "asyncArrow": "always"
    }
  ]
}

El archivo de configuración se ha modificado y el proyecto debe reiniciarse (la ventana de la terminal debe reiniciarse con npm run serve)

Explicación de las reglas anteriores:

"anonymous": "always"     匿名函数小括号前，需要空格。比如 setTimeout(function () {})
"named": "never"          有名字的方法，不需要空格。比如 abc() {}
"asyncArrow": "always"    箭头函数，需要空格。比如 aaaa(async data => {})

prueba

Ábralo src/App.vue, en el código JS, agregue un punto y coma al final de cualquier declaración e intente ver si hay un mensaje de error en la terminal o el navegador.

import HelloWorld from './components/HelloWorld.vue'
let a = 2
console.log(a); // 这里加了一个分号

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    add() {}
  }
}

 Elimina el punto y coma del código y vuelve a intentarlo.

De esta manera, al escribir código en el futuro, todos deben usar un estilo de código consistente.

configuración del complemento vscode

Complementos que deben instalarse y desinstalarse
1. Complementos que deben desinstalarse
        ○ Formateador JS-CSS-HTML
        ○ Embellecer
        ○ Hay otros complementos para formatear el código

desinstalado para evitar conflictos

2. Complementos que deben instalarse

Resumen de instalación del complemento

  • Si comprende lo que hace su complemento, simplemente puede instalar el complemento anterior
  • Si no entiende para qué sirven sus complementos, desinstale todos los complementos e instale los complementos que se muestran en la figura a continuación.

¿Por qué necesita instalar el complemento ESLint?

Proyectos anteriores han usado ESLint para verificar nuestro código.

Sin embargo, al escribir código, es inevitable crear códigos "incorrectos". No es realmente un código incorrecto, pero no cumple con los requisitos del proyecto.

Este tipo de "escritura incorrecta", vscode no lo solicitó.

Después de instalar el complemento ESlint de vscode, cuando "escribimos un código incorrecto", vscode nos dará un aviso.

Después de instalar el complemento, debe configurarse. Para la configuración, consulte la configuración posterior del complemento vscode para obtener más detalles.

¿Por qué necesita el complemento de código formateado Prettier?

Formatear el código es convertir automáticamente el código mal formateado a un formato que cumpla con los requisitos.

El complemento Prettier se puede combinar con ESLint.

En otras palabras, el código formateado con Prettier solo cumple con los requisitos de ESlint.

Después de instalar el complemento, debe configurarse. Para la configuración, consulte la configuración posterior del complemento vscode para obtener más detalles.

Configurar complementos ESlint y Prettier

Tenga en cuenta que configurar ESlint aquí se refiere a un complemento llamado ESlint que configura vscode.

Abra la configuración de vscode (tecla de acceso directo Ctrl + ,) para abrir la interfaz de configuración de vscode.

Haga clic en el icono "Abrir configuración (json)" en la esquina superior derecha de la interfaz de configuración:

Después de abrir, verá el código con la siguiente estructura:

Tenga en cuenta que la estructura es la misma, porque la configuración de vscode de todos tiene sus propias ventajas, por lo que el código no es necesariamente el mismo.

{
    // =====================================================
    // 一会将代码复制到这里
    // =====================================================
    "workbench.iconTheme": "helium-icon-theme",
    "workbench.colorTheme": "laotang dark",
    "files.autoSave": "onFocusChange",
    "editor.fontFamily": "Menlo, 'Fira Code', 'FuraMono NF', Monaco, monospace, 'Courier New'",
    "editor.formatOnPaste": true,
    "editor.minimap.enabled": false,
    "[markdown]": {
        "editor.quickSuggestions": true
    }
}

Copie el código de configuración a continuación en la ubicación especificada anteriormente .

// prettier 的配置文件存放路径
"prettier.configPath": "C:\\Users\\xiafan\\.prettierrc",
// ---------------------------------------
// 路径提示
"path-intellisense.mappings": {
  "@": "${workspaceRoot}/src"
},
// ---------------------------------------
// 开启编辑器的保存自动格式化功能
"editor.formatOnSave": true,
// ESLint 插件的配置
"editor.codeActionsOnSave": {
  "source.fixAll": true
},
"eslint.alwaysShowStatus": true,
// ---------------------------------------
// 每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 100,
// 使用单引号替换双引号
"prettier.singleQuote": true,
"prettier.arrowParens": "avoid",
"prettier.trailingComma": "none",
"prettier.semi": false,
// ---------------------------------------
// 设置 .vue 文件中，HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 忽略警告信息
"vetur.ignoreProjectWarning": true,
// 防止自动导入
"vetur.completion.autoImport": false,
// 不验证 .vue 组件的模板结构
"vetur.validation.template": false,
// vetur 默认的格式化配置项
"vetur.format.defaultFormatterOptions": {
  "prettier": {
    "trailingComma": "none",
    "semi": false,
    "singleQuote": true,
    "arrowParens": "avoid",
    "printWidth": 100
  },
  "js-beautify-html": {
    "wrap_attributes": false
  }
},
// ---------------------------------------
"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
  "editor.defaultFormatter": "vscode.html-language-features"
},
"[css]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.tabSize": 2,

Después de la copia, si hay elementos de configuración duplicados, conservar los elementos de configuración originales o eliminarlos depende de la configuración específica.

Configurar más bonito

descargar archivo de configuración

Descarga los siguientes archivos:

Enlace de disco de red de Baidu: https://pan.baidu.com/s/1evelaVPEu0QWA9Rf1G_g-w 
Código de extracción: lusj

Después de la descompresión, obtenga .prettierrc.

poner en la ubicación especificada

  • Para el sistema Windows, coloque .prettierrcel archivo en C:/Users/你的用户名la carpeta (Usuarios es el usuario).
  • En el sistema Mac, .prettierrcel archivo es un archivo oculto, debe presionar Command + Shift + .Mostrar archivos ocultos, luego abrir el Finder, hacer clic en Ir en la barra de menú superior , abrir la carpeta personal (dibuje un ícono de casa pequeño) y .prettierrccopiarlo en el carpeta personal

Modificar la configuración de vscode

Modifique el archivo de configuración de vscode y modifique la ruta de la primera configuración en la configuración

  • El sistema de Windows se modifica para"prettier.configPath": "C:\\Users\\LaoTang\\.prettierrc"
  • El sistema Mac se modifica para"prettier.configPath": "~/.prettierrc"

Los ejemplos son los siguientes:

Configurar el formateador predeterminado

Configure el formateador predeterminado para archivos JS y archivos VUE

Abra cualquier archivo JS, botón derecho del mouse, seleccione "Formatear con ...", en el menú que aparece, seleccione "Configurar formateador predeterminado", seleccione "Prettier - Formateador de código"

Abra cualquier archivo VUE, botón derecho del mouse, seleccione "Formatear con ...", en el menú que aparece, seleccione "Configurar formateador predeterminado", seleccione "Prettier - Formateador de código"

prueba

Después de esta configuración.

Cuando escribimos código, si el formato del código no cumple con los requisitos de ESLint, aparecerá un error;

Cuando guardamos el código, si hay un código que no cumple con los requisitos de ESLint, el complemento Prettier formateará automáticamente el código en uno que cumpla con los requisitos.

Puedes probarlo tú mismo.

 

 

Supongo que te gusta

Origin blog.csdn.net/m0_73089846/article/details/127889148
Recomendado
Clasificación
Diario
Más
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(33)
2024-04-29(5)

Code World

© 2018 codetd.com