PrettierVSCodeプラグインでITスクリプティングを強化する

より読みやすく包括的に見える必要がある多くのコード/スクリプトを記述していますか？スクリプトを書くことはすでに一握りのタスクなので、苦痛を長引かせないでください。主にVisualStudioCode（VSCode）を使用している場合は、PrettierVSCodeプラグインを試してみてください。

このチュートリアルでは、Prettier VSCodeプラグインを利用して、読み取り可能で「よりきれいな」スクリプトを作成する方法を学習します。

他の人が楽に読むことができるスクリプトに飛び込んで書いてください！

前提条件

このチュートリアルは、実践的なデモンストレーションになります。タグを付けたい場合は、次のものがあることを確認してください。

VS Codeをサポートするオペレーティングシステム–このチュートリアルではWindows10を使用します。

PrettierVSCodeプラグインのインストール

きれいは、多数のプログラミング言語をサポートするコードフォーマッタです。スクリプトとコードのフォーマットは、特にチームで作業する場合は複雑になる可能性があります。 Prettierは、コードのフォーマットを自動化することで、その苦労を取り除きます。

名前の付いたプロジェクトフォルダを作成します きれい、これは任意です、そのフォルダをVSCodeで開きます。

Ctrl + Shift + Xを押すか、の拡張機能ボタンをクリックしますアクティビティバー（左）、以下に示すように、VSCodeの拡張機能マーケットプレイスにアクセスします。 Prettierを検索し、[インストール]ボタンをクリックしてPrettierプラグインをインストールします。

または、Ctrl+Pを押してアクセスしますコマンドパレット以下のコマンドを実行して、PrettierVSCodeプラグインをインストールします。

ext install esbenp.prettier-vscode

インストールすると、次のような出力が得られます。

Prettierプラグインのテスト

Prettierプラグインがインストールされたので、Prettierが提供するものを確認します。ひどいフォーマットでスクリプトを作成し、Prettierを使用してフォーマットを修正します。

1.に新しいファイルを作成します きれい フォルダ。ファイルには好きな名前を付けることができますが、このチュートリアルでは、 script.js。

VS Codeは他の多くのプログラミング言語をサポートしているので、好みに合った言語を選択してください。

2.スクリプト上（script.js）、HelloWorldメッセージをgreetings変数に格納する次のコードを追加します。

以下のコードは、意図的に次のように記述されています。

ザ greetings 変数は以下です const キーワード。

等号の間のスペースが多すぎます（=）そしてその Hello World ストリング。

文字列は、二重引用符ではなく一重引用符で囲まれています。

最後にセミコロン（;）はありません。

const   
    greetings="Hello World"

VS Codeのウィンドウの右下隅を確認すると、以下に示すように、Prettierプラグインが有効になっていることがわかります。

3.次に、空白スペースを右クリックして、コンテキストメニューで[ドキュメントの書式設定]を選択すると、コマンドパレットが開きます。

4.最後に、リストから[Prettier]を選択して、コードを修正します。

以下に示すように、魔法が起こるのを見てください。

Prettierは、すべてのコードを1行に保持します。

一重引用符を二重引用符に変更します。

そして最後にセミコロンを追加しました。

保存時のコード形式の修正

Prettierを手動で使用してコードの形式を修正する方法を見てきましたが、これは長期的には苦労する可能性があります。その代わりに、保存時にフォーマット機能を実装します。この機能は、コードに変更を保存するとすぐに、コードをフォーマットするようにPrettierに自動的に指示します。

保存時にフォーマット機能を有効にするには：

1.上部のナビゲーションバーで[ファイル]をクリックし、[設定]にカーソルを合わせ、[設定]を選択して（またはCtrl +キーを押して）VSCodeの設定にアクセスします。

2.次に、検索ボックスで「保存時にフォーマット」を検索します。以下に示すように、[保存時にフォーマット]オプションのチェックボックスをオンにして、[保存時にフォーマット]機能を有効にします。

3. Default Formatterを検索し、ドロップダウンフィールドをクリックします。リストからPrettier– Code formatterオプションを探して選択し、Prettierをデフォルトのコードフォーマッターとして設定します。

4.に戻ります script.js ファイルを作成し、コードを次のように変更します。もちろん、フォーマットが不十分なものです。

const   
    ATA =   'Automate all the things'

5.最後に、Ctrl+Sキーを押して変更を保存します。保存時のフォーマット機能を有効にすると、Prettierは以下のようにフォーマットを修正します。

Prettierの基本構成の設定

すでにPrettierをデフォルトのコードフォーマッターとして設定しており、必要に応じてPrettierを構成する準備ができています。 VS Codeを使用すると、多くのPrettier構成を構成できますが、ITスクリプトを強化できる構成に焦点を当てます。

1. VS Code設定ページで、よりきれいな引用符を検索し、以下に示すように、単一引用符オプションを有効にします。デフォルトでは、Prettierは二重引用符を使用するように設定されています。一重引用符オプションを有効にすると、スクリプトに一重引用符を使用するようにPrettierが設定されます。

2.次に、Prettierタブを検索し、スペースの数を設定します（4）Prettierは、[タブ幅]フィールドでスクリプトをインデントするために使用します。

タブ幅を設定した後、[タブ付きのインデックス行]ボックスにチェックマークを付けます。このオプションは、Tabキーを押したときにスクリプトをインデントするようにPrettierに指示します。

