VsCodeのおすすめ拡張機能10選！プログラミングから文章作成まで幅広く使える

VsCodeを使い始めたけれど、「もっと便利に使えないかな？」と感じたことはありませんか？

VsCodeの魅力は、拡張機能を追加することで自分好みにカスタマイズできるところなんです。でも、拡張機能は何万種類もあって、どれを選べばいいか迷ってしまいますよね。

この記事では、プログラミング初心者から文章作成まで幅広く使える、おすすめの拡張機能を10個厳選して紹介します。

VsCodeの拡張機能とは？

VsCodeの拡張機能は、VsCodeに新しい機能を追加するための「プラグイン」のようなものなんです。スマホにアプリを入れるイメージに近いですね。

拡張機能でできること

拡張機能を入れると、以下のようなことができるようになります。

• コードの色分けや整形が自動でできる
• 文法の間違いやエラーを教えてくれる
• マークダウンのプレビューが見やすくなる
• スペルミスを指摘してくれる
• ファイルのアイコンが見やすくなる

VsCodeはそのままでも十分使えますが、拡張機能を追加することで、自分の作業スタイルに合わせて最適化できるんです。

なぜ拡張機能が便利なのか

拡張機能の一番の魅力は、「必要なものだけ」を追加できることです。

例えば、プログラミングをするならコードの整形機能が便利ですし、ブログ記事を書くならマークダウンのプレビュー機能が役立ちます。自分の使い方に合わせて選べるので、VsCodeが重くならずに快適に使えるんですね。

それでは、具体的なインストール方法を見ていきましょう。

拡張機能のインストール方法

拡張機能のインストールは、とても簡単です。初めての方でも5ステップで完了しますよ。

インストールの手順（5ステップ）

1. VsCodeの左側にある「拡張機能」アイコン（四角が4つ並んだマーク）をクリック
2. 検索ボックスに、インストールしたい拡張機能の名前を入力
3. 検索結果から目的の拡張機能を見つける
4. 「インストール」ボタンをクリック
5. インストールが完了すると、「インストール済み」と表示される

たったこれだけです。拡張機能によっては、インストール後にVsCodeの再起動を求められる場合もありますが、その場合は指示に従って再起動すればOKです。

拡張機能の削除方法

もし使わなくなった拡張機能があれば、簡単に削除できます。

1. 左側の「拡張機能」アイコンをクリック
2. 「インストール済み」タブを選択
3. 削除したい拡張機能を見つける
4. 「アンインストール」ボタンをクリック

これで削除完了です。気軽に試して、合わなければ削除すればいいので、まずは使ってみるのがおすすめですよ。

それでは、具体的なおすすめ拡張機能を見ていきましょう。まずはプログラミング向けの拡張機能からご紹介します。

プログラミング向けおすすめ拡張機能5選

プログラミングをするなら、これから紹介する5つの拡張機能がとても便利です。初心者の方でも使いやすいものを厳選しました。

Japanese Language Pack for Visual Studio Code

VsCodeの表示を日本語化する拡張機能です。

インストールすると、メニューやメッセージがすべて日本語になるので、英語が苦手な方でも安心して使えます。プログラミング初心者の方には特におすすめです。

インストール後、VsCodeを再起動すると日本語表示に切り替わります。もし切り替わらない場合は、コマンドパレット（Ctrl+Shift+P または Cmd+Shift+P）で「Configure Display Language」を選択し、日本語を選べばOKです。

Prettier – Code formatter

コードを自動で整形してくれる拡張機能です。

プログラミングでは、コードの見た目を整えることがとても大切なんです。でも、手動で整形するのは面倒ですよね。Prettierを使えば、保存するだけで自動的にコードがきれいに整形されます。

JavaScript、HTML、CSS、Markdownなど、多くの言語に対応しているので、幅広く使えますよ。

indent-rainbow

インデント（字下げ）を色分けして見やすくする拡張機能です。

プログラミングでは、コードの階層構造を理解することが重要なんです。indent-rainbowを使うと、インデントのレベルごとに色が変わるので、コードの構造が一目でわかります。

特に、PythonやHTMLのように階層が深くなりがちな言語では、とても役立ちますよ。

Error Lens

エラーや警告をコードの横にリアルタイムで表示してくれる拡張機能です。

