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@$USERcurl -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.pem0.0.0.0:443
や127.0.0.1:443
が既に利用済で利用できない場合は<ローカルIPアドレス>:443
を指定する - code-server に443/tcp (1024以下のポート)へのバインドを許可code-serverをアップデート後に起動に失敗したら上記コマンドを実行するとよいかもしれない
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
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.Bookmarkssettings.json {
"editor.minimap.enabled": false,
"activitusbar.views": [
{
"name": "command.workbench.view.extension.bookmarks",
"codicon": "bookmark",
}
]
} - フォント
editor.fontFamily
‘Source Han Code JP’
Comment