prettier eslint
v16.3.0
eslint --fix fixを使用して、javascriptをprettierします
eslintのfix機能は非常に優れており、ESLINTの構成に従ってコードの大部分を自動形成/修正できます。 prettierは、より強力なオートマチックフォーマッタです。きれいなことの素晴らしいことの1つは、それがどれほど意見を述べているかです。残念ながら、それは十分に意見を述べていません、および/またはいくつかの意見は私自身とは異なります。そのため、コードをきれいに形成した後、糸くずのエラーが発生し始めます。
これにより、Codeがprettierでコードを形成し、その結果をeslint --fixに渡します。このようにして、 prettierの優れたフォーマット機能の利点を取得できますが、 eslintの構成機能の恩恵も得られます。
.css、.less、.scss、または.jsonの拡張機能を持つファイルの場合、eslintそれらを処理できないため、prettierなります。
このモジュールは、ノードにバンドルされたNPMを介して配布され、プロジェクトのdevDependenciesの1つとしてインストールする必要があります。
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 } = barフォーマットするソースコード。
フォーマットされているファイルのパスを使用してeslintConfigをオーバーライドすることができます（ESLINTを使用して、ファイルの関連する構成を見つけます）。
ESLINTでのフォーマットに使用する構成。 filePathでオーバーライドすることができます。
prettierにフォーマットするために合格するオプション。提供されていない場合、 prettier-eslint eslintConfig （ filePathを介して提供または導出されているかどうか）に基づいてオプションを作成しようとします。また、いくつかのオプションを提供し、ESLINT構成を介して残りのオプションを導出することもできます。これは、 parserなどのオプションに役立ちます。
注：これらのオプションは、ESLINT構成をオーバーライドします。ルールをESLINTから推測できない場合にのみ、フォールバックオプションを使用したい場合は、以下の「FallbackPrettieroptions」を参照してください。
prettier-eslintがeslintConfigに基づいてオプションを作成できない場合、 prettierにフォーマットするために合格するオプション（ filePathを介して提供または導出されているかどうか）。これらのオプションは、対応するESLINTルールが見つからない場合にのみ使用され、きれいなオプションはprettierOptionsで手動で定義されていません。フォールバックが与えられていない場合、このシナリオでは、 prettier-eslintデフォルトのprettier値を使用するだけです。
prettier-eslint必要に応じてロギングをかなり多く実行します。これを渡して、見たいログの数を設定します。デフォルトはprocess.env.LOG_LEVEL || 'warn'ですprocess.env.LOG_LEVEL || 'warn' 。
デフォルトでは、 prettier-eslint filePathに基づいた関連するeslint （およびprettier ）モジュールを見つけようとします。見つからない場合は、 prettier-eslintローカルにインストールしたバージョンを使用します。 eslintモジュールへのパスを指定したい場合は、 prettier-eslintを使用したい場合は、 eslintPathオプションでフルパスを提供できます。
これは基本的に、 prettierモジュールを除いてeslintPathと同じです。
デフォルトでは、 prettier-eslint最初にprettierなり、次にeslint --fix実行します。これは、 prettier使用したいのなら素晴らしいことですが、 eslint --fix 。
別のアプローチは、さまざまな懸念のためにさまざまなツールを使用することです。 prettierLast: trueを提供する場合、それはeslint --fix最初にフィックスしてから、次にprettier 。これにより、 eslintを使用してバグや悪いプラクティスを探すことができ、コードスタイルを実施するためにprettierを使用できます。
prettier-eslint prettierまたはeslintいずれかが失敗した場合にのみ、解析エラーを伝播します。エラーの伝播に加えて、障害時に何をしていたかを示す特定のメッセージも記録します。
注： formatには、壊れprettierルールに関するメッセージが表示されません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 ) ;コンソールで生産します
[{
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
}]
追加のエクスポートanalyzeはformatが返される正確な文字列を与えるプロパティoutputを備えた単純eslintオブジェクトを返すmessagesを除いて、 formatと同一です。フォーマットを実行したい場合は、 eslint気付く可能性のあるエラーをキャプチャする場合は、 formatの代わりにanalyzeを使用できます。
Code➡️Prettier➡️ESLINT-FIX➡️フォーマットコード
eslintConfigとprettierOptionsそれぞれ議論として提供できます。 eslintConfigが提供されていない場合、 prettier-eslint fileNameに基づいてそれらを探します（ fileNameが提供されていない場合、 process.cwd()を使用します）。 prettier-eslint eslintConfig見つけた後、 prettierOptionsはeslintConfigから推測されます。いくつかのprettierOptionsがすでに提供されている場合、 prettier-eslint残りのオプションのみを推測します。この推論はsrc/utils.jsで発生します。
この推論について注意すべき重要なことは、特定のESLINT構成をサポートしない可能性があることです。したがって、 src/utils.jsをチェックして、各オプションの推論がどのように行われるか（ルールが参照されるなど）を確認し、構成がサポートされている場合はプルリクエストを作成する必要があります。
デフォルト関連するすべてのESLINTルールが無効になっている場合（またはESLINTを完全に無効にしている場合/* eslint-disable */その場合、きれいなオプションは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 ,
} prettier-eslintでは、多くのロギングがあります。デバッグするときは、 logLevel Sの1つを使用して、何が起こっているのかをよりよく理解することができます。 prettier-eslint-cliを使用している場合は、 --log-level traceを使用できますprocess.env.LOG_LEVEL = 'trace'を使用している場合は、開発者ツールを開き、プロセスを入力してください。問題がprettier eslint --fixあるかどうprettier-eslint判断するのに役立つログの束が表示されますprettier問題を提出する前にこれを行うように求められますので、してください？
注：これを行っている場合、ログがたくさんあるため、これを単一のファイルでのみ実行することをお勧めします:)
// eslint-disable-lineを使用している間、このモジュールによってコードが処理された後に糸くずエラーが発生する場合があります。それは、 prettierこれを変えるからです：
// prettier-ignore
if ( x ) { // eslint-disable-line
}これに：
if ( x ) {
// eslint-disable-line
}そして、 eslint --fixそれをバックしません。 // eslint-disable-line新しいラインに移動したことに気付くことができます。この問題を回避するには、 //eslint-disable-next-line // eslint-disable-line next-lineを使用できます。
// eslint-disable-next-line
if ( x ) {
} prettiereslint私が知っていることはありません。他のソリューションを知っている場合は、お気軽にPRを提出してください。
prettier-eslint-cliコマンドラインインターフェイスprettier-atom原子プラグイン（設定の「eslint統合」チェックボックスをチェックしてください）vs-code-prettier-eslintビジュアルスタジオコードプラグインeslint-plugin-prettier -ESLINTプラグイン。 Prettier-Eslintはeslint --fixでprettierの出力を変更しますが、Eslint-Plugin-Prettierはprettier出力をAS-ISに保ち、通常のESLINTワークフローと統合します。prettier-eslint-webpack-plugin -ESLINT WebPackプラグインこれらの人々に感謝します（絵文字キー）：
ケントC.ドッズ ？ | Gyandeep Singh ？ | Igor Pnev ？ | ベンジャミンタン ？ | エリック・マコーミック | サイモン・リデル | トム・マッカーニー |
パトリックÅkerstrand | Lochlan Bunn | ダニエル・テルウィエル ？ ？ | ロビン・マルファイト ？ | マイケル・マクダーモット | Adam Stankiewicz | スティーブン・ジョン・ソレンセン |
ブライアン・ディ・パルマ ？ | ロブ・ワイズ | パトリックピーズ ？ | Thijs Koerselman ？ | エンリケ・カバレロ ？ | ukaszモロス ？ | サイモン・フリドランド ？ ？ ？ ？ ？ ？ |
オリバー・ジョセフ・アッシュ ？ | マークパルフリーマン | アレックス・テイラー | Xianming Zhong | ルイス・リュー | ハムザ・ハミディ ？ ？ ？ ？ | ラジブ・ランジャン・シン |
イゴール ？ | レベッカベスト | クリス・ボッベ ？ | jounqin ？ ？ ？ ？ ？ ？ ？ | ジョナサン・レム | グレン・ホイットニー |
このプロジェクトは、全委員会の仕様に従います。あらゆる種類の貢献を歓迎します！
mit
