//ルートにアクセスされたら/archiveにリダイレクトする

エイリーの備忘録

開発や音楽について書いていこうと思っています。

俺選! VScodeおすすめ拡張機能

みなさん、Visal studio codeはどうやって使ってますか?
生でも十分使いやすいエディターですが、プラグインを使うともっと便利になりますよね!
でも、便利そうなプラグインを探してみると、いろいろな記事は出てくるけど実際に使うかどうかわからない・・・ということはありませんか?
というわけで今回は私が実際に使っているプラグインを紹介したいと思います。

拡張機能プラグイン)のインストール方法

まず、vscodeを開き、左メニューの一番下にあるアイコン(拡張機能)をクリックします。
f:id:youmjww:20170508021529p:plain

上にテキストボックスがあるのでそこにパッケージ名を入れると検索できますので、検索して
f:id:youmjww:20170508021752p:plain
目的のプラグインのインストールボタンをクリックします。
あとは、VScodeを読み込み直すだけでプラグインが使えるようになります。

Auto Close Tag

このプラグインはHTMLタグを炊いている最中に重宝するタグで、例えば、

<div>

上のようにHTMLタグを書くと、自動で

<div></div>

閉じタグを挿入してくれます。

Auto Rename Tag

このプラグインは、HTMLを書いている最中に、あれ・・・?ここ、h1じゃなくてh2のほうがよくね?
ってなった時などに役に立ちます。
具体的には、開始タグもしくは、閉じタグの中を変えると、自動的に対になってるタグの内容を更新してくれます。
つまり、タグを変えるのにわざわざ2回も変更をかけなくて済みます。

Trailing Spaces

このプラグインは、入力された最後の文字の後ろにtabや空白が入っていたら強調してくれます。
f:id:youmjww:20170508014149p:plain

Git History

このプラグインは、VScode上でgit logを見ることができます。
使い方は、Ctrl + Shift + pを同時に押して、 git logと入力するだけです。
f:id:youmjww:20170508015810p:plain
上の写真のような感じでコミットを確認することができます。

vscode-icon-rotation

VScodeでは最初はアイコン画像は何も設定されていません。
拡張機能をインストールしてあげることによりファイルのアイコンを設定してあげることができます。
いくつか種類はあるのですが、私はこのプラグインが一番見やすいかなと感じました。
設定方法は、上メニューで、「ファイル」→「基本設定」→「ファイルアイコンのテーマ」と選択し、seti(visual studio code)をクリックするだけです。
f:id:youmjww:20170508020556p:plain

あとがき

以上が私が使っている拡張機能です。
こうやって見てみるとあまり使っていないですねw
ですが、裏を返せば、そもそもVScodeが高機能であまりプラグインを用いなくても十分使用に耐えれるエディタだと言えると思います。
正直ここから先は使うものをその時に応じて入れていけばいいのかなと思います。