ツールのインストール

SalesforceCLIインストール
Visual Studio Codeインストール
Salesforce公式のVisual Studio Codeの拡張機能インストール
- Salesforce Extension Pack (Expanded)
その他おすすめのVisual Studio Codeの拡張機能
- Code Spell Checker：タイポの疑いがある語を強調表示する。
- Error Lens：エラー・警告・ヒントをエディタ上に表示する
- Git Graph：Gitツリーを表示
- GitLens：GitのGUIツール
- Salesforce Package.xml Generator：Package.xmlをGUIで作成する
- Remove Final Newlines：Prettierで強制的につくファイル末尾の空行を削除する¹
- Render Line Endings:改行コードをエディタに表示。デフォルトと異なる改行コードの時、強調表示することも可能。
Gitインストール
npmインストール
JDKのインストールと設定：Salesforce Apex拡張機能のApex言語サーバの利用や、prettierのApexプラグインを使用するのに必要。

SFDCのプロジェクトフォルダ作成

新しくプロジェクトフォルダを作成する場合は、ターミナルから下記コマンドを実行する。

cd プロジェクトフォルダを作成するパス
sf project generate -n プロジェクトフォルダ名 --manifest

git

プロジェクトフォルダでgit init
gitignoreに.pmdCacheを追加
初回コミットgit commit -m コミットコメント

※リモートリポジトリを新規に作成する場合は下記を実行。

githubリポジトリ作成

githubにプッシュする

git add -A
git commit -m "init"
git remote add origin リモートリポジトリのURL
git push -u origin main

Visual Studio Code 設定

推奨の拡張機能を追加（チームで開発する場合）

.vscode/extensions.jsonに開発メンバー全員に導入してもらう拡張機能を設定する。

推奨の拡張機能のサンプル

{
  "recommendations": [
    "salesforce.salesforcedx-vscode",
    "redhat.vscode-xml",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "financialforce.lana",
    "salesforce.salesforcedx-vscode-expanded",
    "streetsidesoftware.code-spell-checker",
    "usernamehw.errorlens",
    "DoCode.vscode-remove-final-newlines",
    "medo64.render-crlf"
  ]
}

ワークスペースの設定を追加

.vscode/settings.jsonに設定を追加。

ワークスペースの設定のサンプル

