rui-log.com
VisualStudioCodeの拡張機能まとめ

私がインストールしたVisual Studio Codeの拡張機能まとめ

VSCodeの拡張機能って何入れたらいいんだろう?何入れたっけ?となることはよくある話。

そこで、現在私の利用しているVSCodeの拡張機能をまとめて紹介します。

VisualStudioCodeの拡張機能まとめ

基本的な拡張機能

Japanese Language Pack for Visual Studio Code

VSCodeを日本語化する拡張機能。

なぜか私の環境では”無効”になっているのに日本語化は継続中。

他の人のVSCodeを見せてもらったら有効にしていないと英語表記だったのでよくわからないけれど、最初に入れるやつと認識していて良さそう。

▷Japanese Language Pack for Visual Studio Code

zenkaku

VSCodeで全角スペースがあるとグレーに表示してわかりやすくしてくれる拡張機能。
コードを書くときは基本的に半角スペースしか利用せず、全角スペースはNGなことが多いので導入。

VSCodeの拡張機能zenkaku

▷zenkaku

テキスト校正くん

VSCodeでテキストファイルやMarkdownファイルの日本語を校正してくれる拡張機能。
100%正しいとは言えないところは仕方ないのかもしれないけれど、目安にはなるなと思い導入。
ある程度の構文知識がないと逆に間違ってしまうこともあるかもしれないが、あるとないとでは差がでるのかなと思う。

VSCodeの拡張機能テキスト校正くん

▷テキスト校正くん

htmlなどコード系の拡張機能

Auto Close Tag

VSCodeでタグ< >を書いたら、自動で閉じタグを生成してくれる拡張機能。

VSCodeの拡張機能AutoCloseTag

時間短縮もチリツモです。

▷Auto Rename Tag

Auto Rename Tag

タグを書き換えたとき、自動で閉じタグも更新してくれる拡張機能。

VSCodeの拡張機能Auto Rename Tag

▷Auto Rename Tag

Bracket Pair Colorzier

VSCodeでコードを書いたときの()や{}をわかりやすく色を変えてくれる拡張機能。

かっこの色が一緒になり判別することができるので、一致させやすい。

VSCodeの拡張機能BracketPairColorzier

▷BracketPairColorzier

HTML CSS Support

htmlやcssのコーディングをするサポートをしてくれそうだったので入れてみた

▷HTMLCSSSupport

HTML Preview

VS Codeでhtmlファイルのプレビューを見る。

他のショートカットキーとバッティングする場合があるので、

  • Win:Ctrl + Shift + P
  • Mac:Cmd + Shift + P

で「>HTML:open Preview to the Side」を選択してサイドバーにプレビューを表示させている。

▷HTMLPreview

Markdown系

Markdown PDF

VS CodeでMarkdownファイルからPDF出力したり、html出力したりできるようになる神がかった拡張機能。
資料作成から提出までが鬼早くなりました。

VSCodeの拡張機能Markdown PDF

▷MarkdownPDF

Markdown Preview Enhanced

VSCodeでMarkdownのプレビューをするためのの拡張機能。

  • Win:Ctrl + K → V
  • Mac:Cmd + K → V

でサイドバーにプレビュー表示ができる。

▷Markdown Preview Enhanced

Markdown Preview Github Styling

こちらもVSCodeでMarkdownのプレビューを表示させるための拡張機能。お好みで。

▷Markdown Preview Github Styling

Markdown Preview Github Styling Custom

VSCodeでMarkdownのプレビューのスタイルを変更するための拡張機能。

CSSをいじると自分好みのプレビューで見れます。

▷Markdown Preview Github Styling Custom

markdown-index

VSCodeでMarkdownを書き、もくじ(TOC)を作成し、各項目にインデックス・・・番号を自動で振り当てることができる拡張機能。

▷markdown-index

markdownlint

VSCodeでMarkdownの構文を自動チェックしてくれる拡張機能。
Markdown記法自体がはじめてだったので、チェックしてもらおうと入れてみた。
書き方の矯正ができる。

▷markdownlint

Paste Image

VSCodeでMarkdownファイルへ直接画像をコピペできる拡張機能。
画像はMarkdownファイルが保存されている階層に貼り付け時に保存される。
超便利。

VSCodeの拡張機能Paste Image

▷Paste Image

ファイル読み込み系

Rainbow CSV

VSCodeでcsvファイルを開くとカンマ「,」区切りごとに色を変えてくれる拡張機能。
csvも開くかな?と思ったけどcsvはやっぱりエクセルばっかり使ってた。

VSCodeの拡張機能Rainbow CSV

▷Rainbow CSV

vscode-pdf

VSCodeでPDFを開ける・見れるようになる拡張機能。
一応入れておいたけど、まだPDFビューアーで見ている自分がいる。

▷vscode-pdf

まとめ

Visual Studio Codeの拡張機能で私の利用しているものをまとめてみた。

あまり利用していないような拡張機能や、もしかしたら細かいところでバッティングしているのでは?という拡張機能もあるかもしれないけれど、今の所こんな感じで利用できている。

一番活用できた!と思っているのはMarkdown記法で書いた資料をMarkdown PDFでPDF化し提出するというところ。

見栄えは良いし、Paste Imageで画像も簡単に入れられるし、とても重宝しています。

業務の短縮・効率化を図ることができ、時間を作ることができるので是非利用してみてください。

画像参照:visualstudio marketplace