VisualStudioCodeでよりきれいにコードをフォーマットする方法

投稿日: 2022-10-23 2022-10-23
タグ: VS Code

序章

コードを一貫してフォーマットすることは困難ですが、最新の開発者ツールを使用すると、チームのコードベース全体で一貫性を自動的に維持できます。

この記事では、 Prettyer をセットアップして、 VSCodeとも呼ばれるVisualStudioCodeでコードを自動的にフォーマットします。

デモンストレーションの目的で、フォーマットするサンプルコードは次のとおりです。

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

コードのフォーマットに精通している場合は、いくつかの間違いに気付くかもしれません。

一重引用符と二重引用符の組み合わせ。
の最初のプロパティ person オブジェクトは独自の行にある必要があります。
関数内のコンソールステートメントはインデントする必要があります。
矢印関数のパラメーターを囲むオプションの括弧が好きな場合と嫌いな場合があります。

前提条件

このチュートリアルに従うには、 Visual StudioCodeをダウンロードしてインストールする必要があります。

Visual Studio CodeでPrettierを操作するには、拡張機能をインストールする必要があります。これを行うには、VSCodeの拡張パネルでPrettier –CodeFormatterを検索します。初めてインストールする場合は、次に示すアンインストールボタンの代わりにインストールボタンが表示されます。

ステップ1—ドキュメントのフォーマットコマンドを使用する

Prettier拡張機能をインストールすると、それを利用してコードをフォーマットできるようになります。まず、 FormatDocumentコマンドを使用して調べてみましょう。このコマンドは、フォーマットされた間隔、行の折り返し、および引用符とのコードの一貫性を高めます。

コマンドパレットを開くには、macOSでは COMMAND + SHIFT + P を使用し、Windowsでは CTRL + SHIFT +Pを使用します。

コマンドパレットで、 format 次に、ドキュメントのフォーマットを選択します。

次に、使用する形式を選択するように求められる場合があります。これを行うには、構成ボタンをクリックします。

次に、よりきれい-コードフォーマッターを選択します。

注：デフォルトの形式を選択するためのプロンプトが表示されない場合は、設定で手動で変更できます。 Editor：DefaultFormatterをに設定します esbenp.prettier-vscode.

これで、コードは間隔、行の折り返し、一貫した引用符でフォーマットされます。

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で設定を選択して、保存時にファイルが自動的にフォーマットされるようにすることができます。これにより、フォーマットされていないバージョン管理に対してコードがチェックされないようにすることもできます。

この設定を変更するには、を押します COMMAND + , macOSまたは CTRL + , Windowsで設定メニューを開きます。メニューが開いたら、 Editor：Format On Save を検索し、オプションがオンになっていることを確認します。

これを設定すると、通常どおりコードを記述でき、ファイルを保存すると自動的にフォーマットされます。

ステップ3—よりきれいな構成設定を変更する

Prettierはデフォルトで多くのことを行いますが、設定をカスタマイズすることもできます。

設定メニューを開きます。次に、Prettyerを検索します。これにより、変更可能なすべての設定が表示されます。

最も一般的な設定のいくつかを次に示します。

一重引用符-一重引用符と二重引用符のどちらかを選択します。
Semi-行末にセミコロンを含めるかどうかを選択します。
タブ幅-タブに挿入するスペースの数を指定します。

VS Codeに組み込まれている設定メニューを使用することの欠点は、チームの開発者間で一貫性が保証されないことです。

ステップ4—よりきれいな構成ファイルを作成する

VS Codeの設定を変更すると、他の誰かが自分のマシンでまったく異なる構成を使用する可能性があります。プロジェクトの構成ファイルを作成することにより、チーム全体で一貫したフォーマットを確立できます。

と呼ばれる新しいファイルを作成します .prettierrc.extension 次のいずれかの拡張機能を使用します。

yml
yaml
json
js
toml

JSONを使用した単純な構成ファイルの例を次に示します。

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

設定ファイルの詳細については、 PrettyDocsをご覧ください。これらのいずれかを作成してプロジェクトにチェックインした後、すべてのチームメンバーが同じフォーマットルールに従っていることを確認できます。

結論

一貫性のあるコードを持つことは良い習慣です。複数の共同作業者がいるプロジェクトで作業する場合に特に役立ちます。一連の構成について合意することは、コードの読みやすさと理解に役立ちます。コードのインデントなどの解決された問題に取り組むのではなく、困難な技術的問題の解決により多くの時間を費やすことができます。

Prettierは、コードフォーマットの一貫性を確保し、プロセスを自動化します。

getdocs

13036