0. 対象読者
VSCode（開発用エディタ）でAuraコンポーネント、LWCコンポーネント、
Apexクラス・トリガー開発において、効率よくコーディングをしたい方に
向けた記事です。
1. 投稿の動機
コーディングにおいてインデントはとても重要です。
自分で見るときや、自分以外の人に見てもらうときにインデントがずれていると
コードがとっても見難いです。
Salesforce開発で使用される開発用エディタにVSCode（VisualStudioCode）
があります。
このVSCodeでは開発はもちろん、Salesforce開発用のプロジェクト、Aura、
LWC、Apex開発に必要なツール、テスト機能、デプロイ機能などが
備わっています。
このVSCode上では、Aura、LWC、Apexコードのインデントを自動で
フォーマットすることができる設定があります。
本記事では、その方法を説明していきます。
2. そもそもインデントとは？
インデントとは元々文章の先頭を字下げするという意味です。
wordでは文章の内容の変わったタイミングで段落の最初にスペースを空けますが、
あれがインデントにあたります。
htmlでも字下げすることをインデントと呼びますが、文章ではなくタグの頭を字下げ
します。
3. VSCodeの設定
以下の手順で説明していきます。
3 - 1. 拡張機能のインストール
3 - 2. .prettierrcの設定
3 - 3. package.jsonのインストール
3 - 4. settings.jsonの設定
3 - 5. デフォルトのタブサイズを変更する
※VSCodeのインストール方法については説明しません。
ダウンロードできるサイトだけ紹介しておきます。
3 - 1. 拡張機能のインストール
Extensionsで"Prettier"を検索し、VSCodeの拡張機能"Prettier - Code formatter"をインストールします。
※"Salesforce Extension Pack (Expanded)"のインストールがされているのであれば
ステップ3 - 1 は不要です。
3 - 2. .prettierrcの設定
プロジェクト直下に".prettierrc"ファイルを作成し、下記内容を記述します。
{
"trailingComma": "none",
"singleQuote": true,
"overrides": [
{
"files": "**/lwc/**/*.html",
"options": {
"tabWidth": 2,
"parser": "lwc"
}
},
{
"files": "**/*.{cls,trigger,apex}",
"options": {
"apexInsertFinalNewline": true,
"printWidth": 140,
"tabWidth": 4
}
},
{
"files": "*.{cmp,page,component}",
"options": {
"parser": "html",
"tabWidth": 2
}
}
]
}
3 - 3. package.jsonのインストール
以下のコマンドを実行し、"package.json"をダウンロードします。
$ npm install
※npmコマンドを使用するにはNode.jsのインストールが必要です。
サイトからインストーラをダウンロードし、Node.jsをインストールしてください。
3 - 4. settings.jsonの設定
"Ctrl + Shift + P"を押下してコマンドパレット開き、"settings.json"を入力し、
"Preferences: Open Workspace Settings (JSON)"を開きます。
下記内容を追記して保存します。
"editor.formatOnSave": true,
"prettier.tabWidth": 4,
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
},
"files.associations": {
"*.html": "html"
},
3 - 5. デフォルトのタブサイズを変更する
VSCodeのデフォルトのタブサイズは"4"で設定されています。
プロジェクトによりますが、基本的にHTMLやJSはタブサイズを"2"にするのが
推奨されています。
なので、デフォルトのタブサイズの変更を以下の手順に従って実施します。
① VSCodeのWindowの左下にある設定アイコンをクリックして、
Setting（設定）をクリックします。
② 検索ボックスに"tab size"と入力し候補を絞り込みます。
"Editor: Tab Size (Also modified elsewhere)"の設定値を"2"に変更します。
③ 変更完了後、設定ファイルを閉じます。
4. 自動成型フォーマットを試す
プロジェクトでAuraバンドル、LWCバンドルまたはApexクラスを作成し、コーディングを実施します。
保存時に自動成型されていれば設定は完了です。
最後に
このように設定することで、コードの保存時にフォーマットを自動成型してくれる設定をすることができます。
その他（個人的に）おすすめの拡張機能があるので紹介します。
使ってみてください！
・ESLint：コードで間違った記述があると指摘されます。
・indent-rainbow：インデントごとに色が付きます。
・Material Icon Thema：拡張子ごとにファイルのアイコンが変わります。
・Japanese Language Pack for Visual Studio Code
：VSCodeの表記が日本語で表示されるようになります。
