どうもIbukishです。
Visual Studio Code（以降VSCode）を使って開発をしている人は多数いらっしゃるのではないでしょうか？
個人的にはVSCodeは優れた開発ツールだと思っています。特に豊富かつ優秀な拡張機能は非常に魅力的です。
拡張機能を使いこなすことがきれば、VSCodeでの開発はますます快適になると思います。
そこで本記事では自分が実際に導入して活用しているVSCodeの拡張機能10選を紹介します。
Visual Studio Codeで便利な拡張機能10選
VSCodeの拡張機能は非常に優秀です。拡張機能を使いこなすことで開発効率は何倍にもなると思います。
拡張機能の紹介に移る前に、まず自分の現場での開発言語を紹介します。
- JavaScript
- React + MobX（Redux）
- Scss
- Python（3.6系）
メインで使っている言語はJavaScriptとPythonです。ですので紹介する拡張機能もJavaScriptやPythonに特化しているものが多いと思います。
ですが、言語関係なく横断的に活用できるものもあるのでぜひ参考にしていただけたらと思います。
開発全般
まずは言語関係なく開発全般で活用できる拡張機能を紹介します。
Code Spell Checker
名前にあるようにスペルミス（タイポって言うことが多いかも）があった場合に波線で間違っていることを強調してくれます。すでにその言語に組み込まれている関数等のスペルミスであれば、実装時にエラーが発生するからすぐに気付くことができますが、自分で定義した関数や変数の場合は以外と気づきません。間違ったままコピーで色々な箇所に貼り付けてしまったらリカバリーも大変です。
スペルミスは地味ですが、インパクトは非常に大きいです。
変数名、関数名でのスペルミスは可読性や保守性の低下の低下の原因となります。
例えばuploadと関数名を設定する予定が、uplaodとなっていたとします。開発、改修の際にuploadと検索してもなにもヒットせず、上から順番にソースコードを見ていかないといけません。
また保守面では障害発生時のログの調査の際にも同様に検索にヒットしないなどの不都合が発生し、スムーズな原因調査ができない可能性があります。
他にも複数人で開発している場合、お互いのソースコードを合わせた時に想定した関数、変数が存在せず、動かない可能性もあります。手戻りの原因になってしまい余計な時間を使ってしまいます。
ぜひ導入しておきたい拡張機能です。
Tips
この拡張機能ではプロジェクト名など、世の中に存在する単語ではないためにスペルミスとして強調されてしまいます。流石にそれは煩わしいと思うので回避する方法を紹介します。
該当する単語を辞書に登録すれば、意図しない波線を出さないようにすることが可能です。
まず辞書登録をしたい単語を選択します。
今回はpytestを追加したいと思います。
選択したらCommand (Ctrl) + shift + pを同時に押します。
そしたら [Add Word to Workspace Dictionary] を選択します。Global dictionaryがあるのであればGlobal dictionaryを選択した方がいいです。（なぜかGlobal dictionaryが出てこなかった、、、）
選択できたらこれで辞書登録の完了です。辞書登録が完了すると波線が消えると思います。
これで今後pytestはスペルミス扱いされることはなくなります。
Draw.io Integration
言わずとしれた作図ツールですね。
フローチャート、レイアウト図、ネットワーク図、ER図などなど様々な図を簡単に作成することができます。
SVCodeで作成してそのままGit管理できるのも良い点だと思います。.drawio, .dioのどちらかの拡張子でファイルを作成するだけでEditorが立ち上がります。
また作成した図はSVGをはじめとした画像形式、HTML, XML形式など多数の形式でのExportが可能です。
Tips
初期の設定では作成したファイルのExportができないようになっているため、設定を変更してExportを可能にする方法を紹介します。
まずはVSCodeのExtensionを選択し、Draw.ioを選択します。
Draw.ioの右側にある歯車を選択し、 [Extension Setting] を選択します。
設定画面に遷移すると、真ん中あたりの [Hedit] の設定に付いているチェックを外します。
これで完了です。
作図画面に移動して、右上の [File] -> [Export as] がアクティブになって選択できるようになっていれば設定の変更が完了しています。
ここから任意のファイル形式でExportをすることができます。
GitLens
これはリアルタイムで選択している行の最後のコミットが情報が見えます。
いつ、だれがコミットしたのかが一発でわかるのは非常に便利です。複数人で開発をやっていると、当然ながらじぶんが認識していないソースコードもあります。
今まではgit logやgit blameを使って調べていましたが、GitLensを入れていればその場で確認ができるので非常に便利です。
またその行に表示されているコミットの情報にマウスを合わせると詳細が確認できます。コミットハッシュも取れるのでこのコミットがどのようなMerge request（Pull request）によって追加された変更であるかを調査することもできます。
多くの人数が所属するプロジェクトではだれが実施したコミットであるのかがすぐに判断できるのは非常に便利で、コマンドを実行する手間を省くことができるのはストレスフリーかつ効率の向上が期待できます。
開発面に限らずあらゆる面で活躍する強力なツールですので、ぜひ導入してみてはいかがでしょうか？
Bracket Pair Colorizer 2
こちらは対応する括弧を同じ色にして表示してくれます。Pythonではあまり使いませんが、React（JavaScript）では非常に活躍します。チェーンメソッドをつないでいるとどうしても括弧が増えてしまい後ろに括弧が複数ならぶことも珍しくはないと思います。
このようなときに対応する括弧が同じ色で表現されているとどこからどこまでがその一連の処理であるかがすぐに分かります。
また、わかりやすいだけでなく対応する括弧がない、もしくは多いなどの場合にもすぐに検知できるので実行してエラーが発生してはじめて気付くみたいなことを防ぐことができます。
極端なコードを書いてみましたが、画像のように括弧が乱立してもそこまで苦労することなく対応する括弧がどこにあるかを見つけることができます。
導入する価値が大いにある拡張機能でだと思います。
indent-rainbow
ソースコードの同じインデントを同じ色で表示してくれます。
Pythonのようにインデントを揃えることが命に近いような言語では非常に活躍します。
深いネストや画面内に収まらない関数など、一発でどこと対応するインデントかがわかりにくい場合に色があると、同じ色を探せばいいため非常に可視性が上がります。
下図のようにインデントが一発で分かるのは非常に便利です。
Pythonエンジニアには必須と言っても過言ではない拡張機能だと思います。
ぜひ導入してみてはどうでしょうか？
JavaScript（画面開発）
続いてJavaScriptや画面開発の際に活用できる拡張機能を紹介します。
ESLint
ESLintはJavaScriptで使うリンターの中でもトップレベルにメジャーなリンターだと思います。ソースコードの潜在的なエラーをチェックしてくれます。
コードの一貫性、デッドコードの検知、品質の向上の期待ができます。
特に複数人で開発を行うプロジェクトではコードの一貫性は非常に大切になってきます。インデントや括弧の配置方法など細かいが人によって差分が出がちな箇所を半強制的に統一することができます。
拡張性にも優れており、じぶん用の設定やプロジェクトでの共通設定ができるのも非常に便利な点の１つです。
小さなことではありますが、この辺りを自動で実施してくれることは開発効率の向上にも繋がるので、ぜひとも導入したいツールです。
SCSS Formatter
画面サイドの開発では欠かせないSCSS（CSS）のフォーマッターです。この拡張機能を入れるとSCSSファイルを保存した際にコードを自動整形してくれます。
下図では保存の際に改行やスペースを自動で追加してフォーマットを整えてくれています。
また拡張機能名にはSCSSと書かれていますが、CSSファイルのサポートもしているので画面サイドの開発をする際の必死機能と言っても過言ではないと思います。
このようなオートフォーマット機能は複数人で開発をする際に全員が導入していると、誰が編集コミットしても、コード整形による変更差分が生じないためソースコードレビューも非常に楽になります。
導入する価値は十分にあると思うので、ぜひ開発メンバー全員で導入してみてはいかがでしょうか？
Python
続いてはPythonの開発の際に活用できる拡張機能を紹介します。
AREPL for python
こちらは最近Twitterでフォローしている方のツイートを見て知った拡張機能です。
Pythonのソースコードをコードの実行をせずにリアルタイムデバッグしてくれます。
※Pythonのバージョンが3.5以上である必要があります。
またデバッグした結果エラーが発生すればエラー箇所を教えてくれ、表示されているエラー文をクリックするとGoogle検索が実行されます。
こちらのGoogle検索はエラー文をそのままGoogleの検索ボックスに入れているだけなので、常に完璧な検索ができるとは限りません。エラーコードをコピーしてブラウザを開いて検索する手間を、ワンクリックで行ってくれるのは楽です。
実際の開発の際にこの機能をどの程度使うかというと、自分は意外と使いませんでした。ただ関数単位で想定値を渡して返り値をチェックすることができるので、状況によっては活躍しています。
またPython初学者にとっては自分の実装しているソースコードがどのような動きをしているかを常にチェックできるし、エラーが発生するとすぐに分かるので勉強ツールとしては非常に便利なのではないかと感じています。
実際に自分のプロジェクトでもPython初学者にはAREPLを入れてもらって、常にコードの動きをチェックしながらタスクに取り組んでいただいています。
Python初学者はぜひ使ってみてはいかがでしょうか？
Python Docstring Generator
続いては自動でDocstringのテンプレートを生成してくれる拡張機能です。
Pythonでは他の言語と異なりデータ型の宣言をしなくても実装できます。また変数に代入された値に対して他のデータ型の変数で上書きすることもできてしまいます。
ですのでどのデータ型の値を持っているかを判断する方法は変数名や関数名で示すか、Docstringに明記する必要があります。
Python3.5からは型アノテーションが組み込まれたので引数や関数の返り値のデータ型を明示的に表記することが可能になりました。型アノテーションを記載している場合はmypyというPythonライブラリを使うことで正しいデータ型が入ってきているかをテストすることができます。
ただ自分のプロジェクトでは複数人のメンバーでの開発が前提かつ、保守運用も自分たちで実施します。また流動的なプロジェクトであるためメンバー変更の頻度が高く他人が実装したソースコードを読むことが頻繁にあります。そのような場合にはDocstringが活躍します。
Docstringを記載することによってその関数、クラス、ファイルがどのような目的で実装され、かつ引数や返り値の期待している型を記載しておくことが可能です。
さらにはraiseするエラーを記載しておくことも可能で、どのような処理でそのようなエラーが発生した場合にどのようなエラーを出力するかの説明も記載できます。
このようにDocstringで詳細を記載することで、誰が見てもその箇所の処理がなにを行っているかを理解することが可能です。またどのような値が渡され、どのような値を返すことを期待しているかも分かるため、間違った実装がされていた場合どこで想定外の値が使われるようになったのかをすぐに特定することが可能になります。
Docstringは書く派の人と書かない派の人がいらっしゃるとは思いますが、書く派の人は是非導入してみてはいかがでしょうか？
Tips
自動生成の方法とデフォルトフォーマットの設定方法を紹介します。
まずは自動生成の方法です。
Docstringを自動生成したい場合は、該当箇所で”””（ダブルクォーテーション３つ）を入力すると生成してくれます。
関数の中で作成する場合、引数、raiseするエラー、返り値を記載してある場合は自動でそれらの変数名（エラークラス名）をDocstring内に記載してくれます。
ですので関数を作成した後にDocstringを作成すれば効率よく記載することができると思います。
続いて設定の方法です。
[Extention] -> [Python Docstring Generator] で検索し、[右下の歯車を] 選択すると設定画面が表示されます。
設定は個人差が出ると思いますので、各自設定をしていただけたらと思います。デフォルトから変更する可能性が高い箇所は、[Format] と [Quote Style] でしょうか？
FormatはDocstringのフォーマットのことです。Docstringのフォーマットに関してはこちら参照していただけたらと思います。
じぶんはGoogle styleを普段から使っているため、Googleを選択しています。
またデフォルトではDocstringをくくるクォーテーションはダブルクォーテーションになっています。シングルクォーテーションを普段から使っており、変更したい場合は画像で言うと下から2番めの [Quote style] を変更します。
これで最低限の設定は完了です。
残りの設定は個人の好みやプロジェクトでのルール次第だと思います。
自分は特に設定はしていません。
Python Indent
Python IndentはEnterを押下して改行した際に、従来のインデント調整の機能よりもより適切なインデントの位置に改行後のカーソルをあわせてくれます。
インデントが重要となるPythonでは非常に便利です。
常に自分が意図した通りのインデントになるとは限りませんが、ほぼ意図通りのインデントにしてくれるので非常に開発効率が上がります。
インデントをあまり気にしなくてよくなる分コーディングに集中できます。
ベテランエンジニアも初心者エンジニアも使える機能ですので、ぜひ導入してみてはいかがでしょうか？
Python-autopep8
Pythonを実装する上で無視できないPEP8。
20年近く前に初版が作成されたものが今でも使われていることからもそれだけ重要であることが分かると思います。
Pythonは良くも悪くも曖昧な実装が許容される言語です。それ故にこのようなスタイルガイドがないと個人のカラーが出まくったソースコードが作成されてしまいます。個人で実装する分には問題ないと言えばないですが、他人とソースコードを共有するときはある程度の共通のスタイルがあった方が可読性が上がります。
この拡張機能を導入するとファイル保存時に自動でPEP8規約に沿ったソースコードに整形して保存してくれます。
忘れがちな演算子のスペースなどを補ってくれるのは非常にありがたいです。
PEP8はあくまでガイドラインなので常に従順なコーディングをする必要はありません。現場では状況に応じて柔軟な実装が求められます。
とは言えPythonエンジニアとしてはPEP8はある程度は押さえておくべきだとは思います。
可読性の向上、プロジェクト内でのコードの一貫性の保持などのために導入する以外にも、自分が書いたコードのどこがPEP8に準じていなかったのかを知るためにも拡張機能を導入してもいいのではないかと思います。
Pythonで実装をするのであれば外せない拡張機能です。ぜひ導入してみてはいかがでしょうか？
オマケ
最後は開発効率の向上とは全く関係がないが個人的に気に入っている拡張機能を紹介します。
Glasslt-VSC
背景の透過率を変更することができる拡張機能です。
あまり実用性はありません(笑)
ただ単純に半透明で後ろが透けているとカッコイイと自分は導入しています。
まとめ
いかがでしたか？導入したいと思う拡張機能はありましたか？
VSCodeの拡張機能は非常に種類が豊富です。PHPなどの他の言語に特化した拡張機能もあるので、探す価値は大いにあると思います。
快適かつ効率的なコーディングライフを送るためにも、存分に活用していきたいものです。
みなさまの参考になりますと幸いです。
コメント