VSCodeの人気-ランキング

今日は私が日頃使っているVSCodeの拡張機能をご紹介したいと思いますが、その前に最近の開発環境（エディター）の動向について確認したいと思います。下記横棒グラフは、Stack Over Flowの2019年調査から引用した開発環境の人気ランキングです（Top10のみを抜粋）。2019年は約87,000人のディベロッパーがアンケートに回答しました。こちら複数回答が可能なアンケートですので、VSCodeは回答者の半数以上に支持された最も人気のある開発環境ということになります。

↓応援クリックよろしくお願いします↓

VSCodeのインストール

VSCodeは、こちらからインストール可能です。VSCodeは、Windowsでもmacでも問題なく動きますので、皆様の環境にあったバージョンをインストールしてみてください。VSCodeを開いた後、画面左側の拡張機能アイコンを押します。下記の赤い部分です。

拡張機能アイコンをクリックすると、下記画像にあるのようなサイドバーが現れます。赤く囲ったINSTALLEDとある部分に、インストール済みの拡張機能が表示されますが、参考までに私がインストールしたものは次の通りです：

1. Beautify
2. Bracket Pair Colorizer
3. Current File Path
4. ES7 React/Redux/GraphQL/React-Native snippets
5. GitLens – Git supercharged
6. Kite AI Code AutoComplete
7. Tabnine AI Code AutoComplete
8. Live Server
9. Live Share
10. One Dark Pro
11. Prettier – Code formatter
12. Vim
13. vscode-icons

12のうち主要なもの8つをご紹介します（数えると9つあるのですが、1つは拡張機能ではないので8つ）。まだ何もインストールされていない方は、この部分にRECOMMENDEDが表示されていると思います。

VSCodeの拡張機能のご紹介

GitLens – Gitsupercharged

始めにご紹介するのは740万ダウンロード（2021年1月現在）のGitLensです。上記サイドバー上部の検索ボックスでgitlensと検索すると、installというボタンの付いた候補が多数現れます。うち、一番上に表示されたものがこの拡張機能ですので、同installボタンを押せばインストールできます（以下同様）。

GitLensはターミナルからいちいちgit statusと打たなくても、コード上の行の右側の空間をマウスでホバーするだけでコードの時系列な変化を追うことができます。具体的には、下記の右上のようなポップアップが現れます。ここでは、1時間前にimgタグを消して、divタグに変更を加えた記録が見れます。

Live Share

次にご紹介する拡張機能は、リアルタイムでペアプログラミングを可能とする機能です（360万ダウンロード）。他のEditorには類似の機能なく、この拡張機能の存在だけでもVSCodeを選ぶに十分です。Live Shareインストールの後に、サイドバー左下に赤く囲った矢印アイコンが出現します。同矢印アイコンを押し、続けて表示される青いShareボタンを押すことで、他の人と自分のワークスペースを共有した作業が可能になります。localhost:3000で稼働中のアプリも共有可能です。なお、事前にgithubのアカウントと、相手方にもVSCodeが必要です。GitLensと同様、こちらは使用する言語に固有ではありませんので、PythonエンジニアでもWebエンジニアでも共通して使えます。

Prettier

次は1,000万ダウンロードのPrettierです。こちらの拡張機能は、特別何もせずとも、ファイルを上書きする都度、インデントのズレや余計な空白を除去してくれます。ただインストールするだけでは動きませんので、下記二つの設定をしてます。左下の歯車アイコンからsettingをクリック、続けて表示される中央上部の検索ボックスでformatと検索します。1.Default Formatterでprettierを選択し、2.Format On Saveのチェックボックスを入れれば完了です。なおこちらPythonでは機能せず、Webエンジニア用です。

Beautify, Bracket Pair Colorizer

それぞれ別の拡張機能ですが、前者（590万ダウンロード）はコードに、後者（420万ダウンロード）は括弧に色を付けてくれるので、コーディングの画面が非常に見やすなります。セットでインストールされることを推奨します。この記事で共有した私のコード画面では両者が反映されています。この2つもPythonでは機能しませんが、Pythonは元々のVS Codeに備わっている色でも十分な十分な他、括弧についても他の言語のように複雑に入り組むことがないので、とくにBracket Pair ColorizerはPythonユーザーには不要な機能と言っていいと思います。