通常、エラーは画面下部のパネルに表示されますが、Error Lensを使うと、エラーが発生している行のすぐ横にメッセージが表示されます。これにより、エラーの原因がすぐにわかるんです。

初心者の方は、エラーメッセージを見つけるのに苦労することが多いので、この拡張機能があると学習がスムーズに進みますよ。

Git History

Gitの履歴をグラフィカルに見られる拡張機能です。

Git Historyを使うと、どこでブランチが分かれたかをグラフィカルに表示できるので、視覚的に理解しやすいんです。また、各コミットをクリックすれば、その時のファイルや直前との差分を確認できます。

僕自身、コマンド操作に慣れていなかったので、この拡張機能にはとても助けられました。クリックするだけで直感的にGitの操作ができるので、初心者の方にもおすすめです。

プログラミング向けの拡張機能はこの5つが基本ですが、次は文章作成に便利な拡張機能を紹介します。

文書作成向けおすすめ拡張機能3選

VsCodeは、実はブログ記事や技術文書を書くのにもとても便利なんです。ここでは、文章作成に役立つ3つの拡張機能を紹介します。

Markdown All in One

マークダウン記法で文章を書くときに便利な拡張機能です。

マークダウンは、シンプルな記号を使って文章を装飾できる記法で、ブログ記事や技術文書でよく使われます。実は、WordPressでブログを書いている方も、WordPressはマークダウンに対応しているので便利に使えるんです。

Markdown All in Oneを使うと、以下のような機能が使えます。

• 見出しや箇条書きの自動補完
• ショートカットキーで太字や斜体を簡単に入力
• 目次の自動生成
• プレビュー表示

文章を書きながらリアルタイムでプレビューを確認できるので、仕上がりをイメージしながら執筆できますよ。

Code Spell Checker

スペルミスを自動でチェックしてくれる拡張機能です。

英語で文章を書くときや、プログラミングで変数名を英語で書くときに、スペルミスをしてしまうことってありますよね。Code Spell Checkerを使うと、スペルミスのある単語に波線が表示されるので、すぐに気づけます。

初心者の方は、タイプミスに気づかずエラーが出て困ることも多いので、この拡張機能があると安心です。

Markdown Preview Enhanced

マークダウンのプレビューをさらに強化する拡張機能です。

Markdown All in Oneにもプレビュー機能はありますが、Markdown Preview Enhancedを使うと、さらに高機能なプレビューが使えます。

• 数式の表示
• 図表の埋め込み
• PDFやHTMLへのエクスポート
• カスタムCSSでスタイル変更

技術的な文書を書く方や、プレゼン資料を作りたい方には特におすすめです。

文書作成向けの拡張機能も押さえたところで、次はプログラミングと文書作成の両方で使える汎用的な拡張機能を紹介します。

両方に使える汎用おすすめ拡張機能2選

ここでは、プログラミングでも文書作成でも便利に使える、汎用的な拡張機能を2つ紹介します。

vscode-icons

ファイルやフォルダのアイコンを見やすくする拡張機能です。

VsCodeのデフォルトのアイコンはシンプルですが、vscode-iconsを使うと、ファイルの種類ごとに専用のアイコンが表示されます。

例えば、HTMLファイルにはHTMLのアイコン、Pythonファイルにはヘビのアイコンが表示されるので、ファイルの種類が一目でわかるんです。プロジェクトにたくさんのファイルがある場合でも、目的のファイルをすぐに見つけられますよ。

Auto Save

ファイルを自動保存してくれる機能です。

実は、VsCodeには標準で自動保存機能がありますが、デフォルトでは無効になっています。この機能を有効にするには、設定から「Files: Auto Save」を「afterDelay」に変更すればOKです。

拡張機能というよりは設定の話になりますが、この機能を知らない方も多いので紹介しました。作業中に保存し忘れてデータが消えてしまうことを防げるので、ぜひ有効にしておきましょう。

これで10個の拡張機能を紹介しましたが、次は拡張機能を選ぶときのポイントをお伝えします。

拡張機能を選ぶときのポイント

拡張機能は何万種類もあるので、どれを選ぶか迷うことも多いですよね。ここでは、拡張機能を選ぶときのポイントを3つ紹介します。

まずは必要最低限から始める