{
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "**/.sfdx": true
  },
  "js/ts.implicitProjectConfig.experimentalDecorators": true,

  // 静的解析（プロジェクトでapexPMDを使用するときは追加
  "apexPMD.runOnFileOpen": true,
  "apexPMD.runOnFileSave": true,
  "apexPMD.enableCache": true,
  "apexPMD.rulesets": ["path/to/rulesets.xml"],

  // フォーマッター
  "editor.formatOnSave": false,
  // Visualforceでprettierを使う場合は↓が必要
  "prettier.documentSelectors": ["**/pages/*.page", "**/components/*.component"],

  // 改行コード
  "code-eol.highlightNonDefault": true,

  // ファイル別設定（プロジェクトの開発規約にあわせて設定を行う）
  // "[apex]", "[html]", "[javascript]", "[json]", "[visualforce]"
  "[apex]": {
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
    "editor.tabSize": 4,
    "files.trimTrailingWhitespace": true,
    "files.trimFinalNewlines": true,
    "files.encoding": "utf8",
    "files.eol": "\n",
    // フォーマッターを使用する場合は下記も設定する
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[html]": {
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.trimTrailingWhitespace": true,
    "files.trimFinalNewlines": true,
    "files.removeFinalNewlines": true,
    "files.encoding": "utf8",
    "files.eol": "\n",
    // フォーマッターを使用する場合は下記も設定する
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
    "editor.tabSize": 4,
    "files.trimFinalNewlines": true,
    "files.removeFinalNewlines": true,
    "files.encoding": "utf8",
    "files.eol": "\n",
    // フォーマッターを使用する場合は下記も設定する
    "editor.formatOnSave": true
  },
  "[json]": {
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
    "editor.tabSize": 2
  },
  "[visualforce]": {
    "editor.detectIndentation": false,
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "files.trimFinalNewlines": true,
    "files.removeFinalNewlines": true,
    "files.encoding": "utf8",
    "files.eol": "\n",
    // フォーマッターを使用する場合は下記も設定する
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

experimentalDecoratorsをtrueにすることで、 LWCのエラー「デコレーターの実験的なサポートは将来のリリースで変更になる可能性がある機能です。'tsconfig' または 'jsconfig' に 'experimentalDecorators' オプションを設定してこの警告を削除します。」を非表示にする。

開発ツールをインストール

ツールのインストール

# package.jsonを基に開発に必要なツールをインストールする
npm install

フォーマッターの設定

.prettierrcにapexのルールを追加する。

フォーマッターの設定のサンプル

{
  "printWidth": 120,
  "trailingComma": "none",
  "plugins": ["prettier-plugin-apex", "@prettier/plugin-xml"],
  "overrides": [
    {
      "files": "**/lwc/**/*.html",
      "options": {
        "parser": "lwc",
        "tabWidth": 4
      }
    },
    {
      "files": "**/lwc/**/*.js",
      "options": {
        "tabWidth": 4
      }
    },
    {
      "files": "*.{cmp,page,component}",
      "options": {
        "parser": "html",
        "tabWidth": 4
      }
    },
    {
      "files": ["*.cls", "*.trigger"],
      "options": {
        "tabWidth": 4,
        "apexInsertFinalNewline": false
      }
    }
  ]
}

spell checkerの設定ファイルを追加

Visual Studio Codeの拡張機能「Spell Checker」を使用していて、チームで除外キーワードのリストがある場合、こちらの手順を参考に設定を行う。

huskyの設定

huskyを使用すると、特定のGitアクションが発生したときにスクリプトを実行することができる。Salesforceのデフォルトのプロジェクトにはすでにpre-commitが作成されているので、npm installを実行するだけで使用することが可能。

.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npm run precommit

プッシュ前以外にも処理を行いたい場合は、フックを作成する（huskyが対応しているフック）。
npx husky add .husky/pre-push

pre-commitでステージされたファイルごとに処理を行いたい場合は、package.jsonのlint-statedに処理を定義する。

package.jsonの例

"lint-staged": {
  "**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}": [
    "prettier --check"
  ],
  "**/{aura,lwc}/**": [
    "eslint"
  ],
  "**/lwc/**": [
    "sfdx-lwc-jest -- --bail --findRelatedTests"
  ]
  "**/*.{cls,trigger}": [
    "sfdx scanner:run --engine pmd --pmdconfig pmd/rule.xml --severity-threshold 2 -t"
  ]
},

sfdx sccannerについてはこちら。

静的解析ツールの設定

ApexPMDの設定を行う。ApexPMDは拡張機能「Salesforce Extension Pack (Expanded)」に含まれている。
[Apex PMD] VSCodeでApexの静的解析を行う

package.xmlの作成

gitで管理する資材、VSCodeで扱う資材をpackage.xmlに追加する。あらかじめ組織に接続しておく必要がある。
Visual Studio Codeの拡張機能「Salesforce Package.xml Generator」をインストールしている場合は、コントロールパネルからSFDX Package.xml Generator: Choose Metadata Components command.を選択し、資材を選択して「UPDATE PACKAGE.XML」ボタンをクリックする。

Appendix: Salesforce環境設定(Developer Editionを使用する場合)

Developerエディション払い出し
https://developer.salesforce.com/jpblogs/2016/04/developer-edition-signup/
Dev Hub有効化
[設定] - [Dev Hub]
ロック解除済みパッケージの有効化
[設定] - [Dev Hub]
SalesforceCLIに組織を認証・デフォルトのDevHubとして認証
sf org login web -a DevHub組織のエイリアス -d -s
ScratchOrgを作成
sf force:org:create -a スクラッチ組織のエイリアス -f config/project-scratch-def.json -s

Appendix: ブラウザの設定

Chrome DevTools を使用したデバッグ - Salesforce Lightning Component Library

Appendix: LWCに型判定を使用する

LWCにTypescriptの型判定を使用する場合は、force-app/main/default/lwc/jsconfig.jsonに下記を追加したうえで、プロジェクトルートにtypingsフォルダを作成し、型定義ファイルを追加します。

jsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true
    },
    "include": [
        "**/*",
        "../../../../.sfdx/typings/lwc/**/*.d.ts",
+       "../../../../typings/**/*.d.ts"
    ],
    "paths": {
        "c/*": [
            "*"
        ]
    },
    "typeAcquisition": {
        "include": [
            "jest"
        ]
    }
}

型定義ファイルのサンプル

typings/cmn.d.ts

/**
 * {@link Handle Errors in Lightning Data Service | https://developer.salesforce.com/docs/platform/lwc/guide/data-error.html}
 */
interface FetchResponse {
  body: object | object[]
  ok: boolean
  status: number
  statusText: string
}

また、jsconfig.jsonは.gitignoreにデフォルトで追加されているため、上記設定をプロジェクトメンバーで共有したい場合は忘れずに.gitignoreから**/lwc/jsconfig.jsonを削除する。

参考

SalesforceではHTML、JavaScript、Apexでファイル末尾の空行が削除される。そのためPrettierで強制的に追加される空行の対応を行わないと、組織からメタデータを取得するたびに差分が発生してしまう。 ↩