Kite AI Code or Tabnine

Kiteは180万ダウンロードのオートコンプリートの拡張機能です。VSCodeのもともとのオートコンプリートも十分にいい性能ですが、こちらはさらに痒い所に手が届くオートコンプリートです。

Tabnineは後発（55万ダウンロード）ですが、Kite以上の性能なように思います。いずれも多様な言語に対応していますが、Tabnineは、JavaScript, Python, JAVA, TypeScriptを対応言語のTopに例示し、KiteはPython, JAVA, JavaScript, HTML/CSS, Go, PHPを対応言語の上位に挙げており、PythonユーザーでもWebエンジニアでもかなりお勧めの拡張機能です。使用感は両者似ていますが、私は現在はTabnineをメインに使っています。

Emmet

こちらはインストールせずとも、もともとVSCodeに備わっている機能です。オートコンプリートに近い機能で、（主にHTMLの）コーディングのスピードが向上します。例えば、divタグの中にliエレメントを3つ、それぞれクラス名”listElement”をもたせて作りたい場合は、「div>li*3.listElement」と入力してTabキーを押すだけで完成します。インストール不要ですが、EmmetのTabキーを有効化する設定を要します。左下歯車アイコン、settingで表示される設定画面の検索ボックスで、emmetと検索、スクロールすると下記画面になりますので、Trigger Expansion On Tabのチェックボックスをチェックしてください。

Vim

vim入力という特殊な入力モードが使える拡張機能です（218万ダウンロード）。慣れるのに数週間から数ヶ月かかりますが、言語に関わらずコードの入力スピードが2-3倍になります。学習中も2-3倍のスピードでコードが書けますので、新たな言語やライブラリーの習得スピードも劇的に上がります。使わない人も多いので7番目に紹介していますが、個人的にはTop3に入るお勧めの拡張機能です。インストール後すぐにvim入力モードになりますので、学習開始時点でのインストールをお勧めします。もちろんこちらの拡張機能は、PythonでもWebエンジニアでも幅広い言語に使えます。

ES7 React/Redux/GraphQL/React-Native snippets

こちらはReactを使う方専用で219万ダウンロードです。この拡張機能を利用すると、rfce + Enterを打つだけで、次のようなReact.jsのボイラープレートが完成しますので、すぐにコード本体に取り掛かることができます。ここでは、todo.jsという空ファイルを新たに作成したのですが、内部の関数の名前もファイル名に併せてくれます。rfceの他、主要なショートカットキーは次の通りです。

• rfce + Enter: react.jsの最小限のボイラープレート（関数コーポーネント）
• rce + Enter: 空のクラスコンポーネントから開始
• rpce + Enter: 空のpropTypesをセットアップ
  
  
  
  

Python + Jupyter

PythonをVSCodeで使うためには、前提としてOSにPythonがインストールされている必要があります。MacではPythonが標準インストールされていると聞きますが、Windowsではインストールが必要です。PowerShell等のターミナルで「python」と打って、Pythonの実行環境に移ればインストール済み、Pythonの実行環境に入れなければ、Pythonのインストールを要します。インストール方法はPythonの単品インストールか、Anacondaパッケージでのインストールかの2択です。やや重くなるのですが、私はPythonの単品ではなく、周辺ライブラリーや必要な周辺環境を一括してインストールできるAnacondaを使っています。

OSでのPython環境構築が済んだ後は、PythonとJupyterの2つの拡張機能をインストールせずともVS Codeで.pyファイルの編集や、ターミナルからの実行も可能となり、上記のvimやTabnineもそのまま使えます。ただ、VSCode上でjupyter noteを使う場合は、PythonとJupyterの拡張機能をセットでインストールすることが必要です。インストール後も、幾つか設定が必要になります。それぞれの拡張機能の説明欄に詳細が書いてあります。

私は、PythonはGoogle Colabを機械学習等の重いプログラムを動かすときに使い、手元の本件Jupyter NoteBookでちょっとした計算をし、VSCodeは.pyファイルを書く時にだけ使っています。

Youtubeでの解説

Web開発で使う場合限定ですが、こちらのYoutubeでも私が詳しく解説しております。よろしければ、ご覧になってみてください。

VSCodeでよく使うショートカットキー | おまけ

今日も最後まで読んで頂き、ありがとうございました。