My Best of Salesforce IDE on Windows

最終更新日

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

はじめに

こんにちは。@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 （ .shファイルを実行するプログラムはGit Bashを指定する。）
• Java SE Development Kit （ JAVA_HOMEに指定してPATHを通す。）
• Salesforce CLI
• Visual Studio Code （ テーマは Codey Midnight がおすすめ。）
• 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 （ Apexには対応していないので、Prettier 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 （ Nodeでエラーが出る場合に必要。）
• windows-build-tools （ Nodeでエラーが出る場合に必要。）

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

Q&A

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

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

参考: 公式サイト

Salesforce CLI は、ネイティブ Windows コマンドプロンプト (cmd.exe) および Microsoft Powershell 内で最適に動作します。Windows 10 Subsystem for Linux、cygwin、MinGW などの Linux ターミナルエミュレータはバグのサポートが制限されているため、これらのエミュレータで Salesforce CLI を使用することはお勧めしません。

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

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

参考: 公式サイト

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の設定ファイルの指定はありますか？

サンプルはこちらです。

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の定義ファイルの指定はありますか？

サンプルはこちらです。

.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の定義ファイルの指定はありますか？

サンプルはこちらです。

eslintrc.json

{
  "extends": "@salesforce/eslint-config-lwc/recommended"
}

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

サンプルはこちらです。

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の設定ファイルの指定はありますか？

サンプルはこちらです。

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ファイルの内容はどうなりますか？

サンプルはこちらです。

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の各種勉強会 に顔を出していますので、ぜひ会場で会ってお話できればと思います。特に、土曜日にいっしょに勉強しましょう。#SalesforceSaturday の勉強会 でお待ちしています

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

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