Web制作で役立つVisual Studio Codeの拡張機能【基本編】
投稿日:
更新日:
はじめに
様々な恩恵を受け、開発環境をより便利にするためのVisual Studio Code(以下、VS Code)の拡張機能。
今回は基本的なWeb制作であると便利な拡張機能を紹介します。
この記事は以下のシリーズで構成されています。
- Web制作で役立つVisual Studio Codeの拡張機能【基本編】
- Web制作で役立つVisual Studio Codeの拡張機能【フロントエンド編】
- Web制作で役立つVisual Studio Codeの拡張機能【バックエンド編】
総合
IntelliCode
Python、TypeScript、JavaScript、JavaのAIによるコード補完をする公式の拡張機能です。
使用される可能性の高いものが先頭に来るようになっています。
![Visual Studio CodeでIntelliCodeのコード補完機能が提示される様子を示すスクリーンショット](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F51e1cc8246db4c2c9c68f11151da0bc9%2Fvscode-intellicode-suggestion-feature-screenshot.gif%3Fw%3D500%26h%3D192&w=1080&q=75)
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の設定を表示しているスクリーンショット](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Fb0ad8edfb8604003bf3dc5a92a1397fc%2Fvscode-prettier-format-on-save-setting.png%3Fw%3D1000%26h%3D515&w=2048&q=75)
vscode-input-sequence
あまりこの拡張機能を解説している記事がないのですが、マルチカーソルで連番を入力したい時にとても便利です。
入力の仕方が覚えにくいので慣れるまで苦戦します。1, 2, 3, ...といった連番の他に奇数、偶数、飛び連番や2進数などさまざまな入力ができます。
機会があれば別途記事にする予定です。
連番の設定時に番号が重複して出力されることがあるので、settings.json
に以下の設定を入れておきましょう。
{
"sequence.replaceSelection": true
}
Git
Git Graph
Gitを使う方は入れておいて良い拡張機能です。
GItグラフを見たりグラフ上からGitのアクションを行うことができます。
Figma
VS Code上でFigmaのデザインを確認することができます。
画面の占有域が広いので最近はあまり使っていないですが、便利なのでおすすめです。
HTML
Auto Close Tag
開始タグの閉じかっこを入力すると自動で閉じタグが補完される拡張機能です。
![VS CodeエディターにおいてAuto Close Tag機能が動作する様子を捉えたスクリーンショット](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Fbd6cc4236dde4b5998ae46a1f79e031f%2Fvscode-auto-close-tag-feature-screenshot.gif%3Fw%3D500%26h%3D242&w=1080&q=75)
Auto Rename Tag
開始タグと閉じタグの片方を編集すると、もう片方のタグも自動で変更される拡張機能です。
![VS CodeエディターでAuto Rename Tag機能がタグ名の変更を自動で同期させる様子を示すスクリーンショット](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Fa3ac49493c964bd1827c793068f7a30f%2Fvscode-auto-rename-tag-feature-screenshot.gif%3Fw%3D500%26h%3D244&w=1080&q=75)
Code Spell Checker
スペルミスを青い波線でハイライトしてくれる拡張機能です。
![HelloのスペルがHeloになっていることで青い波線でスペルミスを指摘しているCode Spell Checkerを使用したVS Codeのスクリーンショット](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2Fecf0122837c8403fa2f76d3412b4d05e%2Fvscode-spell-check-extension-screenshot.png%3Fw%3D1000%26h%3D488&w=2048&q=75)
Highlight Matching Tag
カーソルをあてた開始タグに対応する終了タグを黄色い下線でハイライトしてくれる拡張機能です。
![Visual Studio CodeでHighlight Matching Tag機能が一致するタグを強調表示しているスクリーンショット](/_next/image?url=https%3A%2F%2Fimages.microcms-assets.io%2Fassets%2F1f1107ac3b134154a3ddd138e2ec21cd%2F37159c4afafd44fab597555d98b56254%2Fvscode-highlight-matching-tag-feature-screenshot.gif%3Fw%3D500%26h%3D244&w=1080&q=75)
Live Server
ローカルサーバーを立ち上げることができる拡張機能です。
Sass
Live Sass Compiler
Dart Sassを使用する場合はGulpなどを使用せずにSassの開発環境が整うので入れておきましょう。開発者が「Glenn Marks」になっているものを選んでください。
Dart SassやLive Sass Compilerの詳しい使い方は以下の記事で紹介しています。
PHP
PHP Intelephense
PHPで開発をするなら入れておいて損はないです。
WordPressを使う場合は設定に"wordpress"
を追加しておきましょう。
{
"intelephense.stubs": [
(省略)
"wordpress"
]
}