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-componentsのCSSをハイライトする
settings
ロケールの変更
TypeScriptの警告は日本語だと読みづらく、検索効率も悪いため英語にしておく
Visual Studio Code の表示言語を英語に戻した
CLI "code" のインストール
以下に記載された手順により code
で起動できるようになる
Running Visual Studio Code on macOS
$ cd project_dir $ code .
以上
思いついたら追記するが、他は好みで導入するのがよいと思っている