Prettierは、独創的なコードフォーマッターです。それはあなたとあなたのチームのために一貫してフォーマットされたコードを維持するための素晴らしい方法であり、箱から出して多くの異なる言語をサポートします
Prettierの紹介
Prettierは、独創的なコードフォーマッターです。
次のような、すぐに使用できるさまざまな構文をサポートします。
- JavaScript
- フロー、TypeScript
- CSS、SCSS、Less
- JSX
- GraphQL
- JSON
- マークダウン
とプラグインPython、PHP、Swift、Ruby、Javaなどに使用できます。
これは、VS Code、Sublime Text、Atomなどを含む最も人気のあるコードエディターと統合されます。
2018年2月に350万回以上ダウンロードされたため、Prettierは非常に人気があります。
Prettierについてもっと知る必要がある最も重要なリンクは次のとおりです。
少ないオプション
私は最近Goを学びましたが、Goの最も優れた点の1つはgofmt、一般的な標準に従ってコードを自動的にフォーマットする公式ツール。
このツールは簡単に適用でき、スタイルはGoメンテナによって定義されるため、主張する代わりにその標準に適応する可能性がはるかに高いため、Goコードの95%(構成された統計)はまったく同じように見えますあなた自身のスタイルで。タブとスペース、または開始ブラケットを配置する場所など。
これは制限のように聞こえるかもしれませんが、実際には非常に強力です。すべてのGoコードは同じように見えます。
きれいなのはgofmt
世界の残りのために。
オプションがほとんどなく、ほとんどの決定はすでにあなたのために行われていますそのため、スタイルやささいなことについて議論するのをやめ、コードに集中することができます。
ESLintとの違い
ESLintはリンターであり、フォーマットするだけでなく、コードの静的分析のおかげでいくつかのエラーを強調します。
これは非常に貴重なツールであり、Prettierと一緒に使用できます。
ESLintはフォーマットの問題も強調していますが、構成がはるかに多いため、フォーマットルールのセットは人によって異なります。 Prettierは、すべての人に共通の基盤を提供します。
ここで、カスタマイズできるものがいくつかあります。
- タブ幅
- 一重引用符と二重引用符の使用
- 行列番号
- 末尾のコンマの使用
その他もありますが、Prettierは、カスタマイズしすぎないように、これらのカスタマイズの数を制御できるようにしています。
インストール
Prettierはコマンドラインから実行でき、次を使用してインストールできます。糸またはnpm。
Prettierのもう1つの優れた使用例は、PRで実行することです。ギットリポジトリ、例えばGitHub。
サポートされているエディターを使用する場合は、エディターから直接Prettierを使用するのが最善です。保存するたびに、Prettierフォーマットが実行されます。
たとえば、VSCodeのPrettier拡張機能は次のとおりです。https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
初心者のためのよりきれい
Prettierがチームやプロユーザー向けだと思うなら、このツールの価値提案を見逃していることになります。
良いスタイルは良い習慣を強制します。
フォーマットは初心者にはほとんど見過ごされがちなトピックですが、クリーンで一貫性のあるフォーマットを持つことは、新しい開発者として成功するための鍵です。
また、使い始めてもJavaScript2週間前、Prettierを使用すると、スタイル的には、1998年以降JSを記述しているJavaScriptの第一人者から記述されたコードのようになります。
その他のdevtoolsチュートリアル:
- ヨーマン入門
- ブラウザパッケージマネージャーのBower
- フロントエンドテストの概要
- node-webkitを使用してデスクトップアプリを作成する
- VS Code:言語固有の設定を使用する
- Webpackの紹介
- バベルへの短くて簡単なガイド
- 糸の紹介
- ブラウザDevToolsの概要
- Prettierでコードをフォーマットする
- ESLintでコードをクリーンに保つ
- クールなChromeDevToolsのヒントとコツのリスト
- Jestを使用したJavaScriptのテスト
- VisualStudioCodeの使用方法
- 電子入門
- パーセル、よりシンプルなウェブパック
- HTMLのEmmetリファレンス
- V8JavaScriptエンジン
- VSCodeの構成
- macOSコマンドラインの設定
- ESLintルールを無効にする方法
- コマンドラインからVSCodeを開く方法
- Electronでホットリロードを設定する方法