Visual Studio Codeとその拡張機能のまとめ

Visual Studio Code(以下VSCode)、超便利ですよね。実は統合環境的な機能を持つコードエディタに触るのはVSCodeが初めてでして、それまでテキストは何でも秀丸エディタで書いていた人でした。ファイル管理(Git含む)やnpmスクリプトやコンソールなどが統合されている上に、困った時は拡張機能で大体解決してしまう柔軟さが素晴らしいです。Hexoで作成している弊ブログですけどVSCodeを使っているからこそ気軽に運用できていると言えます。

そんなVSCodeに入れてある拡張機能をまとめておきたいと思います。定番ばっかで面白みはないと思いますが備忘録ですね。

拡張機能

Apache Conf

先日.htaccessを書いた時に入れた拡張機能です。VSCodeによくある、特定の言語の文法を色づけしてくれるタイプの拡張機能ですね。入力間違えなどが減るので是非入れておきたいですね。

Auto Close Tag

Auto Complete Tag

Auto Rename Tag

HTMLのタグ打ちする時に便利なヤツ3兄弟です。名前の通り自動でタグを閉じてくれるヤツ、タグ名の補完をしてくれるヤツ、タグの開きを書き直したら閉じタグも直してくれるヤツになっています。入力コストが減るのは良いことです。

Bracket Pair Colorizer 2

プログラムやCSSのコードを書いていると{}やら()やらでいろいろいっぱい括りますよね。その対応したカッコを見やすく色づけしてくれる拡張機能です。これによりスコープが見やすくなるのでコーディングが非常に捗ります。

Git History

GitLens

Gitでバージョン管理している人はとりあえず入れておくド定番拡張機能2種です。Git使い始めたのもVSCode使い始めたのとほぼ同時期だったので、自分にとってはGitのインターフェイスと言えばこれらの拡張になっています。

indent-rainbow

HTMLやらプログラムを書いているとネストをタブなりスペースなりで表現しますよね。こいつはネストの段階ごとに色を付けてくれる拡張機能です。ネストの高さである程度の対応関係なんかは分かりますけど、それに色が付いていると正に一目瞭然となります。

Japanese Language Pack for Visual Studio Code

VSCodeを日本語化してくれるパッケージです。日本人なので入れますよね。

language-stylus

使っているテーマのスタイルがStylusで書かれているので、それをいじる時に見やすくするために入れてあります。VSCodeで初期対応していない言語は結構ありますけど、大体の場合は拡張機能を検索するといくつも出てくるので1つ適当に入れればそれで対応が終わるのが楽で良いですね。

Markdown All in One

Hexoの記事はMarkdown記法で書くので色つけやらコード補完やらが入っている1本となります。リストを書く時とか自動で- を入れてくれたりするので便利ですよ。他にもいろいろ機能があるっぽいですけど使い切れてないですね。

Swig

使っているテーマのレイアウトがSWIGで書かれているので入れてあります。慣れていない言語はせめて色づけだけでもしておかないとワケが分からないので大変助かります。

vscode-icons

エクスプローラビューのいろんなファイル名、フォルダ名、拡張子に応じて別々のアイコンを表示してくれる拡張機能です。アイコンのセットはいくつか存在するみたいですけど自分はこれがピンと来ましたね。

zenkaku

全角スペースに色つけしてくれるだけの拡張機能です。日本語が混在したコードを入力しているとうっかり全角スペースが混ざって不具合が起きたりするので見やすくしておくことで防止できます。あと単純に意図しない全角スペースが許せない勢なのもあります。

まとめ

これらの拡張機能と先日のフォント設定で便利なVSCodeライフを送っています。細かい設定をいじることも可能なんですけど、自分はデフォルトでほとんど困ったことがないのでほぼ初期状態のまま使っていますね。それにしてもこんな便利なコードエディタが無料で使えるとは何と良い時代なのかと思います。

上記以外にも「こんな最強の拡張機能があるよ」とか「この設定をしないのはもぐり」とか教えて頂けると幸いです。ContactやらTwitterなんかに是非投げてください。

それでは。