2021-11-23

[VSCode] 使用している拡張機能

良いと思った拡張機能を随時追加。

Jest Runner

WebStormのように、エディタからワンクリックで特定のテストのみを実行できるようになる。

注意として create-react-app で作成したプロジェクトの場合、テストの実行が jest コマンドでなく react-scripts test であるためそのままだと動作しない。以下のように設定に追加する必要がある。

{
  ...

  "jestrunner.jestCommand": "npx react-scripts test --watchAll=false"
}

--watchAll=false を入れないとテスト実行後終了せずなんか対話が始まってしまうので入れておく。

Todo Tree

TODO や FIXME コメントをリスト表示してくれる。

Prettier

おなじみ。formatOnSave をONにして、defaultFormatterをPrettierにすれば保存時にフォーマットしてくれる。

注意として、そのままだと何もかもが問答無用で保存時にフォーマットされてしまう。マークダウンファイルとか気がついたら英単語の左右に空白ができて非常に気持ち悪くなる。

基本的にPrettierでフォーマットしてほしいときは、プロジェクトにPrettierをインストールし設定ファイルを置いているときのみ。ちょうど requireConfig というオプションがあり、これをONにすれば設定ファイルが置かれている時のみフォーマットされるようになる。無視したいファイルは .prettierignore で指定するのを忘れないように。

あと、言語独自のフォーマッタが存在する場合（elmとか）は、その言語に関しては defaultFormatter を初期化しないといけない。

結果、VSCodeの setting.json のフォーマット関係の設定は以下のようにした。

{
  ...,

  "prettier.requireConfig": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[elm]": {
    "editor.defaultFormatter": null
  }
}