Visual Studio Code にインストールするならコレ！ おすすめのエクステンション７ジャンル（フロントエンドエンジニア向け）
Microsoft は本当に良いものを作ってくれました。
特殊な事情がない限りコーダーだったりウェブエンジニアは Visual Studio Code （以後 VS Code）をインストールしておけば安定だと思います。
至高のプログラムエディターである VS Code をより使いやすくするために、エクステンションのインストールは必須。
まずはコレをいれておくと安心なエクステンション（拡張機能）を紹介します。
と、そのまえにエクステンションのインストールの仕方を先に紹介しておきます。
- サイドバーにある Extensions アイコンをクリックします（ショートカットなら Ctrl + Shift + X ）
- 入力欄にインストールしたいエクステンションの名前を入力します
- 表示されたら Install をクリック
インストールは以上！
それでは、日本人のフロントエンドエンジニア向けのオススメエクステンションのご紹介していきます！
1 日本語に対応させよう
VS Code は初期状態のUIが英語。まずは母国語の日本語パック Japanese Language Pack for VS Code をインストールしましょう。
気付かずに混入していた全角スペースのせいでコンパイル通らないとか嫌ですよね。
zenkaku をいれておきましょう。
日本語の文章をチェックできるエクステンションが テキスト校正くん。
テキストファイル、Markdown ファイルなどでしか動きませんが、綺麗な日本語を書くときの助けにはなります。
2 Theme と アイコンを変えよう
アイコンとテーマ変えよう！ デフォルトでも多数用意されていますが、自分の好きな色にしたほうが気持ちもあがりますよね。
テーマは本当に好みなので、オススメも難しいのですが…ボクはダークテーマかつコメントが見やすいのが好きなので、以下の2つをオススメします。
アイコンで評判が良いのは Material Icon Theme か vscode-icons ですね。
他にもたくさんあるので、自分好みのテーマを探してみると良いかも。
3 Git を使いやすくするために
Git History と GitLens の2つが優秀すぎるので、まずはいれておきましょう。
無難。
4 HTML を書くなら
マッチングするHTMLタグを下線で強調表示してくれるエクステンションが Highlight Matching Tag 。
視覚的にペアが解るのは安心します！
5 CSSを書くなら
括弧のペアがわかりやすくなるエクステンションが Bracket Pair Colorizer 2 。
JavaScript も書くなら、とりあえずいれておきましょう。
ファイルを保存したら自動で .scss がコンパイルされます。お手軽が過ぎます。
.less、.sass にも対応していますし、なんなら .ts と .js も。
6 JavaScript を書くなら
AI による JS のヒントを提供してくれるのが Visual Studio IntelliCode。
コードの入力時に自動的にいい感じのヒントが提示されます。インストールしない理由がないくらいに優秀なエクステンションですよ。
7 インストールしておくと便利
marketplace.visualstudio.com選択範囲のテキストのソートができるのが Sort lines。
ソートしたい範囲を選択して F9 を押すもしくはだけのお手軽さ。
選択したら Ctrl + Shift + p でコマンドパレットを開いて sort と入力して、エクステンションを選べば、昇順、降順、文字数でのソート、重複を削除してソート、などもできます。
デフォルトでついているので Formatter は割愛します。
ひとまずフロントエンドエンジニアが VS Code を始めるなら、紹介してきたヤツをいれておけば大丈夫だと思います。
開発環境にあわせて取捨選択していってくださいね。
オススメのエクステンションがあったら、コメント欄とかで教えてくれると嬉しいです。
