👻 ぷぇ
🍾🍾🍾 メリークリスマス！！！ 🎉🎉🎉
今年も残り僅かですが、皆様の今年の進捗はどうだったでしょうか？ 進捗ダメでしたか？
私はと言うと今年も幸い GitHub で evergreen を達成できそうです。( 業務でこの GitHub アカウントは使用していないので、個人での Contributions のみです。 )
Visual Studio Code Advent Calendar 2019 の最後の記事ともなりますし、普段、特に Qiita ではあんまり記事を書かないのもあるので、 VS Code に関するいろいろなネタの詰め合わせをお送りします。
自分的に VS Code の二大拡張 ※ステマ注意
「もしも VS Code に二つまでしか拡張を入れられないとしたら？」って場合に私が迷わず選ぶ二大拡張です。
Background Phi Colors
🔗 Background Phi Colors - Visual Studio Marketplace
英国のプログラミングサイトで VS Code をエキセントリックにする拡張として紹介されたり、 VS Code の公式 marketplace で「本当に強力な拡張機能。(A genuinely powerful extension.)」「完全にゲームが変わる(completely changes the game)」とまで絶賛されているのが、 こちらの wraith13 さんが作った VS Code 拡張。
百聞は一見に如かず、まずはこちらのツイートの動画をご参照ください。
Visual Studio Code 拡張の Background Phi Colors v1.0.0 をリリースしました。このバージョンからプレビューではなく正式リリースです。v0.9.0からかなり細々と弄ったので修正内容は CHANGLOG をご確認ください。 https://t.co/Nj0LAelzoG pic.twitter.com/N67OEPm6Ni
— 👻 道化師 🃏 (@wraith13) May 4, 2019
一言で言うなら「背景色を様々に自動着色する VS Code 拡張」です。コンセプト的にはコードを「読む」時の人間の負荷を「見る」時に近いレベルに下げ( 文字の認識はもちろん、その集合となる大量の文字で構成されるテキストの認識(=読む)というタスクは人間の脳にとって負荷の高いタスクです。 )、また同時にコードに対する様々な認識能力を向上させる為のモノです。
- 引数の参照箇所
- 変数のアクセス箇所
- スペルミス
- 類似したコードの差分
- 他
この VS Code 拡張を使う事で、上に挙げたような事柄を意識的に把握し易くなるだけでなく、無意識的にも気付き易くなります。知能の本質は認識能力と表現能力の集合に他ならないワケですが、この拡張はコードに対するあなたの認識能力を向上をさせます。言い換えればコードに相対する時の知能を向上させるワケです。
初期状態ではあなたの好みにマッチしないかもしれませんが、いろいろ設定可能ですので気に入った部分だけつまみ食い的に利用するのもよいでしょう。
また、この拡張は indent-rainbow や Trailing Spaces と言った拡張と同等の機能も内包しています。
VS Code の背景(Background)ではなく枠(Frame)を自動着色する Frame Phi Colors という姉妹拡張もあります。
Clairvoyant
🔗 Clairvoyant - Visual Studio Marketplace
「もしも VS Code に一つしか拡張を入れられないとしたら？」って場合に私が迷わずのが Background Phi Colors よりも凶悪な こちらの wraith13 さんが作った VS Code 拡張。 Background Phi Colors とは打って変わって全然注目を浴びてませんが間違いなく凶悪です。
簡単に説明すると基本的な機能は VS Code で開いているソースコードを全部舐めて出現する全トークンを洗い出しその出現箇所へのアクセスを提供する拡張です。この説明だけだとピンと来ないかもしれませんが、 入力補完とプレビューが効く検索 であり、また v6.0.0 からは[変更箇所]や[問題]について同様の機能を提供しており、テキストエディタ上の移動と参照のかなりの割合をカバーしコーディングの効率を向上させます。
「あれ、なんだっけ？ あれだよ！ あれ！」って感じでうろ覚えの識別子であっても入力補完が効く為、容易くアクセスする事ができます。
また、トークンの出現数も日常的に表示されるので、リファクタリングの目安にもなりますし、 Background Phi Colors 同様にスペルミスや表記揺れの早期発見にも繋がります。
Clairvoyant が出すメニュー(というか quick pick)であれば確定前にそのファイルのプレビューも表示されるので、うろ覚えのファイルを開きたい時にもより手軽に且つ素早く目的のファイルに辿り着けます。
その他
wraith13 さんは他にもいろいろな VS Code 拡張を作ってて私は全部入れてます！
🔗 Publisher wraith13 - Visual Studio Marketplace
VS Code Tips
VS Code 拡張のパス
VS Code 拡張は OS の種類を問わずユーザーホームディレクトリ下の .vscode/extensions にあります。特定の VS Code 拡張の挙動が気になった場合などはここを見れば実際のコードを確認できます。( TypeScript ベースの拡張の場合、ここで見られるのはコンパイル結果の JavaScript であってソースコードではありませんが。 )
VS Code 拡張の特定バージョンのインストール
「バージョンアップしたら VS Code 拡張が機能しなくなった！！！」ってなんて時は、 拡張 / EXTENSIONS サイドパネルから問題の発生してる VS Code 拡張を右クリックするか右上の歯車アイコンをクリックして表示されるコンテキストメニューの 別のバージョンをインストールする... / Install Another Version... から以前のバージョンをインストールする事ができます。
全てのウィンドウのリロード
VS Code 拡張をアップデートした際など VS Code をリロードしたい場合はコマンドパレットから Developer: ウィンドウの再読み込み / Developer: Reload Window コマンドを使えば良いのですが、残念ながらこちらのコマンドではそれを実行したウィンドウしかリロードされません。特定の一つのウィンドウだけリロードしたいといった事は希で、全てのウィンドウをリロードしたい事の方が圧倒的に多いのが実状でしょう。そんな時には 表示言語を構成する / Configure Display Language コマンドが便利です。表示言語を切り替える為のコマンドですが、このコマンドを実行すれば現在と同じ言語を指定した場合でも全てのウィンドウがリロードされます。( 将来的にこの挙動は変わるかもしれませんが )
来年(2020年)の VS Code
VS Code の 2020 のロードマップが公開されているので、既に進行中のモノを中心にいくつかピックアップしてご紹介。( ⚠️ あくまでロードマップ上の話なので、実際に実現されるどうかや、実現される場合のリリースされる時期など、なんの保証もありません。 )
Improve Open File / Quick Pick performance
Clairvoyant の Clairvoyant: Sight コマンドなどでは5桁の項目を持つ Quick Pick の表示が行われたりしますが、現状でも全然ケロッと軽快に動作します。すでに十分なパフォーマンスかと思われますが更なる高速化を目指してるようです。
🏃 Allows to move views between the panel and sidebar.
画面の構成の自由度が高くなるようです。どの範囲で自由化されるかは知りませんが、 todo リストのようなドキュメントであれば sidebar に表示したいとか、ターミナルのような panel であれば view の位置に表示したいとかいろいろあるでしょうし、人によってはかなり刺さるモノになるのではないでしょうか。
🏃 Support custom editors.
このあたりのサポートが充実してくれば、画像エディタなど非テキストなエディタ機能を提供する拡張などが今後充実してくるかもしれませんね。
🏃 Support synchronizing settings and extensions across VS Code installations on different machines.
既に VS Code の設定を複数のマシン間で同期する拡張が提供されていますが、 VS Code 本体で同機能がサポートされるようです。
In the settings editor, provide high-fidelity support for additional settings types such as colors.
設定画面上でいまだとプレーンテキストで #RRGGBB な形式で色指定が行われてますが、GUI なカラーピッカーなどが実装されるのでしょうか。 VS Code はプログラマ以外も使うし、且つプログラマ以外にも勧めたいテキストエディタなので、このあたりは早く充実して欲しいポイントの一つですね。
Support to synchronize settings between the insider and stable versions of VS Code
Insiders 版と Stable 版の間での設定同期のサポート・・・これは嬉しいのかちと微妙ですね。あえて異なる設定で使いたいからこそ両方をインストールしてるってパターンが大半ではないかと予想されますし。
🏃 Show search results not only in the side bar or a panel, but also in an editor. This allows users to work with multiple search results and to see additional context for each match.
複数の検索結果がサポートされるのは痒い所に手が届く感じで、これは地味に欲しい機能ですね。
🏃 Use tabs instead of the terminal dropdown
ターミナル選択のドロップダウンがタブに変わるようです。現状ドロップダウンリストを開くのがちょっと手間ですし、これも早く来て欲しいですね。
Touch and mobile support for VS Code in the browser
これは Visual Studio Online の事ですかね。流石にスマフォのタッチパネルでガッツリコーディングやろうと言うのは効率悪いですが、ピンポイントでちょっと弄って試したり、markdown のテキスト編集などで嬉しいかも。
Provide an overall improved GitHub integration, e.g. we'll make it easier to hover over issue URL in your code or associate a GitHub issue with your commit.
GitHub との連携が総合的に強化されていくようです。
...とまぁいくつかピックアップしましたが、他にもいろいろてんこ盛りなので気になった方はご自身でご確認ください。
余談: アイコン騒動、再び！！
🔗 New VS Code icon is ugly! · Issue #35783
２年前、 VS Code 開発チームとして「仮」のつもりだったアイコンを新たに描き起こした正式版のオレンジのアイコンにしたところ、非常に多くのユーザーから大不評を買って大騒ぎになって最終的にブルーのアイコンになったなんて事がありました。
流石にその時の騒動の懲りてか、その後はコミュニティの反応をしっかり見るようになりアイコンの変更にはとても慎重になっていたのですが、そんな中、事件はまた起きました。
🔗 Santa Hat on vscode insiders and pushing of religion is very offensive to me #87268
Insiders バージョンの VS Code がクリスマスモードになり、 VS Code のウィンドウ左下の歯車アイコンがサンタ帽子を被ったものになったのですが、宗教的であり攻撃的であるとのクレームが上がったのです。
🔗 Visual Studio Codeの「サンタ帽アイコン」に対し宗教的な抗議、その対応で炎上 | スラド
この記事を公開する前に先にスラドでも話題に挙げられてしまったのでこちらもご参照ください。
正直なところ、初見では「はぁ？？？」となりましたし、すぐにサンタ帽子を取り下げてしまったのは悪手且つ悪い前例になってしまったように思います。( 今回のようなケースのモノは、他者に配慮を求めていい範囲のモノではななく、クレームを挙げた側が寛容であるべき事案だったように思います。)
世界中で広く使われるソフトウェアと言うモノはなんとも大変というか、前回のアイコン騒動といい Microsoft の VS Code のチームには同情するところですが、これは逆に世界中で広く使われてる証左でもあると前向きに受け止めておきましょう。
( ´∀｀)ﾉｼ それでは皆様、良いお年を〜
🃏