Help us understand the problem. What is going on with this article?

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 です。本エントリーは、最終更新日時点までにおける、私の独自調査によるものです。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 がおすすめ。)
  • 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 を併用する。)
    • 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時代の開発環境、周辺ツールとエンジニアの働き方」にて少しデモを交えて補足させていただきます。

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 の勉強会 でお待ちしています:v:

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away