prettier浅出

1.2大linterは

eslint jsのために設計された挿抜可能な検査プログラム

tslint ts言語用に設計された拡張可能な検査ツール(2019年に更新をキャンセルし、eslintの使用を推奨)

どちらのlinterもfix機能を実現することができ、fixとは元のコードを一定のルールに合致する新しいコードに変換することである.linterツールfixの後のコードは、ほとんどの問題を解決しましたが、コードの行が長すぎるなど、コードを読む習慣に合わないところもあるかもしれません.
強迫症の影響で、異なる人が自分のコードを異なる程度に「美化」し、他人のコードに出会ったときもついでに美化する.
最終的には、プロジェクト内のコードスタイルが統一されません.
2.prettierの概要
prettierはコードの一貫性を保証し、美化効果を兼ね備えたコードフォーマットツールです.
2.1 not only js
前にjslintがありましたが、eslintが成功しすぎたため、jslintは誰も興味を持っていません.これは、eslintがjsに集中していると勘違いしています.以下にサポートされている他の言語を列挙します.

javascript、jsx

flow、typescript

json

css、less、scss

graphql

markdown

yaml

2.2 IDE
人のいるところには江湖があり、エディタのあるところにはprettierがあり、現在流行しているideはprettierをサポートしています.

vscode

webstorm

atom

visual studio

sublime

フロントエンドでよく使われるツールをいくつか挙げましたが、使用するエディタがprettierをサポートしているかどうかを確認するには、公式サイトに移動してください.
2.3 parser
prettierは、graphqlをコンパイルする際にgraphql/languageなど、異なる言語に対して使用されるparserが複数あります.一方、jsをコンパイルするにはbabylon(デフォルト)、flowの2つがあり、babylonのバグが少なく、コンパイル作業のサポートが良いため、デフォルトではbabylonを選択すればよい.babylonはbabel 6のコンパイルツールであり、babel 7で@babel/parserと改名されている.
3.eslint融合
Eslintは強力なlinterツールとして、vscodeと協力するとコード問題のリスクを低減することができ、codingの過程で潜在的な問題を発見し、コードの品質を高めることができます.
3.1 eslint-config-prettier
Eslintのconfigはサードパーティ製パッケージのconfigから継承できます.configではrulesのスイッチングルールが定義されています.eslint-config-prettierは主にprettierのフォーマット後にeslintがエラーを報告するルールを定義しています.
3.2 eslint-plugin-prettier
Eslintとprettierのフォーマットは別々に行い、eslint fixと同時にprettierのルールも兼ねてフォーマットするには、eslint-plugin-prettierというプラグインを使用する必要があります.
その主な役割はeslint fixを専門に定義したprettier規則である.
3.3融合書き方
はい.Eslintrcファイルに以下の構成を追加

{
  "extends": ["plugin:prettier/recommended"]
}

このコードには3つの役割があります

prettierのconfigルール

を継承

rulesの「prettier/prettier」:「error」

を開く

eslint fixと同時にprettierフォーマット

を実行