VisualStudioCodeを使ってTypeScriptを快適に書くための環境設定

Typescript
スポンサーリンク

typescriptとts-nodeのインストール

sudo npm install -g typescript ts-node

Visual Studio Codeのダウンロードとインストール

Web開発のデファクトになりつつあるVisual Studio Codeの使い方と設定方法を解説していく。

Prettier拡張のインストール

Prettierは自動でコードの見た目を見やすいように整形してくれる。

をクリックすると拡張機能のマーケットプレースが開くのでそこからPrettierをインストールする。

installと書かれている緑のボタンを押すとインストールできる。

セーブ時にprettierによってフォーマット(整形)されるようにする設定

Code → Preference → Settings

検索窓に"format on save"と入れて検索する。

Editor: Format On Saveにチェックを入れる。

全ての囲みをシングルクオートに統一する

これは好みだが、シングルクオート ' かダブルクオート"のどちらかに統一していた方が見やすい。ここではシングルクオートに統一する方法を紹介します。

インデントを2スペースに設定

インデント幅も完全に好みだが、よく使われる2スペースに設定する方法を紹介する。

テーマを変更する

エディターの色使いを変更するためのテーマが存在するのでその設定方法を紹介する。

Visual Studio Codeのactivity barを消す方法

 

エディター内にターミナルを表示する

shift + control + @

でターミナルを表示することができる。

コメント