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 は 表示→コマンドパレット からもアクセスできます。

これ以降は、作業したいフォルダで、

code .

とするとそのフォルダでVSCodeが開きます。

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を書く時に便利です。

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

例えば、

!

ビックリマークを入力してTabを押すと、

自動的に

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport”content=”width=device-width, initial-scale=1.0″>
<metahttp-equiv=”X-UA-Compatible”content=”ie=edge”>
<title>Document</title>
</head>
<body>
</body>
</html>

とhtmlファイルの骨格を入力してくれます。

この他にも

.login

と入力しTabを押すと

<div class=”login”></div>
と入力されます。
簡単な入力ルールを覚えると、圧倒的に早く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

LiveServer をインストールするとプログラムファイルを変更するたびに、自動でリロードしてくれるようになります。

 

コメント