コードのフォーマットは些細な問題に思えるかもしれませんが、コードの品質や正確さ、バージョンの管理方法、他者との共同作業の方法などに影響を与える可能性があります。しかし、いちいち中括弧をつけるのが面倒な場合は、オープンソースのツール「Prettier」にアウトソーシングしてみてはいかがでしょうか。

フォーマットが重要

これまで、ソフトウェア開発チームは、行の長さの上限や括弧をどの行に入れるかについて、数え切れないほどの時間を浪費してきました。個人的な好みに関係なく、多くの人が少なくとも1つの点で同意するのは、コードの書式はプロジェクト全体で一貫しているべきだということです。

Prettierは、まさにそのために作られたツールです。Prettierは、テキストエディタ、コマンドラインツール、オンラインデモと統合されています。

正しい言葉で話す

まず、Prettier が通常使用する言語と互換性があるかどうかを知りたいでしょう。Prettier は現在、主にフロントエンドの Web 開発に使用される、以下のようなコア言語群に焦点を当てています。

• JavaScript言語
• HTML形式
• CSSフォーマット
• サス
• 価格低下
• ヤマル

また、プラグインによる他言語へのオープン対応も可能です。

オンラインプレイグラウンドを利用して、よりきれいなゲームに挑戦する

より素敵なものを設置しようとする前に、遊び場を見るのもいいかもしれませんね。ウェブインターフェースを使って、サンプルコードを貼り付け、Prettierがそれをどのように変換するかを見ることができます。これは、実際にどんなことができるツールなのかを知るための良い方法ですが、もっとリラックスしたニーズがある場合には、Prettierを使う主な方法にもなります。

デフォルトでは、プレイグラウンドは、左側に入力用、右側にPrettierの出力用の2つの基本的なテキストエディタパネルのように見えるはずである。最初はサンプルコードが表示されますが、これをすべて削除して、自分のコードに貼り付けるだけです。

例えば、以下のようなJavaScriptを入力してみてください。

(function (){ window.alert('ok')}())

きれいな方は、それに変えてください。

(function () { window.alert("ok");})();

なお、デフォルトでは、Prettierによる変更は以下の通りです。

• 一重引用符で囲まれた文字列を二重引用符で囲まれた文字列に変換する。
• セミコロンを追加する
• インデントをスペース2文字に変換する

左下には、オプションを表示するボタンがあります。先ほどの例では、Commonの-single quoteフラグ、またはJavaScriptの-no halfフラグを切り替えて、タブ幅を調整してみてください。

コンフィギュレーションオプション

これは、シンプルさと一貫性のために細部の制御を犠牲にすることを意味します。コードの細かい書式設定にこだわるのではなく、設定すれば忘れることができるように設計されています。(書式の細部まで制御できる別の方法として、eslintを試してみてください)。

しかし、いくつかの決定は、コードの外観だけでなく、機能的な影響を与えることも認識しています。いくつかのオプションは（レガシーな目的のものも含めて）まだ利用可能なので、Prettierをデフォルトで使用している場合でも、少なくともそれらが何をするものであるかは知っておく必要があります。

プリティオプションを管理する最良の方法は、設定ファイルに保存することです。整理の仕方はいろいろありますが、まず、ローカルのプロジェクトディレクトリに.prettierrc.jsonというファイルを作成します。これは、例えば標準的なJSONオブジェクトでサポートされている任意のオプションを含むことができます。

{ "tabWidth": 8}

Prettierは、コマンドラインから実行しても、サポートされているテキストエディタから実行しても、同じ設定ファイルを読み込みます。

基本的なインストールとコマンドラインツール

yarnやnpmを使えば、簡単にインストールできるはずです。

$ yarn global add prettier

npmの場合。

$ npm install --global prettier

Prettierをグローバルにインストールすると、入力できるようになるはずです。

$ prettier

デフォルトでは、ツールがインストールされ、正しく動作していることを確認するためのヘルプテキスト画面が表示されます。

ドキュメントのクリアランス

ファイルを再フォーマットするには、次のようなコマンドを使用します。

$ prettier --write filename.js

