Visual Studio Code

Visual Studio Code

Your code editor.

Windows 環境でのインストール

• WinGetでインストール

  winget install -e --id Microsoft.VisualStudioCode

Linux 環境でのインストール

Ubuntu

• マイクロソフトリポジトリからインストールする方法
  https://code.visualstudio.com/docs/setup/linux#_debian-and-ubuntu-based-distributions

  $ curl https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
  $ sudo install -o root -g root -m 644 packages.microsoft.gpg /usr/share/keyrings/
  $ sudo sh -c 'echo "deb [arch=amd64 signed-by=/usr/share/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/vscode stable main" > /etc/apt/sources.list.d/vscode.list'

  $ sudo apt-get install apt-transport-https
  $ sudo apt-get update
  $ sudo apt-get install code # or code-insiders

Arch Linux

• AUR からインストール

  paru -S visual-studio-code-bin

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

code-server によるインストール

サーバ側の環境設定

• 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 --now 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

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

• ブラウザの「信頼されたルート証明機関」に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
  設定(Ctrl + ,)で右上の[設定(JSON)を開く]アイコンをクリック

  settings.json

  "activitusbar.views": [
      {
          "name": "explorer",
          "codicon": "files"
      },
      {
          "name": "search",
          "codicon": "search"
      },
      {
          "name": "scm",
          "codicon": "source-control"
      },
      {
          "name": "debug",
          "codicon": "debug-alt"
      },
      {
          "name": "extensions",
          "codicon": "extensions"
      },
      {
          "name": "command.workbench.action.terminal.toggleTerminal",
          "codicon": "terminal"
      },
      {
          "name": "settings",
          "codicon": "gear"
      },
      {
          "name": "command.workbench.view.extension.project-manager",
          "codicon": "file-submodule",
      }
  ],

  設定したいコマンド(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
• Japanese Language Pack
• Marp for VS Code
  Marp for VS Code
• Project Manager
  コマンドパレット(F1)でProject Manager: Save Project
• GitLens
• Git Graph

環境設定

• タイトルバーのカスタマイズ
  設定(Ctrl + ,)でwindow.titleBarStyleを検索してcustom
• アクティビティバーの非表示
  表示 > 外観 > アクティビティ バーを表示する を切り替え
• ターミナルのフォント
  terminal.integrated.fontFamily
  HackGen Console NF

コード整形関連(ESLint / Prettier)拡張機能の導入

• ESLint 拡張機能を VSCode にインストール
• Prettier 拡張機能を VSCode にインストール
• 環境設定

  settings.json

  {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.codeActionsOnSave": [
      "source.organizeImports",
      "source.fixAll.eslint"
    ]
  }

プロジェクト毎のコード整形関連(ESLint / Prettier)の設定

• eslint, eslint-config-prettier, prettier のインストール

  npm install --save-dev eslint eslint-config-prettier prettier

• eslint の初期設定

  npx eslint --init

• .eslintrc.json の修正

  .eslintrc.json

  "extends": [
    "airbnb-base",
    "prettier"
  ],

  .eslintrc.json

  "rules": {
  "import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
  }

• prettier の設定

  .prettierrc

  {
    "printWidth": 100,
    "trailingComma": "es5",
    "tabWidth": 2,
    "semi": true,
    "singleQuote": true,
    "endOfLine": "lf",
    "extends": ["prettier"]
  }

その他設定

• 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",
      }
    ]
  }

• フォント
  editor.fontFamily
  ‘Source Han Code JP’