Visual Studio Code

Windows 環境でのインストール

Linux 環境でのインストール

  • マイクロソフトリポジトリからインストールする方法
    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

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