MENU

2024年 VSCode必須プラグイン10選!Web制作に必要なプラグイン・拡張機能をご紹介します。

VSCode(Visual Studio Code)は、現代のソフトウェア開発において不可欠なツールとなっています。

特にWeb開発はvscodeで開発するところが多いと思います。

そのため開発プロセスや効率を最適化するためには、正しいプラグインの選択が重要です。
この記事ではWeb開発を対象に現役エンジニアが厳選した必須プラグインをご紹介します。

これらのプラグインは、コードの品質を向上させ、開発速度を加速し、効率的な開発環境を構築するのに役立つものばかりです。実際に私がテックリードをしている現場でも使用しているものをご紹介致します。

この記事の対象者
  • vscodeをなんとなく使用している方
  • これからプログラミングを学ぶ方
  • 開発効率を上げたい方
プロフィール
あいば
  1. 現役フルスタックエンジニア
  2. プレイングマネージャー
  3. テックリーダー
  4. 現職でエンジニアの採用、面接を実施中
目次

基本設定

Japanese Language Pack for Visual Studio Code

やってくれること

VSCodeの日本語化

VSCodeの標準が英語のため慣れていない人は日本語化させておくことで作業効率を上げることができます。

特に英語圏出ない人には入れない理由がない拡張機能であるため、一番最初に入れるべきと思っています。

Prettier - Code formatter

やってくれること

ソースコードの自動整形

昔はソースのインデントは自分で揃えたりしましたが、現代においてはこちらの拡張機能がやってくれます。

ファイルを自動保存する際にコードを自動的にきれいにしてくれます。

保存前

保存後

Material icon Theme

やってくれること

拡張子に応じたアイコンを表示

アイコンを表示するだけ?と思う方もいると思いますが、WEB開発ではそれぞれ責務を分離したり、保守性を意識してコード書くため、ファイル数が膨大になります。

また各種設定ファイルも多数存在しそれらを操作するため、視覚的にわかるようになると作業効率が上がります。

左:デフォルト
右:Material icon Theme

Code Spell Checker

やってくれること

英語命名のタイプミスのチェック

プログラムは英語表記のため、命名も英語表記を使用する場合が大半です。

変数の名前やメソッド名をタイポする可能性もあるため、それらをチェックし破線で知らせてくれます。

web制作

ES7+ React/Redux/React-Native snippets

やってくれること

Reactでコンポーネントのテンプレート挿入

Reactといえば現代のWeb開発の1強とも言えるJavascriptのライブラリです。

実際に開発している方には必須とも言える拡張機能で、以下のショートカットを入力するだけでコンポーネントのテンプレートを作ってくれます。

特にファイル数が多くなるReactと相性がよい拡張機能と言えるでしょう。

Tailwind CSS IntelliSense

やってくれること

Tailwind CSSで用意されているユーティリティクラス名を保管する

こちらも現代のWeb開発において、使用頻度も高くなっているTailwind CSSのクラス保管をしてくれる拡張機能です。

Auto Rename Tag

やってくれること

HTMLの開始タグとと終了タグを自動で保管する

Web開発では当たり前のようにHTMLを使用します。

特にコードが長くなる場合、タグの先頭を修正したりすると、終了タグも合わせて修正したりしないといけないので、それらの作業を勝手にやってくれます。

indent-rainbow

やってくれること

インデントの色付け

下記のようにコードスペースに色をつけてくれるので、インデントによるエラーを未然に防ぐことができます。

バージョン管理

Git Graph

やってくれること

GitのGUI操作、コミット履歴の視覚的表示

GitはWeb開発において使用しない選択肢はないほど定番のバージョン管理システムです。

このようにコミットの履歴を視覚的に表示してくれます。

まとめ

本記事ではWeb開発に必須とも言えるVSCode(Visual Studio Code)をご紹介しました。

定番の物を多くご紹介しましたが、特に入れない理由がないものばかりかと思いますので、まだ入れていない方は入れてみると良いと思います。

また今回紹介できなかったドキュメント執筆のための拡張機能はまた別の記事で紹介したいと思います。

拡張機能は日々進歩しているので常にアンテナを張って自分に合う拡張機能を入れていくと、開発のモチベーションや生産性を高く保てると思います。

ここで紹介できたものはごく一部可と思います。皆様のおすすめの拡張機能があればコメントなどで教えていただけると助かります。

この記事が皆様の役に立てば幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次