Visual Studio CodeでReact Appを開発する際の準備

Visual Studio Codeを使ってReact Appの開発を行う際に、
最低限追加しておきたいextensionsと設定をまとめておく

前提

プロジェクトでは以下を使用するものとする

  • create-react-app
  • TypeScript
  • styled-components

extensions

TSLint

TSlintの結果をインライン表示する。

settingsに以下を追加すると(修正可能なものは)ファイル保存時に自動的に修正されるようになる

"tslint.autoFixOnSave": true,

Prettier - Code formatter

Prettierによるコードフォーマットを行う。

  • formatOnSave: 保存時にフォーマット
  • requireConfig: プロジェクトに .prettierrc(.json) が存在する場合のみフォーマットを行う
"editor.formatOnSave": true,
"prettier.requireConfig": true,

Jest

コードの変更によって影響を受けたテストを即時実行できるようにする

vscode-styled-components

styled-componentsCSSをハイライトする

settings

ロケールの変更

TypeScriptの警告は日本語だと読みづらく、検索効率も悪いため英語にしておく

Visual Studio Code の表示言語を英語に戻した

CLI "code" のインストール

以下に記載された手順により code で起動できるようになる

Running Visual Studio Code on macOS

$ cd project_dir
$ code .

以上

思いついたら追記するが、他は好みで導入するのがよいと思っている