prettier eslint

más bonito

Formatea su JavaScript usando prettier seguido de eslint --fix

El problema

La función fix of eslint es bastante buena y puede formatear/arreglar automáticamente gran parte de su código de acuerdo con su configuración de Eslint. prettier es un formatero automático más potente. Una de las cosas bonitas de más bonitas es lo obstinado que es. Desafortunadamente, no es lo suficientemente obstinado y/o algunas opiniones difieren de las mías. Entonces, después de los formatos más bonitos del código, empiezo a recibir errores de pelusa.

Esta solución

Esto formatea su código a través de prettier , y luego pasa el resultado de eso a eslint --fix . De esta manera, puede obtener los beneficios de las capacidades de formato superior de prettier , pero también beneficiarse de las capacidades de configuración de eslint .

Para archivos con una extensión de .css , .less , .scss o .json esto solo se ejecuta prettier ya que eslint no puede procesarlos.

Instalación

Este módulo se distribuye a través de NPM, que se incluye con nodo y debe instalarse como una de devDependencies de su proyecto:

 npm install --save-dev prettier-eslint

Uso

Ejemplo

 const format = require ( 'prettier-eslint' ) ;

// notice, no semicolon in the original text
const sourceCode = 'const {foo} = bar' ;

const options = {
  text : sourceCode ,
  eslintConfig : {
    parserOptions : {
      ecmaVersion : 7
    } ,
    rules : {
      semi : [ 'error' , 'never' ]
    }
  } ,
  prettierOptions : {
    bracketSpacing : true
  } ,
  fallbackPrettierOptions : {
    singleQuote : false
  }
} ;

const formatted = await format ( options ) ;

// notice no semicolon in the formatted text
formatted ; // const { foo } = bar

opción

texto (cadena)

El código fuente para formatear.

FilePath (? String)

La ruta del archivo que se está formateando se puede usar para anular eslintConfig (se usará ESLint para encontrar la configuración relevante para el archivo).

Eslintconfig (? Object)

La configuración para usar para formatear con Eslint. Se puede anular con filePath .

Prettieroptions (? Object)

Las opciones para pasar para formatear con prettier . Si no se proporciona, prettier-eslint intentará crear las opciones basadas en el eslintConfig (ya sea proporcionado o derivado a través de filePath ). También puede proporcionar algunas de las opciones y tener las opciones restantes derivadas a través de su configuración de Eslint. Esto es útil para opciones como parser .

Nota: Estas opciones anulan la configuración de Eslint. Si desea que las opciones de respuesta se usen solo en el caso de que la regla no se pueda inferir de Eslint, consulte "FallbackPrettieroptions" a continuación.

FallbackPrettierOptions (? Object)

Las opciones para pasar para formatear con prettier si prettier-eslint no puede crear las opciones basadas en el eslintConfig (ya sea proporcionado o derivado a través de filePath ). Estas opciones solo se utilizarán en el caso de que la regla de Eslint correspondiente no se pueda encontrar y la opción más bonita no se ha definido manualmente en prettierOptions . Si no se da la devolución de retroceso, prettier-eslint solo usará el valor prettier predeterminado en este escenario.

