Visual Studio Codeのセットアップと便利なプラグイン

VisualStudioCode

ターミナルからVisual Studio code を呼び出せるようにする。

じつはターミナルからcodeコマンドで呼び出せるようにすることができます。

atom とかだとターミナルでそのフォルダに行ってそこでatom . コマンドで簡単にエディタをそのフォルダで立ち上げることができます。

atomを使っていたので、その機能ないのかなと思ってましたが、ありました!

Shift + Command + p

と押すとCommand Palleteが開きます。そこにshellといれると

「Shell Command: Install ‘code’ command in PATH」と表示されるのでこれを実行しましょう。それだけです。

Command Pallete は 表示→コマンドパレット からもアクセスできます。

Visual Studio Code の基本設定

基本設定→設定

既定の設定を上書きするには、このファイル内に設定を挿入します
以下のように設定してみた。
{
“window.zoomLevel”: 2,
“editor.fontSize”: 17,
“editor.tabSize”: 2,
“files.associations”: {
“*.json”: “json”
},
“editor.wordWrap”: “on”
}

tabSize は2文字で設定してみた。

editor.wordWrapはウィンドウの大きさに応じて、入力文を回り込ませる。見やすくなる(好みだけど)。

とりあえず便利なVSCodeプラグイン

EMMET

HTMLを書く時に便利です。

自動的にいろいろと補完してくれます。

Material-icon-theme

Material-icon-theme を入れるとエクスプローラー部分が見やすくなる。

Material Icon Theme - Visual Studio Marketplace
Extension for Visual Studio Code - Material Design Icons for Visual Studio Code

Prettier

Macでの使い方を説明しますが、

shift + option + F で、Document Format(ドキュメントの整形)を行ってくれます。

( shift + command + P で、Visual Studio Code のコマンドプロンプトを立ち上げて、そこにDocument Formatと入れて、実行してもOK)

例えばタブを整えて見やすくしてくれたり、シングルクオート( ‘ )をダブルクオート( ” )に統一してくれたりします。

Live Server

変更するたびに、リロードしてくれる。

コメント