拡張機能をたくさん入れすぎると、VsCodeが重くなったり、拡張機能同士が干渉してエラーが出たりすることがあります。

まずは、この記事で紹介した10個の中から、自分に必要なものだけを選んでインストールしてみてください。使ってみて、「これは便利だな」と感じたら、少しずつ追加していくのがおすすめです。

インストール数や評価を確認する

拡張機能を選ぶときは、インストール数や評価（星の数）を確認しましょう。

インストール数が多く、評価が高い拡張機能は、多くの人に使われていて信頼性が高い証拠です。逆に、インストール数が少なく、評価が低い拡張機能は、不具合がある可能性もあるので注意が必要です。

拡張機能の詳細ページには、インストール数と星の評価が表示されているので、参考にしてみてください。

学習する言語に合わせて拡張機能を追加する

プログラミングをする場合、学習する言語に合わせて拡張機能を追加するのがおすすめです。

例えば、Pythonを学習するなら「Python」拡張機能、JavaScriptを学習するなら「ESLint」、HTML/CSSを学習するなら「Auto Close Tag」など、それぞれの言語に特化した拡張機能があります。

まずは、この記事で紹介した5つのプログラミング向け拡張機能をインストールして、その後、自分が学習する予定の言語に合わせた拡張機能を追加していくと良いですよ。

拡張機能の選び方がわかったところで、次はよくある質問にお答えします。

よくある質問

拡張機能に関して、よくある質問をまとめました。

Q: 拡張機能は無料で使えるの？

A: ほとんどの拡張機能は無料で使えます。この記事で紹介した10個の拡張機能もすべて無料です。一部、有料の拡張機能もありますが、初心者のうちは無料のもので十分ですよ。

Q: 拡張機能を入れすぎるとVsCodeが重くなる？

A: はい、拡張機能を入れすぎるとVsCodeの起動が遅くなったり、動作が重くなったりすることがあります。必要なものだけを厳選してインストールするのがおすすめです。もし重くなったと感じたら、使っていない拡張機能をアンインストールしてみましょう。

Q: 拡張機能が動かないときはどうすればいい？

A: まずはVsCodeを再起動してみてください。それでも動かない場合は、拡張機能を一度アンインストールして、再度インストールしてみましょう。それでも解決しない場合は、拡張機能のページにある「Issues」を確認するか、VsCodeのバージョンが最新かどうかをチェックしてみてください。

Q: おすすめの拡張機能の組み合わせは？

A: プログラミングがメインなら、以下の5個がおすすめです。

• Japanese Language Pack
• Prettier
• indent-rainbow
• Error Lens
• Git History

この後に、自分が学習する予定のプログラミング言語に合わせた拡張機能を選ぶと良いです。

文章作成がメインなら、以下の5個がおすすめです。

• Japanese Language Pack
• Markdown All in One
• Code Spell Checker
• vscode-icons
• Auto Save

Q: 拡張機能の設定を変更するには？

A: 拡張機能によっては、細かい設定を変更できるものもあります。設定を変更するには、「ファイル」→「ユーザー設定」→「設定」を開いて、拡張機能の名前で検索すると、関連する設定項目が表示されます。または、拡張機能のページにある「歯車アイコン」をクリックして、「拡張機能の設定」を選んでもOKです。

それでは、記事の内容をまとめます。

この記事ではこんなことを書きました

• VsCodeの拡張機能は、VsCodeに新しい機能を追加するプラグインのようなもの
• 拡張機能のインストールは5ステップで簡単にできる
• プログラミング向けおすすめ拡張機能は、Japanese Language Pack、Prettier、indent-rainbow、Error Lens、Git Historyの5つ
• 文書作成向けおすすめ拡張機能は、Markdown All in One、Code Spell Checker、Markdown Preview Enhancedの3つ
• 両方に使える汎用拡張機能は、vscode-iconsとAuto Saveの2つ
• 拡張機能は必要最低限から始め、インストール数や評価を確認して選ぶのがポイント

VsCodeの拡張機能を活用すれば、プログラミングも文章作成もグッと快適になります。まずは、この記事で紹介した10個の中から気になるものを試してみてください。

ここまでお読みいただきありがとうございました。

それではまた次の記事でお会いしましょう。

ばいばいっ！