Loglevel (?

prettier-eslint hace bastante registro si lo desea. Pase esto para establecer el número de registros que desea ver. El valor predeterminado es process.env.LOG_LEVEL || 'warn' .

EslintPath (? String)

Por defecto, prettier-eslint intentará encontrar el módulo eslint (y prettier ) relevante basado en filePath . Si no puede encontrar uno, entonces usará la versión que prettier-eslint ha instalado localmente. Si desea especificar una ruta al módulo eslint , le gustaría tener un uso prettier-eslint , entonces puede proporcionarle la ruta completa con la opción eslintPath .

Prettierpath (? String)

Esto es básicamente lo mismo que eslintPath , excepto el módulo prettier .

Prettierlast (? Boolean)

Por defecto, prettier-eslint ejecutará primero prettier , luego eslint --fix . Esto es genial si quieres usar prettier , pero anula algunos de los estilos que no te gustan usar eslint --fix .

Un enfoque alternativo es usar diferentes herramientas para diferentes preocupaciones. Si proporciona prettierLast: true , ejecutará eslint --fix primero, entonces prettier . Esto le permite usar eslint para buscar errores y/o malas prácticas, y usar prettier para hacer cumplir el estilo de código.

lanza

prettier-eslint solo propagará errores de análisis cuando falle prettier o eslint . Además de propagar los errores, también registrará un mensaje específico que indica lo que estaba haciendo en el momento de la falla.

Nota: format no mostrará ningún mensaje con respecto a las reglas rotas en prettier o eslint .

Capturar mensajes de eslint

 const { analyze } = require ( "prettier-eslint" ) ;

const text = 'var x = 0;' ;
const result = await analyze ( {
  text ,
  eslintConfig : {
    rules : { 'no-var' : 'error' }
  }
} )    
console . log ( result . messages ) ;

produce en la consola

 [{
  ruleId: 'no-var',
  severity: 2,
  message: 'Unexpected var, use let or const instead.',
  line: 1,
  column: 1,
  nodeType: 'VariableDeclaration',
  messageId: 'unexpectedVar',
  endLine: 1,
  endColumn: 11
}]

El analyze de exportación adicional es idéntico al format , excepto que devuelve un objeto simple con output de propiedades que proporciona la cadena exacta que format volvería, y messages que dan la matriz de descripciones de mensajes (con la estructura mostrada arriba) producida por el análisis eslint del código. Puede usar analyze en lugar de format si desea realizar el formato, pero también capturar cualquier error que eslint pueda notar.

Detalle técnico

Código ➡️ más bonito ➡️ Eslint -Fix ➡️ Código formateado

Inferir prettieropciones a través de Eslintconfig

El eslintConfig y prettierOptions se pueden proporcionar como un argumento. Si no se proporciona el eslintConfig , entonces prettier-eslint los buscará en función del fileName (si no se proporciona ningún fileName , entonces usa process.cwd() ). Una vez prettier-eslint ha encontrado el eslintConfig , las prettierOptions se infieren del eslintConfig . Si ya se han proporcionado algunas de las prettierOptions , entonces prettier-eslint solo inferirá las opciones restantes. Esta inferencia ocurre en src/utils.js .

Una cosa importante a tener en cuenta sobre esta inferencia es que puede no admitir su configuración específica de Eslint. Por lo tanto, querrá verificar src/utils.js para ver cómo se realiza la inferencia para cada opción (a qué reglas (s) se hace referencia, etc.) y realizar una solicitud de extracción si su configuración es compatible.

Valores predeterminados Si tiene todas las reglas de Eslint relevantes deshabilitadas (o ha desactivado por completo a través de /* eslint-disable */ luego las opciones más bonitas volverán a los valores predeterminados prettier :

 {
  printWidth : 80 ,
  tabWidth : 2 ,
  singleQuote : false ,
  trailingComma : 'none' ,
  bracketSpacing : true ,
  semi : true ,
  useTabs : false ,
  // prettier-eslint doesn't currently support
  // inferring these two (Pull Requests welcome):
  parser : 'babylon' ,
  bracketSameLine : false ,
} 

Solución de problemas

problemas de depuración

Hay muchos registros disponibles con prettier-eslint . Al depurar, puede usar uno de los logLevel S para tener una mejor idea de lo que está sucediendo. Si está utilizando prettier-eslint-cli , puede usar la --log-level trace , si está utilizando el complemento Atom, puede abrir las herramientas de desarrollador e ingresar: process.env.LOG_LEVEL = 'trace' en la consola, luego ejecute el formato. Verá un montón de registros que deberían ayudarlo a determinar si el problema es prettier , eslint --fix , cuán prettier-eslint infiere sus opciones prettier , o cualquier cantidad de otras cosas. Se le pedirá que haga esto antes de presentar problemas, así que por favor, ¿por favor?

Nota: Cuando está haciendo esto, se recomienda que solo ejecute esto en un solo archivo porque hay muchos registros :)

eslint-desesable

Mientras usa // eslint-disable-line , a veces puede recibir errores de pelusa después de que este módulo haya procesado el código. Eso es porque prettier cambia esto:

 // prettier-ignore
if ( x ) { // eslint-disable-line
}

A esto:

 if ( x ) {
  // eslint-disable-line
}

Y el eslint --fix no lo cambiará. Puede notar que // eslint-disable-line se ha movido a una nueva línea. Para trabajar en torno a este problema, puede usar //eslint-disable-next-line en lugar de // eslint-disable-line como esta:

 // eslint-disable-next-line
if ( x ) {
} 

Inspiración

• prettier
• eslint

Otras soluciones

Ninguno de los que conozca. Siéntase libre de presentar un PR si conoce otras soluciones.

Relacionado

• prettier-eslint-cli -interfaz de línea de comandos
• prettier-atom - Atom Plugin (verifique la casilla de verificación "Integración de Eslint" en la configuración)
• vs-code-prettier-eslint -Visual Studio Code Plugin
• eslint-plugin-prettier -complemento de Eslint. Mientras que más bonito usa eslint --fix para cambiar la salida de prettier , Eslint-Plugin-Prettier mantiene la salida prettier como es y la integra con el flujo de trabajo de Eslint regular.
• prettier-eslint-webpack-plugin -complemento de webpack de eslint más bonito

Colaboradores

Gracias a estas personas (Key Emoji):

Kent C. Dodds ? ️	Gyandeep Singh ?	Igor PNEV ?	Benjamin Tan ?	Eric McCormick ️	Simon Lydell	Tom McKearney
Patrik Åkerstrand	Lochlan Bunn	Daniël Terwiel ? ?	Robin Malfait ?	Michael McDermott	Adam Stankiewicz	Stephen John Sorensen
Brian di Palma ?	Rob Wise	Guisantes ? ️	Thijs Koerselman ? ️	Enrique Caballero ?	Łukasz Moroz ? ️	Simon Fridlund ? ? ? ? ? ? ️ ? ✅
Oliver Joseph Ash ?	Mark Palfreeman	Alex Taylor ️	Xianming zhong ️	Lewis Liu	Hamza Hamidi ? ? ? ?	Rajiv Ranjan Singh
Igor ?	Chaleco de Rebecca	Chris Bobbe ?	Jounqin ? ? ? ? ? ? ? ️ ?	Jonathan rehm	Glen Whitney

Este proyecto sigue la especificación de todos los contribuyentes. ¡Contribuciones de cualquier tipo bienvenido!

LICENCIA

MIT