javascript - react - Configuración ESLint de Prettier+Airbnb

prettier eslint vscode

Question

Recientemente, comencé a usar Visual Studio Code para mi editor y encontré el formateador Prettier - JavaScript. Creo que es un excelente complemento porque me ayuda a mantener mi código en buen estado.

Configuré la configuración ESLint de Airbnb y me parece que es muy útil.

Aquí está la trampa. La configuración de ESLint de Airbnb que estoy ejecutando actualmente no funciona bien con Prettier. Por ejemplo, para la cadena de JavaScript, Prettier está formateado para incluir marcas dobles y ESLint de Airbnb como marcas simples. Cuando formateo el código utilizando Prettier, entonces ESLint de Airbnb no está de acuerdo.

Sé que Kent Dodds ha hecho algunos trabajos con configuraciones de ESLint, entre otros, el ejemplo aquí.

Pero parece que no puedo encontrar una solución que me permita usar la magia de Prettier para formatear mi código para el ESLint de Airbnb.

Answer 1

Aquí hay algunas maneras de hacerlo, en orden de recomendación. Preferiría el primer enfoque, ya que nunca tendrá que molestarse con otras reglas que podrían entrar en conflicto en el futuro.

i) Instale eslint-config-prettier y .eslintrc desde .eslintrc . Al hacer esto, se desactivan algunas de las reglas relacionadas con el formato dentro de ESLint que podrían entrar en conflicto con Prettier:

{
"extends": [
"airbnb",
"prettier"
]
}

ii) Agregar "singleQuote": true al archivo de configuración .prettierrc :

{
"singleQuote": true,
...
}

iii) Agregar una opción de línea de comando --single-quote cuando --single-quote Prettier:

$ prettier --single-quote ...

iv) Desactive la regla de quotes de ESLint dentro de su archivo de configuración .eslintrc (y potencialmente otros que puedan entrar en conflicto):

{
"rules": {
"quotes": "off",
...
}
}

Answer 2

Creo que eslint-config-prettier fue creado solo para este propósito: https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules

Básicamente, desactiva todas las reglas que tienen que ver con el estilo de código, ya que de todas formas, la prettier se encargará de hacerlo.

Así que solo instale este complemento junto con cualquier otro complemento de eslint deseado (como eslint-config-airbnb ) y en su configuración de eslint simplemente lo agrega al campo de extensiones. Por ejemplo:

{
"extends": ["airbnb", "prettier"]
}

Answer 3

Entonces, tiene su archivo .eslintrc, con la propiedad "extends": "airbnb" Agregue otra propiedad, reglas y las reglas que escribirá allí sobrescribirán las heredadas de airbnb

"extends": "airbnb",
"rules": {
"eqeqeq": 2,
"comma-dangle": 1,
}

Ahora, aquí solo estoy sobrescribiendo dos reglas aleatorias, tendrás que buscar la que necesitas :)

¿O malinterpreté tu pregunta?

Answer 4

Una forma más limpia es :

yarn add --dev eslint-plugin-prettier eslint-config-prettier

 // .eslintrc
{
"extends": ["airbnb", "plugin:prettier/recommended"]
}

El plugin:prettier/recommended hace tres cosas :

• Habilita eslint-plugin-más bonita.
• Establece la regla más bonita / más bonita en "
• Amplía la configuración de eslint-config-prettier.

Y luego, si estás en reaccionar, podrías agregar prettier/react también:

{
"extends": [
"airbnb",
"plugin:prettier/recommended",
"prettier/react"
]
}