Visual Studio Code（VSCode）は、TypeScript開発において非常に人気のある統合開発環境です。VSCodeを使用する際に、コードの整形は効率的でクリーンなコーディングに不可欠です。この記事では、TypeScriptのコード整形に焦点を当て、VSCodeのフォーマッターの使い方と設定方法について解説します。
TypeScript VSCode Formatterとは
VSCodeは、多くのプログラミング言語に対応したコードフォーマッターを搭載しています。コードフォーマッターは、コードのスタイルやフォーマットを統一するためのツールであり、コードの可読性を向上させるのに役立ちます。
TypeScriptの場合、VSCodeはデフォルトでTypeScript Language Serverを使用しています。このLanguage Serverには、コード整形機能も含まれており、自動的にコードを整形してくれます。
TypeScriptコードの自動整形
TypeScriptファイルを開いた状態で、以下の手順でコードを自動整形することができます。
- 全文を選択する：
Ctrl + A（Windows/Linux）またはCmd + A（Mac）を使用して、ファイル全体を選択します。 - コードを整形する：
Shift + Alt + F（Windows/Linux）またはShift + Option + F（Mac）を押して、選択したコードを整形します。
これにより、VSCodeはTypeScriptのコードを自動的に整形し、指定されたスタイルに基づいて配置されます。
フォーマッターの設定
VSCodeの設定を変更することで、TypeScriptコードのフォーマットルールをカスタマイズすることが可能です。設定は.vscode/settings.jsonファイルで管理されます。以下は、基本的な設定例です。
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": true
}
上記の例では、Prettierをデフォルトのフォーマッターとして設定し、TypeScriptにおいてもPrettierを使用するように指定しています。また、いくつかのフォーマットルールもカスタマイズしています。
これにより、VSCodeはTypeScriptコードをPrettierのルールに基づいて整形します。
TypeScriptのコード整形は、開発プロセスをスムーズにし、コードの品質を向上させる重要なステップです。VSCodeのフォーマッターをうまく活用して、効率的なTypeScript開発を行いましょう。