Visual Studio Code

Codeのインストール

vscode

• Windows

  winget install -e --id Microsoft.VisualStudioCode

• Arch Linux

  paru -S visual-studio-code-bin

antigravity ide

• Windows

  winget install --id Google.AntigravityIDE

• Arch Linux

  paru -S antigravity-ide

code-server

1. サーバ側の環境設定

• code-server の導入

  curl -fsSL https://code-server.dev/install.sh | sh
  sudo systemctl enable --now code-server@$USER

• CA の作成

  sudo apt install mkcert libnss3-tools
  mkcert -install

  以下のファイルが生成される。
  • ~/.local/share/mkcert/rootCA.pem
  • ~/.local/share/mkcert/rootCA-key.pem

  ルート証明書の有効期限は10年間

• サーバ証明書の作成

  cd ~/.local/share/mkcert
  mkcert rpi4b.local

  以下のファイルが生成される。
  • ~/.local/share/mkcert/rpi4b.local.pem
  • ~/.local/share/mkcert/rpi4b.local-key.pem

  サーバ証明書の有効期限は2年間

• code-server の設定

  ~/.config/code-server/config.yaml

  #bind-addr: 127.0.0.1:8080
  bind-addr: 0.0.0.0:443
  #auth: password
  auth: none
  cert: /home/ubuntu/.local/share/mkcert/rpi4b.local.pem
  cert-key: /home/ubuntu/.local/share/mkcert/rpi4b.local-key.pem

  0.0.0.0:443や127.0.0.1:443が既に利用済で利用できない場合は<ローカルIPアドレス>:443を指定する
• code-server に443/tcp (1024以下のポート)へのバインドを許可

  sudo setcap cap_net_bind_service=+ep /usr/lib/code-server/lib/node

  code-serverをアップデート後に起動に失敗したら上記コマンドを実行するとよいかもしれない
• code-server の再起動

  sudo systemctl restart code-server@$USER

• code-server をアップデートする場合

  curl -fsSL https://code-server.dev/install.sh | sh
  sudo setcap cap_net_bind_service=+ep /usr/lib/code-server/lib/node
  sudo systemctl daemon-reload
  sudo systemctl restart code-server@$USER

• code-serverをアップデート後に自動でsetcapを再適用し、サービスを再起動するフック

  /etc/pacman.d/hooks/code-server-setcap.hook

  [Trigger]
  Operation = Install
  Operation = Upgrade
  Type = Package
  Target = code-server
  
  [Action]
  Description = Re-applying CAP_NET_BIND_SERVICE to code-server node binary...
  When = PostTransaction
  Exec = /usr/bin/sh -c "/usr/bin/setcap cap_net_bind_service=+ep /usr/lib/code-server/lib/node && /usr/bin/systemctl restart code-server@arch"

2. クライアント側の環境設定

• ブラウザの「信頼されたルート証明機関」にrootCA.pemを登録
• Linux でChrome を利用している場合は以下コマンドでルート証明書を導入

  sudo apt install libnss3-tools
  certutil -A -n "My Root CA" -t "TCu,Cu,Tu" -i ~/Downloads/rootCA.pem -d sql:${HOME}/.pki/nssdb

• Linux でSnap版Firefoxを利用している場合は設定の証明書画面からルート証明書を導入
• サーバhttps://rpi4b.local にアクセスして、PWAとしてインストール

拡張機能の導入

Activitus Bar

ステータスバーにカスタムアイコンを表示する拡張機能。

• 設定

  settings.json

  "activitusbar.views": [
    {
      "name": "command.workbench.action.openSettingsJson",
      "codicon": "file-code",
      "tooltip": "Open settings.json",
    },
    {
      "name": "command.workbench.action.showAboutDialog",
      "codicon": "info",
      "tooltip": "Show Version",
    },
    {
      "name": "command.editor.action.formatDocument",
      "codicon": "sparkle",
      "tooltip": "Format Document\nShift + Alt + F",
    },
  ],
  "workbench.editor.useModal": "off",
  "workbench.activityBar.location": "bottom",

• コマンドを追加する場合のヒント
  設定したいコマンド(name)を確認する手順は以下
  1. Ctrl+K Ctrl+S でキーボードショートカットの画面を表示
  2. ショートカット一覧の中からコマンドを検索
  3. 右クリックして「コマンドIDのコピー」
  4. command.<コマンドID>の形式でsettings.jsonのactivitusbar.viewsのエントリに追加

Draw.io Integration

拡張子 .drawio.svg のファイルを作成
Draw.io VS Code Integration

Git Graph

Japanese Language Pack

Marp for VS Code

Marp for VS Code

Project Manager

コマンドパレット(F1)でProject Manager: Save Project

環境設定

外観

• タイトルバーのカスタマイズ
  設定(Ctrl + ,)でwindow.titleBarStyleを検索してcustom
• ターミナルのフォント
  terminal.integrated.fontFamily
  HackGen Console NF

WaylandでWMClass補正

• 起動するとダッシュに登録したアイコンと別のアイコンとなる事象の回避
  https://askubuntu.com/questions/1488890/overriding-vscode-desktop-file-casuses-dock-to-produce-separate-icon

  /usr/share/applications/code.desktip

  #StartupWMClass=code
  StartupWMClass=code-url-handler

Alt Keyの制御

• Ctrl+,
  Window: Custom Menu Bar Alt Focusを検索して、オフ

その他設定

• Ctrl + ホイールで拡大縮小
  editor.mouseWheelZoom
• 自動保存の無効化
  files.autoSave
• エンコーディングの自動判定
  files.autoGuessEncoding
• ファイルクリックで新しいタブに開く
  workbench.editor.enablePreview をオフ？
• ブックマーク
  https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

  settings.json

  {
    "editor.minimap.enabled": false,
    "activitusbar.views": [
      {
        "name": "command.workbench.view.extension.bookmarks",
        "codicon": "bookmark",
      }
    ]
  }

• codicon
  https://microsoft.github.io/vscode-codicons/dist/codicon.html
• フォント
  editor.fontFamily
  ‘Source Han Code JP’