2018年2月23日

【基本編】使ってる?Visual Studio Code おすすめプラグイン紹介 #01


Content
おすすめプラグイン紹介
お久しぶりです。つよしたかのでございます。
前回VisualStuidoCodeの記事:使ってる?コードエディタ『Visual Studio Code』のススメを書いてから2か月ちょっと経ちましたが…皆さん楽しくコーディングしてますか??寒さに負けずにガンガンコーディングしてこうぜー!
さて、今回ですが。VisualStuidoCodeをより便利にするプラグインをいくつか紹介したいと思いますが、なかでも言語や環境に関わらないような基本となるものを少しだけ紹介したいと思います。

プラグインってどうやっていれるのよ?

プラグインの紹介をする前に…そもそもプラグインってどうやって入れるんですか。って話ですよね。プラグインを導入する場合、Visual Studio Codeのサイドメニューの上から5番目のアイコンをクリックしてください。すると、検索のウィンドウが開きます。

SearchPlugin_1

ここでお好みの検索キーワード(htmlとか、Goとか、Pythonとか)を入力してみてください。ヒットすると検索キーワードに関連するプラグインが出てくるかと思います。検索結果をクリックするとそのプラグインの詳細を読むことができます。

SearchPlugin_2

ダウンロード数の多い人気のプラグインはやはり便利なものが多いですが、入れてもすぐ消すことができるので自分で発掘して色々試してみると面白いと思います。

入れ方が分かったところで、次は早速プラグインの紹介に行きたいと思います!

おすすめプラグイン【基本編】

アイコンを見やすいアイコンに!

VscodeIcons

Visual Studio Codeでは様々な種類のファイルを取り扱うことができますが、エディタ内のファイルのアイコンを拡張子に応じて見やすいアイコンに変換してくれるプラグインです。

VscodeIcons_screen

Visual Studio Codeのデフォルトでも拡張子別にある程度アイコンの設定はやってくれるのですが、これを入れると編集中のファイルの種類がより分かりやすくなります。さまざまなソースコードのファイルに対応しているため、ぜひお試しください!

 プラグイン名   vscode-icons 
 URL   https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons 

いらない空白、入ってますよ。

TrailingSpaces

ファイルやソースコードをを触ってると、気付いたら末尾に不要な空白やタブが入ってしまうときってありますよね。それを教えてくれるのがこのプラグインです。

TrailingSpaces_screen

Trailing Spacesを入れることにより、タブや空白が入っている箇所に対して赤く通知をするようにしてくれます。言語によってはタブや空白の影響でエラーや不具合の原因となってしまうこともありますし、たまに無意識のうちに入ってしまった気持ちの悪いタブや空白も未然に防ぐことができるため入れておいて損はないでしょう!

 プラグイン名   Trailing Spaces 
 URL   https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

コード上の括弧が見やすくなる

BracketPairColorizer

主にソースコードなどをいじくってるとさまざまな種類の括弧を利用することが多くなってきて、見づらくなってくることってありませんか?そんなとき、少しだけ見やすくしてくれるのがこのプラグイン。

BracketPairColorizer_screen

Bracket Pair Colorizerを入れるとこんな風に括弧に色がつくわけですが、入れ子にした括弧についても階層ごとに水色や黄色や紫に色付けしてくれます。特にjQueryとか使ってるときなどついつい括弧が多くなってきてしまいますが、これを使うとコードが少し読みやすくなります。

 プラグイン名   Bracket Pair Colorizer 
 URL   https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer 

さいごに

ワタシ個人が業務・プライベートで好んで利用しているものの紹介になってしまいましたが、いかがででしたしょうか。自分にあった快適な環境があるとより質の良いアウトプットを出せるんじゃないかと思います。僕はこんな風にカスタマイズしてます、私はこんな設定入れてます!なんてものがあればぜひ教えてください。
次回からはより開発よりのプラグインを紹介できればと思います。では、また。

2018年2月23日 【基本編】使ってる?Visual Studio Code おすすめプラグイン紹介 #01

Category 開発ブログ(技術ブログ)

ご意見・ご相談・料金のお見積もりなど、
お気軽にお問い合わせください。

お問い合わせはこちら