My Best of Salesforce IDE on Windows

# 最終更新日

2019.05.20 :writing_hand: 自宅にて
2019.05.12 :point_up_2: 自宅にて
2019.05.09 :point_up_2: 旅行中、沖縄県南城市にて
※変更内容は変更通知で送りますので、ストックボタンをクリックしておいてください。

# はじめに

こんにちは。[@takahito0508](https://twitter.com/takahito0508) です。本エントリーは、最終更新日時点までにおける、私の独自調査によるものです。Salesforceの開発ツールの多くはオープンソースであり、最新の情報が目まぐるしく変化します。ついこの間までこれ使ってればよかったのにまた変わるの！？なんてことがよく起こります。

本エントリーの情報もすぐに古くなる可能性があります。なるべく更新していきたいとは思いますが、まずはこの点ご了承ください。

# Mac or Win?

まずは冒頭から本エントリーの本質にかかわることなのですが、普段みなさんがSalesforce開発をするときに使っている端末は何でしょうか？

MacかWindowsかのどちらかであるという前提で進めます。（それ以外のかたは、すみません。）どちらを使っても良いのであれば、私はMacがいいです。もしMacを使ったことのない方がいたら、Trailheadのハンズオンなど、ぜひプライベートではMacを使ってみてください。とにかくやるべきことがシンプルです。IDE構築時にハマることがほとんどありませんし、作業中も楽です。（あくまでも個人的見解です。）

でも、諸事情でWindowsを使わざるを得ないときがあるじゃないですか。特にSIerやSESのあなたなら、心当たりありますよね？そんなあなたのために（というか私のために、）Windows版のIDEのベストはなにかについて整理してみました。

# My Best of Salesforce IDE on Windows

考え抜いた末、以下の組み合わせをご提案します。個々のツールのインストール手順はググればわかるので割愛します。（というか、手順がコロコロ変わるので都度ググったほうが賢明です。）

- Git
- Git Bash （:point_left: .shファイルを実行するプログラムはGit Bashを指定する。）
- Java SE Development Kit （:point_left: JAVA_HOMEに指定してPATHを通す。）
- Salesforce CLI
- Visual Studio Code （:point_left: テーマは [Codey Midnight](https://github.com/zaynelt/codey-midnight#install-the-codey-midnight-theme-for-vs-code) がおすすめ。）
- Visual Studio Code 拡張機能
    - Bracket Pair Colorizer
    - Git History
    - GitLens
    - GitHub Pull Requests
    - IntelliSense for CSS Class names in HTML
    - JSON Tools
    - Live HTML Previewer
    - Output Colorizer
    - Path Autocomplete 
    - Prettier （:point_left: Apexには対応していないので、[Prettier Apex](https://github.com/dangmai/prettier-plugin-apex) を併用する。）
    - Rainbow CSV
    - Salesforce Extension Pack
        - Apex
        - Apex Interactive Debugger
        - Apex Replay Debugger
        - Aura Components
        - ESLint
        - Lightning Web Components
        - Salesforce CLI Integration
        - Visualforce
    - Todo Tree
    - Trailing Spaces
    - VS Live Share
    - Whitespace+
    - XML
- PowerShell
- PMD Apex
- Node
- Python 2 （:point_left: Nodeでエラーが出る場合に必要。）
- windows-build-tools （:point_left: Nodeでエラーが出る場合に必要。）

※2019.05.24 開催の「[てきめし - Salesforceエンジニアに聞く、DX時代の開発環境、周辺ツールとエンジニアの働き方](https://tekimeshi.connpass.com/event/125627/)」にて少しデモを交えて補足させていただきます。

## Q&A

### なぜWSL（Windows Subsystem for Linux）を使わないのですか？

ぜひ使いたいです。でも現時点でSalesforce CLIがサポートしているのは、コマンドプロンプトとPowerShellのみだからです。今後を待ちましょう。

> **参考:** [公式サイト](https://developer.salesforce.com/docs/atlas.ja-jp.sfdx_setup.meta/sfdx_setup/sfdx_setup_install_cli.htm)
>> Salesforce CLI は、ネイティブ Windows コマンドプロンプト (cmd.exe) および Microsoft Powershell 内で最適に動作します。Windows 10 Subsystem for Linux、cygwin、MinGW などの Linux ターミナルエミュレータはバグのサポートが制限されているため、これらのエミュレータで Salesforce CLI を使用することはお勧めしません。

### 各種ツールについて、バージョンの指定はありますか？

Javaは8か11を使ってください。Pythonは2を使ってください。
そのほかにはありませんので最新版を使ってください。

> **参考:** [公式サイト](https://forcedotcom.github.io/salesforcedx-vscode/articles/getting-started/install)
>> You need to have either version 8 or version 11 of the JDK installed.

### ディレクトリ構造の指定はありますか?

サンプルはこちらです。

```
.
│  .eslintignore
│  .eslintrc.json
│  .forceignore
│  .gitignore
│  .prettierignore
│  .prettierrc
│  initGitConfig.sh
│  jest.config.js
│  LICENSE
│  orgInit.sh
│  package-lock.json
│  package.json
│  pmdOutput.log
│  pmdResult.html
│  README.md
│  runPMD.sh
│  runRebuid.sh
│  sfdx-project.json
├─.sfdx
├─.vscode
├─config
│    project-scratch-def.json
├─force-app
│  ├─main
│  │  ├─default
│  │  │  ├─classes
│  │  │  └─lwc
│  │  └─sample
│  │     ├─classes
│  │     └─lwc
│  └─test
│      └─jest-mocks
│          │  apex.js
│          └─lightning
│               navigation.js
│               platformShowToastEvent.js
└─node_modules
```

### VS Codeの設定ファイルの指定はありますか？

サンプルはこちらです。

```json:settings.json
{ 
  "editor.fontSize": 14,
  "editor.formatOnSave": true,
  "editor.minimap.enabled": false,
  "editor.mouseWheelZoom": true,
  "editor.renderWhitespace": "all",
  "editor.tabSize": 2,
  "files.trimTrailingWhitespace": true,
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.path": "C:\\tools\\Git\\bin\\git.exe",
  "salesforcedx-vscode-apex.enable-semantic-errors": false,
  "salesforcedx-vscode-apex.enable-sobject-refresh-on-startup": false,
  "salesforcedx-vscode-apex.java.home": "C:\\tools\\Java\\jdk-11.0.3",
  "salesforcedx-vscode-core.push-or-deploy-on-save.enabled": false,
  "salesforcedx-vscode-core.retrieve-test-code-coverage": true,
  "salesforcedx-vscode-core.show-cli-success-msg": false,
  "salesforcedx-vscode-lightning.activationMode": "autodetect",
  "salesforcedx-vscode-lightning.showLightningExplorer": true,
  "salesforcedx-vscode-core.telemetry.enabled": false,
  "terminal.integrated.shell.windows": "C:\\windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
  "workbench.colorTheme": "Codey Midnight",
  "workbench.startupEditor": "newUntitledFile",
  "[json]": { 
    "editor.defaultFormatter": "esbenp.prettier-vscode" 
  }, 
  "[jsonc]": { 
    "editor.defaultFormatter": "esbenp.prettier-vscode" 
  }, 
  "[html]": { 
    "editor.defaultFormatter": "esbenp.prettier-vscode" 
  }, 
  "[javascript]": { 
    "editor.defaultFormatter": "esbenp.prettier-vscode" 
  } 
} 
```

### Prettierの定義ファイルの指定はありますか？

サンプルはこちらです。

```json:.prettierrc
{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": false,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "overrides": [
    {
      "files": "**/lwc/**/*.html",
      "options": {"parser": "lwc"}
    },
    {
      "files": "*.{cmp,page,component}",
      "options": {"parser": "html"}
    }
  ]
}
```

### ESLintの定義ファイルの指定はありますか？

サンプルはこちらです。

```json:eslintrc.json
{
  "extends": "@salesforce/eslint-config-lwc/recommended"
}
```

### Whitespace+の設定ファイルの指定はありますか？

サンプルはこちらです。

```json:config.json
{ 
  "mode": "all", 
  "autoStart": true, 
  "refreshRate": 100, 
  "elements": [ 
    { 
      "name": "space", 
      "enabled": false, 
      "pattern": "\\s", 
      "style": { 
        "borderWidth": "1px", 
        "borderRadius": "2px", 
        "borderStyle": "solid", 
        "light": { 
          "backgroundColor": "rgba(58, 70, 101, 0.3)", 
          "borderColor": "rgba(58, 70, 101, 0.4)" 
        }, 
        "dark": { 
          "backgroundColor": "rgba(117, 141, 203, 0.3)", 
          "borderColor": "rgba(117, 141, 203, 0.4)" 
        } 
      } 
    }, 
    { 
      "name": "tab", 
      "enabled": true, 
      "pattern": "\\t", 
      "style": { 
        "borderWidth": "1px", 
        "borderRadius": "2px", 
        "borderStyle": "solid", 
        "light": { 
          "backgroundColor": "rgba(170, 53, 53, 0.3)", 
          "borderColor": "rgba(170, 53, 53, 0.4)" 
        }, 
        "dark": { 
          "backgroundColor": "rgba(223, 97, 97, 0.3)", 
          "borderColor": "rgba(223, 97, 97, 0.4)" 
        } 
      } 
    }, 
    { 
      "name": "newline", 
      "enabled": false, 
      "pattern": "\\n", 
      "style": { 
        "borderWidth": "1px", 
        "borderRadius": "2px", 
        "borderStyle": "solid", 
        "light": { 
          "borderColor": "rgba(38, 150, 38, 0.3)" 
        }, 
        "dark": { 
          "borderColor": "rgba(85, 215, 85, 0.4)" 
        } 
      } 
    }, 
    { 
      "name": "trailing", 
      "enabled": "unlessCursorAtEndOfPattern",
      "pattern": "[^\\S\\r\\n]+$", 
      "style": { 
        "borderWidth": "1px", 
        "borderRadius": "2px", 
        "borderStyle": "solid", 
        "light": { 
          "backgroundColor": "rgba(58, 70, 101, 0.3)", 
          "borderColor": "rgba(58, 70, 101, 0.4)" 
        }, 
        "dark": { 
          "backgroundColor": "rgba(117, 141, 203, 0.3)", 
          "borderColor": "rgba(117, 141, 203, 0.4)" 
        } 
      } 
    } 
  ] 
} 
```

### Nodeの設定ファイルの指定はありますか？

サンプルはこちらです。

```json:package.json
{
  "name": "sample",
  "version": "0.0.1",
  "scripts": {
    "rebuild": "rm -rf node_modules && rm package-lock.json && npm cache clean --force && rm -rf ~/.npm && npm install",
    "lint": "npm run lint:lwc && npm run lint:aura",
    "lint:lwc": "eslint **/lwc/**",
    "lint:aura": "sfdx force:lightning:lint force-app/main/**/aura --exit",
    "test": "npm run lint && npm run test:unit && npm run pmd",
    "test:unit": "lwc-jest",
    "test:unit:watch": "lwc-jest --watch",
    "test:unit:debug": "lwc-jest --debug",
    "pmd": "runPMD.sh",
    "prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger}\"",
    "prettier:verify": "prettier --list-different '**/*.{cls,cmp,component,css,html,js,json,md,page,trigger}'"
  },
  "dependencies": {},
  "devDependencies": {
    "@salesforce/eslint-config-lwc": "^0.3.0",
    "@salesforce/lwc-jest": "^0.4.12",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.1.0",
    "husky": "^1.3.1",
    "js-yaml": "^3.13.1",
    "lint-staged": "^8.1.5",
    "prettier": "^1.17.0",
    "prettier-plugin-apex": "^1.0.0-alpha.9",
    "semver": "^6.0.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && npm test"
    }
  },
  "lint-staged": {
    "**/*.{cls,cmp,component,css,html,js,json,md,page,trigger}": [
      "prettier --write"
    ],
    "**/lwc/**": [
      "eslint"
    ],
    "*": [
      "git add"
    ]
  }
}
```

### runPMD.shファイルの内容はどうなりますか？

サンプルはこちらです。

```sh:runPMD.sh
#!/bin/bash

readonly PMD_VERSION=6.13.0
readonly TARGET_DIR=./force-app/
readonly FORMAT=summaryhtml
readonly PRIORITY_MIN=4
readonly PMD_HOME=../../../pmd/pmd-apex
readonly RULES_APEX=${PMD_HOME}/category/apex
readonly RESULT=./pmdResult.html
readonly LOG=./pmdOutput.log

rm ${RESULT}
rm ${LOG}

${PMD_HOME}/bin/run.sh pmd \
-cache ${PMD_HOME}/.pmdCache \
-d ${TARGET_DIR} \
-f ${FORMAT} \
-showsuppressed \
-r ${RESULT} \
-min ${PRIORITY_MIN} \
-failOnViolation false \
-R ${RULES_APEX}/bestpractices.xml,\
${RULES_APEX}/codestyle.xml,\
${RULES_APEX}/design.xml,\
${RULES_APEX}/documentation.xml,\
${RULES_APEX}/errorprone.xml,\
${RULES_APEX}/multithreading.xml,\
${RULES_APEX}/performance.xml,\
${RULES_APEX}/security.xml \
2> ${LOG}
```

### 開発作業の一覧の流れはどうなりますか？

以下のようになります。

1. git pull
2. コードを書く
3. npm run prettier
4. npm run test
5. テスト結果を確認する
6. git add & commit & push
7. プルリクエストを作成する & コードレビューを受ける

# さいごに

不親切なエントリーになってしまいましたが、わからないことは [Trailblazer Communityの各種勉強会](https://twitter.com/trailblazersjp) に顔を出していますので、ぜひ会場で会ってお話できればと思います。特に、土曜日にいっしょに勉強しましょう。[#SalesforceSaturday の勉強会](https://www.trailblazers.jp/group/saturdaytokyo_dg) でお待ちしています:v:

もちろん、本エントリーのコメント欄に書いていただいても構いません。

次にお会いする日までどうぞお元気で。Happy Coding!! :sunglasses: