Visual Studio Codeのおすすめ拡張機能を紹介!

Visual Studio Codeのおすすめ拡張機能

Visual Studio CodeではEXTENSIONS(拡張機能)をインストールすることでより早く、より簡単にコードを記述することができるようになります。

そこで本記事では、筆者(たかな)のおすすめ拡張機能を①基本的にインストールしたいもの、②あったら便利じゃないかな〜というもので記載しておきます。
(合わせてインストール手順とアンインストール手順も記載しておきます)

随時更新していきますのでときどき見にきていただくと新たなものが追加されているかもしれません。

注意として拡張機能をインストールした後は、念のためVisual Studio Codeを一度閉じて再起動しておきましょう。

基本的にインストールしておきたい拡張機能

Japanese Language Pack for Visual Studio Code

Visual Studio Codeが日本語になります。
日本語に慣れ親しんだ人にとっては英語よりも日本語表示の方が安心感が違うはず!

・インストール手順は、『Visual Studio Codeを日本語化する』で記載しています。

Code Spell Checker

コードを書いた際に辞書ファイルに存在しない単語を教えてくれます。
早くコードを書こうとすると単語のスペルを間違うことがあると思うので重宝するはず!

zenkaku

全角スペースを可視化できます。
半角スペースと思って全角スペースを書いてしまい、エラーとなってしまうことは多いはず!
もしエラーとなってしまった場合でも、書いた箇所を見つける際に重宝するはず!

インストールしておくと便利な拡張機能

Log File Highlighter

出力されたログを見やすくしてくれます。
ログを見ることは多いと思うので重宝するはず!

indent-rainbow

インデントの数ごとに色分けして表示してくれます。
深いネストがあるソースは見やすくなるはず!
ですが自分で書くときは深いネストのコードは書かないようにしましょう!

vue.js使用時は必ずインストールしたい拡張機能

Vue Language Features

vueファイルの文法のハイライトやコード入力時に補完してくれるようになります。
見やすさや効率よく作業するために必須の拡張機能です!

Visual Studio Codeの拡張機能インストール手順

① サイドメニューより「EXTENSIONS」(日本語設定時は「拡張機能」)のアイコンをクリックします。

② 検索バーに「インストールしたい拡張機能名」を入力します。

③ 表示された拡張機能の「Install」(日本語設定時は「インストール」)のボタンをクリックします。

④ 念のためVisual Studio Codeを再起動します。

拡張機能をインストール

Visual Studio Codeの拡張機能アンインストール手順

① サイドメニューより「EXTENSIONS」(日本語設定時は「拡張機能」)のアイコンをクリックします。

② インストール済みの一覧から「アンインストールした拡張機能」をクリックします。

③ 拡張機能の詳細が表示されるのでその中から「Uninstall」(日本語設定時は「アンインストール」)のボタンをクリックします。

④ 念のためVisual Studio Codeを再起動します。

拡張機能をアンインストール

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です