Visual Studio Code のおすすめ拡張機能編

前回、Ubuntuでサイト制作！Visual Studio Code インストール編 に続いて、今回はVisual Studio Codeについてフロントエンド開発する上でのオススメ拡張機能をご紹介したいと思います。

Visual Studio Codeは最初から日本語に対応しているし、Emmetも標準で装備されているし、Gitでバージョン管理もできるしで、少し見た目を良くしたり管理系の拡張機能を追加すれば、それだけでかなり良い感じのフロントエンド開発用のエディタになるので良いですね。

 Git系

• Git History (git log)
  Gitでエディタ上からコミットやプッシュすることは標準でできるのですが、ログを追って差分をみたりするのには、この拡張機能があると便利です。
  WindowsやMacではSourceTreeやUbuntuであればGitKrakenなどを別途使用すれば、もしかしたらいらないかもですが、エディタで諸々完結させたい場合はもはや必須な拡張機能でしょう。
  
  
  
  
  
  
  
  
  

コーディング系

• Auto Complete Tag
  Webのフロントエンドコーディングをしていると、いちいち閉じタグを書いたり、開始タグのタイプを変えたら勝手に閉じタグも変わったらいいのになーっと思うことありませんか？
  そんな時に便利なAuto Close TagとAuto Rename Tag の両方の機能を併せ持つ拡張機能です。
  と言うより、その二つの拡張機能を一緒に入れて有効にする拡張機能って感じですがw
  • Auto Close Tag
    こちらは、閉じタグを自動で入れてくれたりします。
    また、Sublime Text 3モードで、Sublime的に閉じタグを自動で補完してくれたりします。
    
    

  • Auto Rename Tag
    こちらは開始タグのタイプを例えばdiv→pとかに変更した際に自動で閉じタグのタイプも同じに変えてくれます。
    時々別のところが変わってしまうので、ちょっと注意が必要です。
    

• Path Intellisense
  srcやhrefとしてパスを書き込む際に、自動でそのディレクトリにあるファイル名や子ディレクトリ名の候補を出してくれます。すごい便利！
  

管理系

• Settings Sync
  これ、わたしにとってはもう必須です。
  環境がWindowsとMacとUbuntuとがあるので、それぞれ同期を合わせようとする場合にこれが必要になります。
  GithubのGistに設定をアップしておけば、それぞれで同期することができて便利なので、マルチプラットフォームのVisual Studio Codeにピッタリですね！
• vscode-icons
  ファイルの形式に応じてアイコンを変えてくれます。
  他にも同類の拡張機能はありましたが、これのアイコンが一番気に入っています。
• Project Manager
  開いているフォルダをプロジェクトとして登録することができます。

いかがでしたでしょうか。
CMSMixではフロントエンド開発に対して色々な手法をとっているのですが、Visual Studio Codeをこれから使おうとしている方や、他のエディタを使っている方にも参考になれば嬉しいです。
あと、Visual Studio CodeもVer1.10からMinimapに標準で対応したようでさらに便利になりました♪