Visual Studio Code(VScode)でオススメの初期設定と拡張機能

Web制作

 

Visual Studio Code(以下VScode)ですが、初期設定だと便利な機能がオフになっていたり、逆にいらない機能がオンになっている場合があります。

また、Web制作において作業を効率化できる拡張機能が複数存在します。

 

本記事では、最初にやっておくべき設定と、入れておくと便利な拡張機能を紹介します。

 

以下、記事に入ります。

 

初期設定

まずは、手っ取り早く初期設定を行ってしまいます。

 

VScodeを開いて、Command + Shift + Pを押します

すると、VScodeの上部にコマンドパレットというものが出てきます

 

ここで、>open settings json と入力しましょう。

すると、Preference : Open Settings(JSON)という項目が出てくるので、Enterキーを押します。

 

すると、setting.jsonというファイルが開かれるので、以下のコードをコピペしてあげましょう。

まだ何も設定していない方は、丸々上から貼ってしまってOKです。

 

以下、貼り付けた各コードの内容に関して解説します。

解説を見て、自分には不要だなーと思った部分は削除してしまいましょう。

※注意

settings.jsonは、一番最後の行(この場合”editor.tabSize”: 2)に,(カンマ)をつけてはいけません。

自分で設定をいじった時は気をつけましょう

 

自動整形機能の追加

“editor.formatOnSave”: true,は、保存時にコードを自動整形してくれる設定です。

 

例えば以下のようにインデントがぐちゃぐちゃのコードがあったとします。

 

これをCommand + S(WinならCtrl + S)を押してセーブすると、

このように綺麗にインデントが整えられた状態になおしてくれます。

どれだけ適当に書いてもセーブすると綺麗に直してくれる非常に便利な機能なので、是非導入しましょう。

 

“editor.formatOnType”: true,はタイプ時にコードを自動整形してくれる設定です。

コードの区切りを入力したときに自動整形が発動します。

 

言葉だけじゃわかりにくいので、とりあえず設定して実際に見てみるのをオススメします。

 

TabキーでEmmet展開

こちらはEmmetを用いる時に使用するオプションで、Tabキーを押した時にEmmetを使用できる設定です。

 

例えばEmmetで、

nav.global-nav>ul>li*5>a

こういった省略技法を書いた時、Tabキーを押しただけで展開できるようになります

 

厳密には連続で入力すればTabキーで反応するのですが、例えば上のコードだと

aを入力した後に間違ってEnterを押す→aまで戻ってTabキー

と押すと反応しなくなります。

 

Emmetを頻繁に使用する方は絶対に設定しておきましょう。

 

常に新しいタブで開く

VScode上でファイルを開く時、常に新しいタブで開く設定です。

 

VScodeのファイルを開くと、エディタ上部にタブが表示されます。

 

このタブですが、中身に変更を加えないと古いタブが新しいタブにどんどん上書きされて表示されます

個人的にサイト制作では新しいタブで開きたいことが多かったので、こちらの設定をオススメします。

 

Tabサイズの切り替え

VScodeでTabキーを押した時に空けるスペースの大きさを決めます

 

デフォルトだとTabsize: 4になっています(半角スペース4つ分)

Tabsizeは人によって意見が分かれるので、Tabsize:2が正解というわけではありません。

 

これがオススメというより、こちらでタブスペースを設定できるということを覚えておきましょう。

 

ミニマップの非表示

エディタ上にあるミニマップを非表示にする設定です。

 

VScodeでは、デフォルトでエディターの右側にコードのミニマップを表示してくれます。

 

超長いコードを扱う時は有用ですが、それ以外だとさほど役に立ちません。

むしろ誤クリックで意図せぬところに移動することもあるので、デフォは非表示を推奨します。

 

タグをホバーした時の説明非表示

HTML上のタグをマウスホバーしたときの説明文を非表示にする設定です。

 

VScodeのデフォルトでは、HTMLのタグをマウスホバーすると、タグに関する説明が表示されます。

 

コードを書き始めたころにはもしかしたら重宝するかもしれませんが、実際の制作においては不要なため外しておくのを推奨します。

 

