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
拡張機能の導入
- 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"]
}