本記事では、Visual Studio CodeでWebエンジニアにおすすめの拡張機能を9つ紹介しています。
【月額980円で読み放題!】
Amazon Kindle Unlimited
Amazon Kindle Unlimited
![](https://web-engineer-wiki.com/wp-content/uploads/2023/02/amazon-kindle-1024x474.jpg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/cropped-favicon.jpg)
Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2022/02/woman-icon.jpeg)
初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!
全プログラマー必見!
変数名/関数名にもう悩まない!
変数名/関数名にもう悩まない!
リーダブルコード
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
![](https://web-engineer-wiki.com/wp-content/uploads/2023/07/code-write.jpeg)
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
![](https://web-engineer-wiki.com/wp-content/plugins/pochipp/assets/img/pochipp-logo-t1.png)
目次
Web制作者におすすめ拡張機能
Japanese Language Pack for Visual Studio Code
![Japanese Language Pack for Visual Studio Code](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all01-1.jpg)
![Japanese Language Pack for Visual Studio Code](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all01-1.jpg)
Japanese Language Pack for Visual Studio Codeは、Visual Studio Codeの言語設定を日本語に変換してくれる拡張機能です。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【Visual Studio Code】日本語表示にする方法
本記事では、Visual Studio Code(VSCode)を日本語表示にする方法について解説しています。 【Japanese Language Pack for VS Code】 Visual Studio Codeを日本語表示に…
Auto Close Tag
![Auto Close Tag](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all02-1.jpg)
![Auto Close Tag](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all02-1.jpg)
Auto Close Tagは、HTMLの開始タグを記述するだけで終了タグを自動で付けてくれる拡張機能です。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【Visual Studio Code】終了タグを自動で付けてくれる拡張機能
本記事では、Visual Studio Codeの拡張機能を使って、HTMLの終了タグを自動で付ける方法について解説しています。 【Auto Close Tag】 HTMLのコーディングをしていると…
Auto Rename Tag
![Auto Rename Tag](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all03.jpg)
![Auto Rename Tag](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all03.jpg)
Auto Rename Tagは、HTMLの開始タグまたは終了タグの一方を修正するだけで同時にもう片方も修正してくれる拡張機能です。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【Visual Studio Code】閉じタグも自動修正してくれる拡張機能
本記事では、Visual Studio CodeでHTMLの閉じタグも自動修正してくれる拡張機能を紹介しています。 【Auto Rename Tagとは?】 HTMLでタグを変更したいときは結構ありま…
Code Spell Checker
![Code Spell Checker](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all04.jpg)
![Code Spell Checker](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all04.jpg)
Code Spell Checkerは、英語のスペルミスを教えてくれる拡張機能です。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【Visual Studio Code】英語のスペルミスを防ぐ方法
本記事では、Visual Studio Codeの拡張機能を使って英語のスペルミスを未然に防ぐ方法について解説しています。 【Code Spell Checker】 Visual Studio Codeで英語のス…
Live Sass Compiler
![Live Sass Compiler](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all05.jpg)
![Live Sass Compiler](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all05.jpg)
Live Sass Compilerは、Sass/Scssをcssに変換(コンパイル)してくれる拡張機能です。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【Visual Studio Code】Sass/Scssをcssにコンパイルする方法
本記事では、Visual Studio CodeでSass/Scssをcssにコンパイル(変換)する方法について解説しています。 【Live Sass Compiler】 Visual Studio CodeでSass/Scssをcssに…
Live Server
![Live Server](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all06.jpg)
![Live Server](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all06.jpg)
Live Serverは、1クリックでローカルサーバーを立ててくれる拡張機能です。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【Visual Studio Code】簡単にローカルサーバーを立てる方法
本記事では、Visual Studio Codeで簡単にローカルサーバーを立てる方法について解説しています。 【Live Server】 Visual Studio Codeでローカルサーバーを立てるには、…
vscode-icons
![vscode-icons](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all07.jpg)
![vscode-icons](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all07.jpg)
vscode-iconsは、ファイルやフォルダにアイコンを付けて構成を分かりやすくする拡張機能です。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【Visual Studio Code】ファイルやフォルダにアイコンを付ける方法
本記事では、Visual Studio Codeでファイルやフォルダにアイコンを付ける方法について解説しています。 【vscode-icons】 Visual Studio Codeでファイルやフォルダにア…
WordPress開発者におすすめ拡張機能
PHP Intelephense
![PHP Intelephense](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all08.jpg)
![PHP Intelephense](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all08.jpg)
PHP Intelephenseは、PHPのコード保管やコードチェックをしてくれる拡張機能です。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【Visual Studio Code】PHP Intelephenseの設定方法
本記事では、Visual Studio CodeでPHP Intelephenseのインストール~設定方法について解説しています。 【PHP Intelephense】 Visual Studio CodeでPHPのコード保管やコ…
WordPress Snippet
![WordPress Snippet](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all09.jpg)
![WordPress Snippet](https://web-engineer-wiki.com/wp-content/uploads/2023/07/vsc-all09.jpg)
WordPress Snippetは、WordPress独自の関数を保管してくれる拡張機能です。
あわせて読みたい
![](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
![](https://web-engineer-wiki.com/wp-content/themes/swell/assets/img/no_img.png)
【Visual Studio Code】WordPressの関数を補完する方法
本記事では、Visual Studio CodeでWordPressの関数を補完する方法について解説しています。 【WordPress Snippet】 Visual Studio Codeでは、デフォルトでWordPressの関…