導入
コードのフォーマットは常に課題ですが、最新の開発ツールを使えば、チームのコードベース全体の一貫性を自動的に維持することが可能です。この記事では、Visual Studio Code（VS Code）でPrettierを使ってコードを自動的にフォーマットする方法について説明します。.
デモンストレーションのために、フォーマットするコードの例を次に示します。
const name = "James";
const person ={first: name
}
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}
sayHelloLinting('James');コードのフォーマットに精通している場合は、いくつかの手順が間違っていることに気付くかもしれません。
- 一重引用符と二重引用符の組み合わせ。.
- Person オブジェクトの最初のプロパティはその行にある必要があります。.
- 関数内の Console ステートメントはインデントする必要があります。.
- 矢印関数のパラメータを囲むオプションの括弧は、必要に応じて使用できます。.
前提条件
- Visual Studio Code をダウンロードしてインストールします。.
- Visual Studio CodeでPrettierを使用するには、プラグインをインストールする必要があります。VS Codeのプラグインパネルで「Prettier – Code Formatter」を検索してください。初めてインストールする場合は、下図のような「アンインストール」ボタンではなく「インストール」ボタンが表示されます。
ステップ1 – ドキュメントのフォーマットコマンドを使用する
Prettierプラグインをインストールすれば、コードのフォーマットに使えるようになります。まずは「ドキュメントのフォーマット」コマンドの使い方を見てみましょう。このコマンドを使うと、コードのスペース、行の折り返し、引用符などのフォーマット設定がより統一されます。.
コマンドパレットを開くには、 コマンド + シフト + P macOSまたは Ctrl + Shift + P Windows で使用します。.
コマンドパレットで「Format」を検索し、 ドキュメント形式 選択します。.
使用するフォーマットを選択するように求められる場合があります。これを行うには、「設定」ボタンをクリックします。
次に、「Prettier – Code Formatter」を選択します。.
これで、コードはスペース、行の折り返し、および固定引用符を使用してフォーマットされました。
const name = "James";
const person = { first: name };
console.log(person);
const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`);
};
sayHelloLinting("James");これはCSSファイルにも適用できます。一貫性のないインデント、括弧、改行、セミコロンを含むコードを、適切にフォーマットされたコードに変換できます。例えば：
body {color: red;
}
h1 {
color: purple;
font-size: 24px
}形式は次のようになります。
body {
color: red;
}
h1 {
color: purple;
font-size: 24px;
}このコマンドを確認したので、これを自動的に実行する方法を見てみましょう。.
ステップ2 – 保存時にコードをフォーマットする
これまでは、コードをフォーマットするには手動でコマンドを実行する必要がありました。このプロセスを自動化するには、VS Code で設定を選択して、保存時にファイルを自動的にフォーマットすることができます。これにより、フォーマットされていないコードがバージョン管理にチェックインされることがなくなります。.
この設定を変更するには、 コマンド+ macOSまたは Ctrl + Windowsで設定メニューを開くには、を押します。メニューが開いたら、 エディター: 保存時にフォーマット 次のオプションを検索してチェックされていることを確認します:
一度設定すれば、通常どおりコードを記述でき、ファイルを保存すると自動的にフォーマットされます。.
ステップ3 – Prettierの設定を変更する
Prettier はデフォルトで多くの作業を自動的に行いますが、設定をカスタマイズすることもできます。.
設定メニューを開きます。次に、Prettierを検索します。すると、変更可能なすべての設定が表示されます。
最も一般的な設定は次のとおりです。
- 一重引用符 – 一重引用符と二重引用符を選択します。.
- Semi – 行末にセミコロンを付けるかどうかを選択します。.
- タブの幅 – タブに挿入するスペースの数を指定します。.
VS Code の組み込み設定メニューを使用することの欠点は、チーム内の開発者間の一貫性が保証されないことです。.
ステップ4 – より良い設定ファイルを作成する
VS Code の設定を変更すると、他のユーザーのマシンでは全く異なる設定が使用される可能性があります。プロジェクト用の設定ファイルを作成することで、チーム全体で一貫したフォーマットを作成できます。.
新しいファイル prettierrc.拡張機能 次のいずれかの拡張子を使用して作成します。
ymlヤムルJSONjsトムル
以下は JSON を使用した簡単な構成ファイルの例です。
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}設定ファイルの詳細については、より分かりやすいドキュメントをご覧ください。ドキュメントを作成してプロジェクトで確認すれば、チーム全員が同じフォーマットルールに従っていることを確認できます。.
導入
コードの一貫性を保つことは良い習慣です。特に、複数の共同作業者とプロジェクトに取り組む際に役立ちます。設定について合意しておくことで、コードの可読性と理解度が向上します。コードのインデントといった既に解決済みの問題に悩むのではなく、より高度な技術的問題の解決に多くの時間を費やすことができます。.
