「VScode」が使いやすくなるおすすめ拡張機能8選!

VScodeは、拡張機能をインストールすることにより、プログラミングやコーディングを効率的に使うことができるようなります。どのような拡張機能をVScodeにインストールすると便利なのか、その特徴を含め初期設定時の便利な設定内容とともに解説していきます。

目次

  1. 1「VScode」の拡張機能とは?
  2. プログラミング/コーディング作業を効率化する便利な機能のこと
  3. 2「VScode」が使いやすくなるおすすめの設定方法
  4. おすすめの初期設定の手順
  5. 3「VScode」が使いやすくなるおすすめ拡張機能~表示拡張系~
  6. Japanese Language Pack for Visual Studio Code
  7. Bracket Pair Colorizer
  8. Color Highlight
  9. EvilInspector
  10. Trailing Spaces
  11. 4「VScode」が使いやすくなるおすすめ拡張機能~機能拡張系~
  12. Auto Rename Tag
  13. Auto-Open Markdown Preview
  14. Bookmarks
  15. Clipboard Ring
  16. 合わせて読みたい!プログラミングに関する記事一覧

「VScode」の拡張機能とは?

Microsoftによって開発された、プログラミングやコーディングなどに利用できる無料のソースコードエディタであるVScodeは、様々なプログラミングコードに対応しているため、利用している人も多いでしょう。

そのVScodeを利用するにあたり使うと便利なのが拡張機能です。

Visual Studio Code - Code Editing. Redefined

プログラミング/コーディング作業を効率化する便利な機能のこと

VScodeの拡張機能とはプログラミングやコーディングを行っていくうえで便利な追加機能を指します。作業の効率化を行うことができるため、VScodeがより便利で使いやすくなる機能を追加することができます。

拡張機能は、VScode左側のメニューの四角が4つ並んでいるマークから確認や検索、インストールが可能です。

「VScode」でGithubにPull Requestする方法を解説!
VScode(Visual studio code)でGithubにPull(プル)Requ...

「VScode」が使いやすくなるおすすめの設定方法

さて、VScodeの拡張機能を追加する前に、VScodeでのプログラミングやコーディングが効率的に使いやすくなるおすすめの設定方法の説明から始めます。

プログラミングやコーディング時にもたいへ便利な設定ですので、VSCodeで利用すると思われる設定だけでも反映しておくと役に立つこと間違いなしです。

おすすめの初期設定の手順

VScodeのおすすめの初期設定方法ですが、まず[Ctrl(MacはCommnd)]+[Shift]+[P]を押してコマンドパレットを表示させ、「>open settings json」と入力してください。

いくつか項目が表示されますので、そのうちの「Preference : Open Settings(JSON)」(基本設定:設定)を開きます。

下記のコードを、ここの一番下の、「}」の前に貼り付けましょう。

  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "emmet.triggerExpansionOnTab": true,
  "workbench.editor.enablePreview": false,
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "editor.hover.enabled": false

コピペ前に記載されているものがあれば、その一番最後に記載されていた部分の後ろに「,(コンマ)」を付け足すのを忘れないようにしましょう。エラーが表示されてしまいます。

なお、不要なものは後述の説明を参考にして削除してもらえれば問題ありませんが、一番最後の行には「,(コンマ)」を入れないようにだけ注意してください。

自動整形機能の追加

  "editor.formatOnSave": true,

これは、VScodeでファイルを保存する時に、自動的にコードを調整してくれる機能になります。インデントなどがずれている場合、自動で調整してくれる便利な機能です。

  "editor.formatOnType": true,

上記画像のように、ばらばらになっていたものが綺麗に直ります。これがVScodeでタイプ(入力)時にコードを自動で調整してくれる機能です。コードの区切りを入力すると、自動で整形されます。

TabキーでEmmet展開する

  "emmet.triggerExpansionOnTab": true,

これはEmmetを利用する際のオプションとして、Tabキー押下でEmmetを利用できるようになる便利な設定です。Emmetを頻繁に使用する方は特に重宝する設定方法と言えます。

常に新しいタブで開く設定

関連するまとめ

関連するキーワード

この記事のライター
八千草 蛍
分かりやすく気軽に読める記事を書いてまいりたいと思います。よろしくお願いいたします。

人気の記事

新着まとめ