これは元のファイルを上書きしてしまうので、通常は最も便利な方法です。あるいは、prettierにプロジェクト内の各ファイルを処理させたい場合もあります:.

$ prettier --write .

Prettierは、カレントディレクトリにあるすべてのファイルを実行し、認識したすべてのファイルをフォーマットします。

また、元のファイルを変更するのではなく、結果を標準出力に出力することも可能で、出力を別のファイルに保存したり、別の場所にリダイレクトしたりすることができます。

$ prettier test.js > test2.js

資料の確認

何も変更せずにコードのクリーン度に関するより良いレポートを得るには、単一または複数のファイル名で --check フラグを使用します。

$ prettier --check .

Prettierの設定によりますが、期待される形式に合致しない各ファイルに対して、1行の出力が得られます。

Checking formatting...[warn] .prettierrc[warn] .prettierrc.json[warn] Code style issues found in the above file(s). Forgot to run Prettier?

コマンドラインオプション

Prettierの標準オプションは、必要に応じてコマンドラインオプションとして使用することができます。以下は、-single quote フラグが出力に与える影響の例です。

$ prettier tmp.jsfunction example() { c***ole.log("hello, world");}$ prettier --single-quote tmp.jsfunction example() { c***ole.log('hello, world');}

ヘルプを求める

コマンドラインツールでは、--helpフラグにより、オプションに関する情報提供のヘルプが提供されます。

$ prettier --help trailing-comma--trailing-comma <es5|none|all> Print trailing commas wherever possible when multi-line.Valid opti***: es5 Trailing commas where valid in ES5 (objects, arrays, etc.) none No trailing commas. all Trailing commas wherever possible (including function arguments).Default: es5

テキストエディタの使用

Prettierをインストールした後は、すでに使用しているツールセットに応じて、さまざまなシーンで利用することができます。prettierは、一般的なアプリケーションのためのバインディングを提供しています。

崇高なテキスト

JsPrettierは、Prettierをエディタで利用できるようにする優れたテキストプラグインです。JsPrettierのインストール方法はいくつかありますが、Package Controlを使用する方法をお勧めします。Prettierがインストールされている必要がありますので、Sublime Textのコマンドパネルを開き、「Package Control:Install Package」を選択してください。

そして、「jsprettier」を検索して、インストールをクリックします。

JsPrettierをインストールすると、開いているファイルを右クリックでフォーマットすることができます。また、JsPrettierの設定からautou formatu onu saveの値をtrueに設定すると、Sublime Textとして保存する際に、JsPrettierが自動的に互換ファイルをクリアするようにすることができます。

アトム

AtomのインストールはSublime Textのインストールと非常に似ています。エディター内蔵のパッケージマネージャーを使って、より良いAtom:をインストールするだけです。

一度インストールすれば、ショートカットやメニュー項目でオンデマンドにファイルフォーマットができたり、Atomの設定でファイル保存時に自動的にPrettierを実行したりと、使い方はおなじみです。

ヴィム

Vimは非常に強力なコマンドラインベースのエディタであり、初心者には不向きです。vimできれいになるのはかなり複雑ですが、それでもいくつかのステップを踏むだけです。

mkdir -p ~/.vim/pack/plugins/startgit clone https://github.com/prettier/vim-prettier \ ~/.vim/pack/plugins/start/vim-prettier

必要なファイルをダウンロードするには、おそらく Git が最も簡単な方法でしょうが、vim をよりきれいにスタートディレクトリに置く方法であれば、どんな方法でも構いません。

一度インストールすると、viでファイルを保存する際にPrettierが自動的に実行されます。また、Prettierコマンドにより、いつでも手動で実行することができます。

のクリーンなファイルができあがります。

プロジェクトにprettierを組み込む

Prettierなどのコード整形プログラムを使用すると、より読みやすいコードベースを維持することができます。また、コーディングの際に、どのスタイルを使うかといった議論を避けることもできます。

最後に、gitフックを設定することで、プロジェクトのリポジトリにコミットする際に、コードが常にクリーンアップされるようにすることができます。各開発者は自分のコードを好きなようにフォーマットできますが、中心となるコピーは常にクリーンで一貫したものになります。