Zenn
🐰

VisualStudioCode で Salesforce開発する時の設定

2021/02/08に公開
VS Code
Salesforce
APEX
LWC
tech

私がvscodeでSalesforce関連開発をする時に設定する事をまとめておきます。sfdxコマンドとかは入っている前提で、vscode関連の設定だけを書いておいて備忘録的に。

この辺りの記事は操作方法とかも細かく書いてあっておすすめです。
Visual Studio Code で Salesforce の開発環境を構築する - Qiita

特に環境依存な設定をするつもりはないですが、主にLightningWebComponentとApexを編集する事が多いのでVisualforce, Aura開発がメインの方だと少しピントがずれるかもしれないのでご注意下さい。

とにかくplugin入れる

npm

sfdx force:project:create とかしたら追加するnpm package

  • eslint-plugin-prettier

設定ファイル群

.prettierrc

.prettierrc
{
  "printWidth": 120,
  "trailingComma": "none",
  "overrides": [
    {
      "files": "**/lwc/**/*.html",
      "options": { "parser": "lwc" }
    },
    {
      "files": "*.{cmp,page,component}",
      "options": { "parser": "html" }
    }
  ]
}

force-app/main/default/lwc/.eslintrc.json

force-app/main/default/lwc/.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "@salesforce/eslint-config-lwc/recommended",
    "prettier"
  ],
  "plugins": ["prettier"],
  "overrides": [
    {
      "files": ["*.test.js"],
      "rules": {
        "@lwc/lwc/no-unexpected-wire-adapter-usages": "off"
      }
    }
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 120,
        "trailingComma": "none",
        "overrides": [
          {
            "files": "**/lwc/**/*.html",
            "options": { "parser": "lwc" }
          },
          {
            "files": "*.{cmp,page,component}",
            "options": { "parser": "html" }
          }
        ]
      }
    ]
  }
}

package.json を変更する

lint-stagedの設定を変えている。JSは全部eslintで--fixまでやっちゃう。他はprettierでやるように。

package.json
{
  ...
  
  "lint-staged": {
    "**/*.{cls,cmp,component,css,html,json,md,page,trigger,xml,yaml,yml}": [
      "prettier --write"
    ],
    "**/*.js": [
      "eslint --fix"
    ],
    "**/{aura|lwc}/**": [
      "eslint --fix"
    ]
  }
  
  ...
}

VisualStudioCode の settings.json

関係ある設定を抜粋してみました。 prettierとeslintをjsとそれ以外で使い分けるようにする意図で作っています。HTMLをprettierでformatするのは好き嫌いが分かれそう。

~/Library/Application Support/Code/User/settings.json
{
    "salesforcedx-vscode-apex.java.home": "/Library/Java/JavaVirtualMachines/jdk-11.0.5.jdk/Contents/Home",
    "editor.formatOnSave": true,
    "editor.formatOnSaveMode": "modifications",
    "salesforcedx-vscode-core.push-or-deploy-on-save.enabled": true,
    "prettier.disableLanguages": [
        "javascript",
    ],
    "eslint.format.enable": true,
    "eslint.lintTask.enable": true,
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[apex]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    },
    "[html]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[xml]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }

}

Discussion