ESLint es una herramienta de inspección de código JavaScript que se puede utilizar para verificar el estilo del código y los posibles errores, y proporcionar estandarización y control de calidad del código. Las siguientes son opciones de configuración comunes en los archivos de configuración de ESLint:
1. Instale ESLint
Primero, ejecute el siguiente comando en la línea de comando para instalar ESLint globalmente:
npm install -g eslint
Luego, ejecute el siguiente comando en el directorio raíz del proyecto para inicializar la configuración de ESLint:
eslint --init
2. Opciones de configuración comunes
1. analizador
Especifique el analizador; Espree se utiliza de forma predeterminada. Por ejemplo, usando el analizador de Babel:
module.exports = { parser: 'babel-eslint' }
2. se extiende
Ampliar un conjunto de reglas de configuración existente. Los valores opcionales son:
- eslint: reglas predeterminadas
- airbnb: reglas de estilo de Airbnb
- google: reglas de estilo de Google
- estándar: reglas de estilo estándar de JavaScript
- vue: guía de Vue.js
Por ejemplo, usando las reglas de Airbnb:
module.exports = { extends: 'airbnb-base' }
3. reglas
Especifique reglas personalizadas o modifique reglas existentes. Las reglas pueden especificar niveles de advertencia y error, "advertencia" y "error" respectivamente.
Por ejemplo, no permita puntos y coma adicionales:
module.exports = { rules: { 'no-extra-semi': 'error' } }
4. entorno
Especifica el entorno, relacionado con variables globales. Los valores opcionales son: es6, navegador, nodo, commonjs, amd, mocha, jquery, prototipojs, shelljs, mongo, jasmine, phantomjs, transportador.
Por ejemplo, para que un entorno ES6 esté disponible:
module.exports = { env: { es6: true } }
5. globales
Definir variables globales:
module.exports = { globals: { Vue: false } }
3. Archivo de configuración de muestra
Aquí hay un archivo de configuración de muestra que usa las reglas de Airbnb y modifica algunas reglas personalizadas:
module.exports = { extends: 'airbnb-base', rules: { 'no-console': 'off', 'no-unused-vars': 'error', 'no-extra-semi': 'error', 'semi': ['error', 'never'] }, env: { es6: true, node: true }, globals: { Vue: false } }
Cree el archivo .eslintrc.js en el directorio raíz del proyecto y copie el contenido anterior en el archivo. Luego, instale y habilite el complemento eslint en el editor para implementar la función de inspección de código.
vscode configurar ESlint
Descargar en la extensión vscode
Haga clic en el botón de configuración del complemento y seleccione la configuración de la extensión
Ingrese "eslint.enable" en el cuadro de búsqueda, seleccione la opción "Espacio de trabajo" o "Usuario" y configúrelo como verdadero.
Luego haga clic en el botón en la esquina superior derecha (ver captura de pantalla)
configuración.json:
1 //Configurar eslint
2 "eslint.autoFixOnSave": true,
3 "files.autoSave":"off",
4 "eslint.validate": [
5 "javascript",
6 "javascriptreact",
7 "html",
8 { "language": "vue", "autoFix": true }
9 ],
10 "eslint.options": {
11 "plugins": ["html"]
12 },
13 // Para cumplir con los dos espacios de eslint principio de separación
14 "editor.tabSize": 2
De esta manera, cada vez que guarde un archivo (ctrl+s), el complemento eslint corregirá automáticamente la sintaxis de eslint del archivo actual.
Ejemplo de código del archivo .eslintrc.cjs (copie el siguiente código en el archivo .eslintrc.cjs)
módulo.exportaciones = {
"entorno": {
"navegador": verdadero,
"es2021": cierto,
"nodo": verdadero
},
"se extiende": [
"eslint: recomendado",
"complemento:vue/vue3-recomendado",
"complemento:más bonito/recomendado",
"eslint-config-más bonito"
],
"anulaciones": [
],
"opciones del analizador": {
"ecmaVersion": "último",
"tipofuente": "módulo",
"Características ecma": {
"módulos": verdadero,
'jsx': verdadero
},
"requireConfigFile": falso,
'analizador': '@babel/eslint-parser'
},
"complementos": [
"vista",
"más bonita"
],
"normas": {
'no-console': 'advertir', // Deshabilitar la apariencia de la consola
'no-debugger': 'advertir', // Deshabilitar el depurador
'no-duplicate-case': 'advertir', // prohibir casos duplicados
'no-empty': 'warn', // Los bloques de declaraciones vacíos están prohibidos
'no-extra-parens': 'advertir', // prohibir paréntesis innecesarios
'no-func-assign': 'warn', // Prohibir la reasignación de la declaración de función
'no-unreachable': 'warn', // Deshabilita el bloque de código después de [return|throw]
'no-else-return': 'warn', // Prohibir el bloque else después de la declaración return en la declaración if
'no-empty-function': 'warn', // Deshabilitar bloques de funciones vacíos
'no-lone-blocks': 'advertir', // Deshabilitar bloques anidados innecesarios
'no-redeclare': 'advertir', // No declarar la misma variable varias veces
'no-return-assign': 'warn', // No utilice declaraciones de asignación en declaraciones de devolución
'no-return-await': 'warn', // Deshabilitar [return/await] innecesario
'no-self-compare': 'advertir', // Deshabilitar expresiones de autocomparación
'no-useless-catch': 'advertir', // Deshabilitar cláusulas catch innecesarias
'no-useless-return': 'advertir', // prohibir declaraciones de devolución innecesarias
'no-multiple-empty-lines': 'warn', // Deshabilita múltiples líneas vacías
'no-useless-call': 'advertir', // Deshabilitar .call() y .apply() innecesarios
'no-var': 'advertir', // prohibir var y reemplazarlo con let y const
'no-delete-var': 'off', // Permitir el uso de variables de eliminación
'no-shadow': 'off', // Permitir que las declaraciones de variables tengan el mismo nombre que las variables en el ámbito externo
'dot-notation': 'advertir', // Requerir el uso de puntos siempre que sea posible
'default-case': 'warn', // Requiere una rama predeterminada en la declaración de cambio
'eqeqeq': 'advertir', // Requiere === y !==
// 'curly': 'advertir', // Requerir que todas las declaraciones de control utilicen un estilo de paréntesis consistente
'space-infix-ops': 'warn', // Requiere espacios alrededor de los operadores
'space-unary-ops': 'warn', // Requiere espacios consistentes antes y después de los operadores unarios
'switch-colon-spacing': 'warn', // Requiere espacios alrededor de los dos puntos del switch
'arrow-spacing': 'warn', // Requiere espacios consistentes antes y después de las funciones de flecha
'array-bracket-spacing': 'warn', // Requiere un espaciado consistente entre corchetes de matriz
'brace-style': 'warn', // Requiere un estilo de llave consistente dentro de los bloques de código
'max- Depth': ['warn', 4], // Requiere una profundidad máxima de 4 para bloques encajables
'max-statements': ['warn', 100], // El número máximo de declaraciones permitidas en el bloque de funciones es 20
'max-nested-callbacks': ['warn', 3], // Requiere una profundidad de anidamiento máxima de 3 para las funciones de devolución de llamada
'max-statements-per-line': ['warn', { max: 1 }], // Solicita el número máximo de declaraciones permitidas en cada línea
"vue/require-default-prop": 0, // Los parámetros de propiedad de cierre deben tener valores predeterminados
"vue/singleline-html-element-content-newline": 0, // Se requiere un carácter de nueva línea para cerrar un elemento de una sola línea
"vue/multi-word-component-names": "apagado",
"vue/multiline-html-element-content-newline": 0, // Se requiere un carácter de nueva línea para cerrar elementos multilínea
// Se requiere que el máximo de atributos de cada fila de etiquetas no exceda de cinco
'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
// Cancelar la configuración de restricción de que la etiqueta de cierre no puede cerrarse automáticamente
"vue/html-cierre automático": ["error", {
"html": {
"vacío": "siempre",
"normal": "nunca",
"componente": "siempre"
},
"svg": "siempre",
"matemáticas": "siempre"
}]
}
}