azukipochette's weblog

memory dump (mini)

GitHub のように Azure Repos のリポジトリを Visual Studio Code で開く

Visual Studio Code for Web (vscode.dev) が登場したことにより、気軽に Visual Studio Code がオンライン上で使えるようになった。

code.visualstudio.com

しかも、記事の記載にもあるように vscode.dev を URL の先頭に付加することで、Azure Repos のリポジトリも開けるようになった。 詳しくは、@kkamegawa さんの記事を参照。

kkamegawa.hatenablog.jp

が...「GitHubリポジトリ画面で ". (ピリオド) " を押すだけでエディター画面に遷移してくれるのになぁ」という声が聞こえてきたので、お昼休みの時間を使ってにユーザー スクリプトを書いてみた。

// ==UserScript==
// @name         New Userscript
// @namespace    https://azukipochette.hatenablog.com/
// @version      0.1
// @description  Launch Visual Studio Code Web from Azure DevOps Repos pages.
// @author       AzukiPochette
// @match        https://dev.azure.com/*/_git/*
// @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net
// @grant        none
// ==/UserScript==

(function () {
    'use strict';
    document.addEventListener('keydown', (e) => {
        if (e.code == 'Period') {
            let re = new RegExp('https?://(dev.azure.com/[^?]+)')
            window.location.href = `https://vscode.dev/${re.exec(document.URL)[1]}`
        }
    });
})();

ユーザースクリプトの実行には、使用しているブラウザーに応じた拡張機能が必要となる。
代表的な拡張機能のリンクは以下の通り。(Microsoft Edge + Tempermonkey 向けに実装したが、他の拡張機能でも互換性があるはず)

Microsoft Edge / Google Chrome 向け

www.tampermonkey.net

Mozilla Firefox 向け

addons.mozilla.org

既知の問題

コードを見てもらうと分かるが、以下の問題については対処していない。

  • TFVC では実行できない
  • 旧バージョンの URL である "<組織名>.visualstudio.com" を使っている場合は動かない
  • リポジトリ上でコード編集を動作させた場合、文字として "." すると画面遷移してしまう(機能干渉)*1

Enjoy!

*1:編集時に URL などに編集中だと判断できる明確な特徴がなかったので、諦めた。