Visual Studio Code

Windows 環境でのインストール

• ダウンロード
  https://code.visualstudio.com/download
• ターミナル用の WSL2

  > wsl --install

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

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: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 の再起動

  sudo systemctl restart --now code-server@$USER

• Power Shell Policy
• Port forward

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

• ブラウザの「信頼されたルート証明機関」に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": "extension.project-manager",
          "codicon": "file-submodule",
      }
  ],

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