prettier eslint
v16.3.0
Formats votre javascript en utilisant prettier suivi d' eslint --fix
La fonction fix d' eslint est assez géniale et peut être automatiquement format / correction d'une grande partie de votre code en fonction de votre configuration Eslint. prettier est un formateur automatique plus puissant. L'une des belles choses à propos de plus de jolies est de son opinion. Malheureusement, ce n'est pas suffisamment d'opinion et / ou certaines opinions diffèrent de la mienne. Donc, après plus joli, le code, je commence à obtenir des erreurs de liaison.
Cela formate votre code via prettier , puis transmet le résultat de cela à eslint --fix . De cette façon, vous pouvez obtenir les avantages des capacités de mise en forme supérieure de prettier , mais bénéficiez également des capacités de configuration d' eslint .
Pour les fichiers avec une extension de
.css,.less,.scss, ou.json, cela ne fait queprettiercareslintne peut pas les traiter.
Ce module est distribué via le NPM qui est regroupé de nœud et doit être installé comme l'un des devDependencies de votre projet:
npm install --save-dev prettier-eslint
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 } = barLe code source au format.
Le chemin d'accès du fichier en cours de format peut être utilisé pour remplacer eslintConfig (Eslint sera utilisé pour trouver la configuration pertinente pour le fichier).
La configuration à utiliser pour le formatage avec Eslint. Peut être remplacé par filePath .
Les options pour passer pour le formatage avec prettier . Si ce n'est pas fourni, prettier-eslint tentera de créer les options basées sur l' eslintConfig (que ce soit fourni ou dérivé via filePath ). Vous pouvez également fournir certaines des options et avoir les options restantes dérivées via votre configuration Eslint. Ceci est utile pour des options comme parser .
Remarque: Ces options remplacent la configuration Eslint. Si vous souhaitez que les options de secours soient utilisées uniquement dans le cas que la règle ne peut pas être déduite d'Eslint, voir "FallbackPrettierOptions" ci-dessous.
Les options pour passer pour le formatage avec prettier si prettier-eslint n'est pas en mesure de créer les options basées sur le eslintConfig (que ce soit fourni ou dérivé via filePath ). Ces options ne seront utilisées que dans le cas que la règle Eslint correspondante ne peut être trouvée et que l'option plus jolie n'a pas été définie manuellement dans prettierOptions . Si la repli n'est pas donnée, prettier-eslint n'utilisera que la valeur prettier par défaut dans ce scénario.
prettier-eslint fait pas mal de journalisation si vous le souhaitez. Passez ceci pour définir le nombre de journaux que vous souhaitez voir. La valeur par défaut est process.env.LOG_LEVEL || 'warn' .
Par défaut, prettier-eslint essaiera de trouver le module eslint (et prettier ) pertinent basé sur le filePath . S'il ne peut pas en trouver un, il utilisera la version que prettier-eslint a installée localement. Si vous souhaitez spécifier un chemin d'accès au module eslint , vous souhaitez avoir une utilisation prettier-eslint , vous pouvez fournir le chemin complet à celui-ci avec l'option eslintPath .
Ceci est fondamentalement le même que eslintPath à l'exception du module prettier .
Par défaut, prettier-eslint fonctionnera d'abord prettier , puis eslint --fix . C'est génial si vous voulez utiliser prettier , mais remplacez certains des styles que vous n'aimez pas utiliser eslint --fix .
Une autre approche consiste à utiliser différents outils pour différentes préoccupations. Si vous fournissez prettierLast: true , il exécutera eslint --fix d'abord, alors prettier . Cela vous permet d'utiliser eslint pour rechercher des bogues et / ou de mauvaises pratiques, et utiliser prettier pour appliquer le style de code.
prettier-eslint ne propagera les erreurs d'analyse que lorsque les prettier ou eslint échouent. En plus de propager les erreurs, il enregistrera également un message spécifique indiquant ce qu'il faisait au moment de l'échec.
Remarque: format n'affichera aucun message concernant les règles brisées dans ni prettier ou 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 ) ;produit sur la console
[{
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
}]
L' analyze d'exportation supplémentaire est identique au format sauf qu'il renvoie un objet simple avec des propriétés output donnant la chaîne exacte que format rendrait, et messages donnant le tableau des descriptions de messages (avec la structure indiquée ci-dessus) produite par l'analyse eslint du code. Vous pouvez utiliser analyze à la place du format si vous souhaitez effectuer le formatage, mais capturez également toutes les erreurs que eslint peut remarquer.
Code ➡️ plus joli ➡️ Eslint - Fix ➡️ Code formaté
Les eslintConfig et prettierOptions peuvent chacun être fournis comme argument. Si l' eslintConfig n'est pas fourni, alors prettier-eslint les recherchera en fonction du fileName (si aucun fileName n'est fourni, il utilise process.cwd() ). Une fois prettier-eslint a trouvé l' eslintConfig , les prettierOptions sont déduites de l' eslintConfig . Si certaines des prettierOptions ont déjà été fournies, alors prettier-eslint ne fera que déduire les options restantes. Cette inférence se produit dans src/utils.js .
Une chose importante à noter sur cette inférence est qu'elle peut ne pas prendre en charge votre configuration Eslint spécifique. Vous voudrez donc vérifier src/utils.js pour voir comment l'inférence est effectuée pour chaque option (quelles règles sont référencées, etc.) et faites une demande de traction si votre configuration est prise en charge.
Par défaut si vous avez toutes les règles Eslint pertinentes désactivées (ou si Eslint est entièrement désactivé via /* eslint-disable */ alors les options plus jolies retomberont aux défauts 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 ,
} Il y a beaucoup de journalisation disponible avec prettier-eslint . Lors du débogage, vous pouvez utiliser l'un des logLevel S pour avoir une meilleure idée de ce qui se passe. Si vous utilisez prettier-eslint-cli , vous pouvez utiliser la --log-level trace , si vous utilisez le plugin Atom, vous pouvez ouvrir les outils du développeur et entrez: process.env.LOG_LEVEL = 'trace' dans la console, puis exécutez le format. Vous verrez un tas de journaux qui devraient vous aider à déterminer si le problème est prettier , eslint --fix , à quel point prettier-eslint infère vos options prettier , ou un certain nombre d'autres choses. Il vous sera demandé de le faire avant de déposer des problèmes, alors faites-le?
Remarque: Lorsque vous faites cela, il est recommandé de l'exécuter uniquement sur un seul fichier car il y a beaucoup de journaux :)
En utilisant // eslint-disable-line , vous pouvez parfois obtenir des erreurs de libellur une fois que le code a été traité par ce module. C'est parce que prettier change ceci:
// prettier-ignore
if ( x ) { // eslint-disable-line
}À ceci:
if ( x ) {
// eslint-disable-line
} Et l' eslint --fix ne le changera pas. Vous pouvez remarquer que // eslint-disable-line est passé à une nouvelle ligne. Pour contourner ce problème, vous pouvez utiliser //eslint-disable-next-line au lieu de // eslint-disable-line comme ceci:
// eslint-disable-next-line
if ( x ) {
} prettiereslintAucun dont je suis au courant. N'hésitez pas à déposer un PR si vous connaissez d'autres solutions.
prettier-eslint-cli -prettier-atom (cochez la case "Eslint Integration" dans les paramètres)vs-code-prettier-eslint - Plugin de code Visual Studioeslint-plugin-prettier - Plugin Eslint. Alors que plus joli-eslint utilise eslint --fix pour modifier la sortie de prettier , Eslint-Plugin-Prettier maintient la sortie prettier en tant que et l'intégre au flux de travail Eslint ordinaire.prettier-eslint-webpack-plugin - Plugin webpack plus jolie Eslint Merci à ces gens (clé 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 | Pois de patry ? | 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 ? | Rebecca Vest | Chris Bobbe ? | Jounqin ? ? ? ? ? ? ? | Jonathan Rehm | Glen Whitney |
Ce projet suit les spécifications de tous les contributeurs. Contributions de toute nature bienvenue!
Mit