3.よりきれいなセミコロンを検索し、[セミ]オプションのチェックを外します。デフォルトでは、Prettierはコードのすべての行の最後にセミコロンを追加します。このオプションを無効にすると、Prettierにセミコロンを追加しないように指示されます。

4.最後に、よりきれいな印刷幅を検索し、各行に含める最大文字数（80）を設定します。このオプションを有効にすると、Prettierは、スクリプトに影響を与えずに文字数を制限するのが最善です。

PrettierCLIを使用したコードのフォーマット

VSCodeのGUIを介したコード形式の修正は正常に機能します。しかし、コマンドライン環境の方が好みの場合は、ご馳走になります。 VS Codeでは、PrettierCLIでコマンドを実行することもできます。

1.キーボードのCtrl+`を押して、VSCodeの統合ターミナルを開きます。お好みのターミナルシェルを選択してください OSによって異なります。

2.次に、以下のコマンドを実行して、プロジェクトにprettierをインストールします。

npm init --y # Creates a Package.json
npm i prettier # Installs the Prettier CLI

デフォルトでは、VS Codeはインストールされているすべての拡張機能を自動的に更新するため、拡張機能が古くなることを心配する必要はありません。ただし、何らかの理由でPrettierに更新が必要な場合は、npmiprettierコマンドを再実行してください。

3.コードを作成します script.js 以下のように、ファイルが再び見栄えが悪くなります。保存時にフォーマット機能を無効にしてから、変更を保存します。

const 
    ATA =     "Fixing code via Prettier CLI"

4.ここで、 npx prettier 以下のコマンドを使用して、作業ディレクトリ（。）内のすべてのファイルのコードをフォーマットします。

以下は、PrettierがPrettierのコードスタイルについてスキャンしたファイルのリストです。

5.最後に、以下のコマンドを実行します。 -小切手作業ディレクトリ（。）をスキャンして、すべてのファイルのコードが完全にPrettierでフォーマットされているかどうかを確認するフラグ。

チェックフラグを使用すると、以下に示すものと同様の出力が得られます。

PrettierCLIを介したPrettierプリファレンスの設定

CLIを介してコードをフォーマットするのは楽しかったですか？ Prettier CLIを使用すると、設定に基づいてPrettierを構成するなど、より多くのことを実行できます。

Prettier CLIは、プロジェクトのディレクトリにある構成ファイルを使用して、設定を構成します。そしてもっときれいいくつかの構成ファイルをサポートします、ただし、このチュートリアルでは、 .prettierrc と .prettierrc.js。

1.プロジェクトディレクトリに次の名前のファイルを作成します .prettierrc、および以下のコードをファイルに追加します。これにより、Prettierは一重引用符を使用し、セミコロンを破棄するように指示されます。

コードをフォーマットするとき、Prettierは構成ファイルを検索します（.prettierrc）そして、構成を使用してスクリプトをフォーマットします。

.prettierrcファイルはJSONまたはYAML構文で記述できますが、このチュートリアルではJSON構文を使用します。

{
  "singleQuote": true,
  "semi": false
}

2.次に、以下のコマンドを実行して、作業ディレクトリ内のすべてのファイルのコードをフォーマットします。

このコマンドは、「PrettierCLIを使用したコードのフォーマット」セクションのステップ4のコマンドのように機能します。ただし、今回は、Prettierが設定した構成を使用します .prettierrc ファイル。

フォーマット後、文字列が一重引用符で囲まれ、セミコロンが削除されていることがわかります。

.prettierrc構成ファイルに対するコードのフォーマット — に対するフォーマットコード *.prettierrc* 構成ファイル

3.という名前のファイルを作成します .prettierrc.js、次のJavaScriptコードを追加します。

以下のコードは、各行に含める必要のある最大単語数と、タブを構成するスペースの数を構成します。

.prettierrc.jsは、.prettierrcファイルの代替にすぎないことに注意してください。プロジェクトフォルダには、どちらかのファイルのみを含めることができます。つまり、どちらのファイルを使用するかは、構成形式の設定の問題です。

module.exports = {
    printWidth: 12, // Setting the max word for each line to 12.
    tabWidth: 4, // Setting the number of spaces that make up a tab to 4 spaces.
};

.prettierrc.jsファイル 多くのオプションをサポート Prettier用に設定できます。

4.最後に、以下のnpx prettierコマンドを再実行して、構成ファイルをテストします。

フォーマットすると、最大行幅セットが12（const ATA =）でインデントされているため、文字列が新しい行にジャンプしていることがわかります。

しかし、なぜ文字列は1行でそのまま残っているのですか？前述のように、Prettierは1行あたりの文字数を制限し、スクリプトを台無しにします。

PrettierVSCodeプラグインを使用してコードを修正しました。おめでとうございます。以下の結果は、コードを修正するのではなく見栄えを悪くしますが、あなたはその考えを理解します。

.prettierrc.js構成ファイルに対するコードのフォーマット — に対するフォーマットコード *.prettierrc.js* 構成ファイル

結論

このチュートリアルでは、Prettierのセットアップと構成について学習したので、クリーンでほとんどエラーのないスクリプトを取得することを心配する必要はありません。この時点で、スクリプトをレベルアップするための好みに基づいて、よりきれいに構成できます。

やってみませんか ESLintとPrettierの統合、ITスクリプティングを絶妙に改善しますか？

The post PrettierVSCodeプラグインでITスクリプティングを強化する appeared first on Gamingsym Japan.

Underground News