拡張機能の追加

Auto Rename Tag

HTMLのタグを一括で書き換えてくれるプラグインです。

 

例えば、

<p>テスト</p>

というタグをspanに書き換えたい、となったとき開始タグか閉じタグどちらかのpをspanに書き換えるだけでもう片方のpもspan書き換わります

 

プラグインのページにデモムービーがあるので、実際に見てみるとわかりやすいです。

 

Bracket Pair Colorizer 2

SCSSやjsで括弧がたくさん出てきた時、色分けしてくれるプラグインです。

 

実際に使用すると以下のようになります。

 

括弧がどれに対応するかがわかるので、単純にコードの視認性が上がります。

 

htmltagwrap

タグで囲いたい部分をドラッグして、option + wを入力すると選択範囲を好きなタグで囲うことができます。

 

例えば、以下のようなHTMLでpタグの中のダミーにspanを付けたいとします。

 

ダミーをドラッグした状態で、option + W(WinならAlt + W)を押すとpタグが出てきます。

 

タグを変えたい時はそのまま入力すると違うタグに変わります。

 

プラグインのページにデモムービーがあるので、実際の動作を見てみたい方はそちらをご覧ください。

 

カンプからテキストをコピーして、一部をspanで囲いたい時なんかによく使います。

 

Japanese Language Pack for Visual Studio Code

VScodeは初期状態で英語ですが、それを日本語化するプラグインです。

 

注意として、これを導入しただけでは日本語にはなりません。

以下、設定方法を解説します。

 

初期設定のときのように、Command + Shift + Pでコマンドパレットを表示させ、>config と入力します。

すると、Configure Display Languageという項目があるので選択してEnter。

 

言語選択が表示されるので、日本語である「ja」を選択しましょう。

 

選択すると、VScodeが再起動を求めてくるので従います。

 

再起動すると、日本語が無事表示されています。

 

php cs fixer

初期設定のときに設定した自動整形機能ですが、PHPファイルには対応していません

そのため、php cs fixerというプラグインを用いて自動整形機能を設定します。

 

ただし、このプラグインを導入しただけでは自動整形は発動せず、多少の設定が必要になります。

以下、やり方を解説します。

 

まずは、PHP-CS-FixerのGITHUBのページに移動します。

https://github.com/FriendsOfPHP/PHP-CS-Fixer

 

少しページの下に行くと、「Installation」という項目があります。

ここに、php-cs-fixer.pharというファイルのダウンロードリンクがあるので、こちらをクリックしてダウンロードします。

 

ダウンロード後、ファイルを任意のフォルダに保存します。

 

その後、初期設定のときと同じように

Command + Shift + Pでコマンドパレットを開く → >open settings jsonを選択し、setting.jsonを開く

setting.jsonを開いたら、以下のコードを貼り付けます

 

一つ注意なのが、

こちらの項目にはダウンロードした php-cs-fixer-v2.phar のパスを記入します

“~/.vscode/php-cs-fixer-v2.phar”は僕の場合なので、同じ場所に入れない限りそのまま貼り付けても作動しません。

 

パスなんてわからない!という方は、php-ch-fixer-v2.pharを右クリックして、optionを押してください(Macのみ)

以下の「php-ch-fixer-v2.pharをコピー」の部分が、optionを押している間は「php-ch-fixer-v2.pharのパス名をコピー」に変わります

 

うまくパスを設定して、先ほどのjsonファイルにコードを貼り付けたら作業は終了です。

適当なPHPファイルを開いてセーブすると、HTMLやCSSと同じように自動整形機能が発動します。

 

Web制作でもWordPressなどを取り扱うとPHPファイルを編集する機会も多いので、整形できるようにしておきましょう。

 

まとめ

今回紹介したVScodeの設定やプラグインはあくまでほんの一部です。

 

まだまだたくさん便利な設定やプラグインは存在するので、「これ不便だな…」「この機能が欲しい…」と思った時にご自身で調べてみてください。

 

何かオススメのプラグインなどあれば情報お待ちしております。( ^ω^ )