Web制作で役立つVisual Studio Codeの拡張機能【基本編】

投稿日：

更新日：

はじめに

様々な恩恵を受け、開発環境をより便利にするためのVisual Studio Code（以下、VS Code）の拡張機能。
今回は基本的なWeb制作であると便利な拡張機能を紹介します。

この記事は以下のシリーズで構成されています。

  1. Web制作で役立つVisual Studio Codeの拡張機能【基本編】
  2. Web制作で役立つVisual Studio Codeの拡張機能【フロントエンド編】
  3. Web制作で役立つVisual Studio Codeの拡張機能【バックエンド編】

総合

IntelliCode

Python、TypeScript、JavaScript、JavaのAIによるコード補完をする公式の拡張機能です。
使用される可能性の高いものが先頭に来るようになっています。

Visual Studio CodeでIntelliCodeのコード補完機能が提示される様子を示すスクリーンショット
使用する可能性の高いものに★がついている

Japanese Language Pack for Visual Studio Code

入れるだけで日本語化できるので、日本人なら入れておきましょう。
稀に翻訳されなくなるときがあるので、そのときはVS Codeを再起動してください。

Material Icon Theme

デフォルトのファイルアイコンよりこちらのアイコンの方が個人的に好きなので入れています。
同じフォルダでもフォルダ名によってアイコンが変わるので見やすいです。お好みでインストールしてください。

Paste and Indent

ソースコードを貼り付けたときに自動的にインデントされます。
手動でコード整形をする手間が省けます。

Path Intellisense

コード内でパスを入力する際に、ディレクトリ構造に合わせて候補を表示してくれます。
imgタグにパスを入れる時にいちいちフォルダを見に行かなくて良いので便利です。

Prettier - Code formatter

言わずと知れたコードフォーマッターです。

整形ルールはそのままでも良いですが、デフォルトのフォーマッターの指定と、保存時・ペースト時に自動整形されるように以下の設定をしておきましょう。

Visual Studio Codeの設定画面で、ファイル保存時にコードを自動整形するPrettierの設定を表示しているスクリーンショット
設定の3項目を設定します

vscode-input-sequence

あまりこの拡張機能を解説している記事がないのですが、マルチカーソルで連番を入力したい時にとても便利です。
入力の仕方が覚えにくいので慣れるまで苦戦します。1, 2, 3, ...といった連番の他に奇数、偶数、飛び連番や2進数などさまざまな入力ができます。
機会があれば別途記事にする予定です。

連番の設定時に番号が重複して出力されることがあるので、settings.jsonに以下の設定を入れておきましょう。

settings.json
{
  "sequence.replaceSelection": true
}

Git

Git Graph

Gitを使う方は入れておいて良い拡張機能です。
GItグラフを見たりグラフ上からGitのアクションを行うことができます。

Figma

VS Code上でFigmaのデザインを確認することができます。

画面の占有域が広いので最近はあまり使っていないですが、便利なのでおすすめです。

HTML

Auto Close Tag

開始タグの閉じかっこを入力すると自動で閉じタグが補完される拡張機能です。

VS CodeエディターにおいてAuto Close Tag機能が動作する様子を捉えたスクリーンショット
開始タグの閉じかっこを入力すると自動で閉じタグが補完される。

Auto Rename Tag

開始タグと閉じタグの片方を編集すると、もう片方のタグも自動で変更される拡張機能です。

VS CodeエディターでAuto Rename Tag機能がタグ名の変更を自動で同期させる様子を示すスクリーンショット
開始タグと閉じタグの片方を編集すると、もう片方のタグも自動で変更される

Code Spell Checker

スペルミスを青い波線でハイライトしてくれる拡張機能です。

HelloのスペルがHeloになっていることで青い波線でスペルミスを指摘しているCode Spell Checkerを使用したVS Codeのスクリーンショット
青い波線でスペルミスを指摘している

Highlight Matching Tag

カーソルをあてた開始タグに対応する終了タグを黄色い下線でハイライトしてくれる拡張機能です。

Visual Studio CodeでHighlight Matching Tag機能が一致するタグを強調表示しているスクリーンショット
対応する終了タグが黄色い下線でハイライトされる

Live Server

ローカルサーバーを立ち上げることができる拡張機能です。

Sass

Live Sass Compiler

Dart Sassを使用する場合はGulpなどを使用せずにSassの開発環境が整うので入れておきましょう。開発者が「Glenn Marks」になっているものを選んでください。

Dart SassやLive Sass Compilerの詳しい使い方は以下の記事で紹介しています。

PHP

PHP Intelephense

PHPで開発をするなら入れておいて損はないです。

WordPressを使う場合は設定に"wordpress"を追加しておきましょう。

settings.json
{
  "intelephense.stubs": [
    (省略)
    "wordpress"
  ]
}

この記事をシェアする