Visual Studio Code

Windows 環境でのインストール

ダウンロード
https://code.visualstudio.com/download

ターミナル用の WSL2

> wsl --install

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install nodejs npm

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

または

curl -fOL https://github.com/coder/code-server/releases/download/v$VERSION/code-server_${VERSION}_amd64.deb
sudo dpkg -i code-server_${VERSION}_amd64.deb
sudo systemctl enable --now code-server@$USER
# Now visit http://127.0.0.1:8080. Your password is in ~/.config/code-server/config.yaml

CA の作成
sudo apt install mkcert libnss3-tools
mkcert -install
以下のファイルが生成される。
- /home/ubuntu/.local/share/mkcert/rootCA.pem
- /home/ubuntu/.local/share/mkcert/rootCA-key.pem
サーバ証明書の作成
cd ~/.local/share/mkcert
mkcert ubuntu.local
以下のファイルが生成される。
- /home/ubuntu/.local/share/mkcert/ubuntu.local.pem
- /home/ubuntu/.local/share/mkcert/ubuntu.local-key.pem

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/ubuntu.local.pem
cert-key: /home/ubuntu/.local/share/mkcert/ubuntu.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

Power Shell Policy
ポートフォワードできるようにポリシーを設定
Port forward
443ポートをWSLにポートフォワードするスクリプトを実行

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 restart code-server@$USER

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

ブラウザの「信頼されたルート証明機関」にrootCA.pemを登録
ブラウザの「信頼された発行元」にubuntu.local.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を利用している場合は設定の証明書画面からルート証明書を導入

拡張機能の導入

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)を確認する手順は以下

Ctrl+K Ctrl+S でキーボードショートカットの画面を表示
ショートカット一覧の中からコマンドを検索
右クリックして「コマンドIDのコピー」
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
Remote SSH

環境設定

タイトルバーのカスタマイズ
設定(Ctrl + ,)でwindow.titleBarStyleを検索してcustom
アクティビティバーの非表示
表示 > 外観 > アクティビティバーを表示するを切り替え

コード整形関連(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’

Comment