VSCode
本項は書きたての記事です。正確な情報は公式サイト、公式ドキュメント、記載の参照サイトでご確認ください。
目次
ダウンロード
コマンド（VSCode本体）
| 内容 |
コマンド |
備考 |
|
code --list-extensions |
- |
|
code --list-extensions --show-versions |
- |
| カテゴリフィルタ |
code --list-extensions --category <category> |
- |
| 拡張インストール |
code --install-extension <extension-id[@<version>] ｜ path-to-vsix> [--force] |
- |
| アンインストール |
code --uninstall-extension <extension-id> |
- |
| 複数アンインストール |
code --install-extension <extension-id-1> --install-extension <extension-id-2> |
- |
| 無効化 |
code --disable-extension <extension-id-1> --disable-extension <extension-id-2> |
- |
| 全無効 |
code --disable-extensions |
- |
初期設定
基本はお好みです。必須ではありません。
|
+
|
読む |
settings.json （CTRL+SHIFT+P、CTRL+,）
| 検索キー |
GUI |
json |
|
| Editor: Code Lens |
外す |
FALSE |
|
| Editor: Format On Save |
チェック |
TRUE |
|
| Editor > hover: Enabled |
外す |
FALSE |
|
| Editor: Tab Size |
2 |
2 |
|
| Emmet: Variables |
- |
"lang": "ja", |
|
| Extensions: Ignore Recommendations |
チェック |
TRUE |
拡張機能の推奨事項について通知 |
| Files: Auto Guess Encoding |
チェック |
TRUE |
ファイルを開いたときに文字コードを自動判定 |
| Files: Auto Save |
afterDelay |
afterDelay |
自動で保存 |
| Workbench: Startup Editor |
newUntitledFile |
newUntitledFile |
スタート時スプラッシュ非表示 |
|
（拡張ツール）
参考
エクステンション（拡張機能）
拡張一括インストール
PowerShell（PS1ファイル）を作成し、PowerShellからVSCode拡張を一括インストールすることができます。
PowerShellは実行権限が煩いので実行時に注意が必要です。
PS1実行コマンドは下記に掲げますがこれは一時的対応の場合のコマンドです。
実行コマンド：
PowerShell -ExecutionPolicy RemoteSigned .\vscode_extensionsInstall.ps1
|
+
|
VSCode拡張一括インストール vscode_extensionsInstall.ps1 |
# カレントにパスが通っていない場合は通す
if (-not $env:path.Split(';').Contains('.\')) {
$env:path = $env:path + ';.\'
}
# binへのパスが未登録ならカレントディレクトリ変更
$binPath = Join-Path ([Environment]::GetFolderPath('LocalApplicationData')) 'Programs\Microsoft VS Code\bin'
if ($env:path.IndexOf($binpath, [System.StringComparison]::OrdinalIgnoreCase) -eq -1) {
cd $binPath
}
# 日本語パック
code --install-extension MS-CEINTL.vscode-language-pack-ja --force
# コーディング支援
code --install-extension visualstudioexptteam.vscodeintellicode --force
# C#
code --install-extension ms-vscode.csharp --force
# PowerShell
code --install-extension ms-vscode.powershell --force
# ブックマーク
code --install-extension alefragnani.Bookmarks --force
code --install-extension alefragnani.numbered-bookmarks --force
# 括弧強調
code --install-extension CoenraadS.bracket-pair-colorizer-2 --force
# Git
code --install-extension eamodio.gitlens --force
code --install-extension donjayamanne.githistory --force
# Markdown
code --install-extension yzhang.markdown-all-in-one --force
code --install-extension DavidAnson.vscode-markdownlint --force
# HTML
code --install-extension abusaidm.html-snippets --force
code --install-extension mkaufman.HTMLHint --force
code --install-extension Zignd.html-css-class-completion --force
# XML
code --install-extension DotJoshJohnson.xml --force
# TypeScript
code --install-extension eg2.tslint --force
# lint
code --install-extension taichi.vscode-textlint --force
code --install-extension ics.japanese-proofreading --force
# CSVカラー表示
code --install-extension mechatroner.rainbow-csv --force
|
|
+
|
bash 一括インストール |
#!/bin/bash
exts=(
"vscode-icons-team.vscode-icons"
"PKief.material-icon-theme"
"ms-python.python"
)
cmd="code"
for ext in "${exts[@]}" ; do
cmd="$cmd --install-extension $ext"
done
eval $cmd
|
Live Server
- サーバを立てずにブラウザで確認するツール
- VSCodeワークスペースに対象フォルダを追加
- 対象ファイルを右クリック⇒「OpenWithLiveServer」
- VSCodeステータスバー右下「GoLive」押下で起動
- ポート5500で起動し、規定ブラウザで起動する
|
+
|
Settings |
(値はデフォルト値)
liveServer.settings.port: 5500
liveServer.settings.root: /
liveServer.settings.CustomBrowser: null
liveServer.settings.AdvanceCustomBrowserCmdLine: null
liveServer.settings.ChromeDebuggingAttachment: false
liveServer.settings.NoBrowser: false
liveServer.settings.ignoreFiles: .vscode, .scss, .sass. .ts
liveServer.settings.donotShowInfoMsg: false
liveServer.settings.host: 127.0.0.1
liveServer.settings.donotVerifyTags: false
liveServer.settings.https:
"liveServer.settings.https": {
"enable": false, //set it true to enable the feature.
"cert": "C:\\https\\server.cert", //full path
"key": "C:\\https\\server.key", //full path
"passphrase": "12345"
},
liveServer.settings.proxy:
/*
In easy word, it means you're shifting your real url (actual PHP url)
to another url (which LiveSever will start).
*/
"liveServer.settings.proxy": {
"enable": false, //set it true to enable the feature.
"baseUri": "/", //from where you want to proxy.
"proxyUri": "http://localhost/php/" //the actual url.
},
liveServer.settings.useWebExt: false
liveServer.settings.fullReload: false
liveServer.settings.wait: 100
liveServer.settings.mount: []
{
"liveServer.settings.mount:" [
["/", "/path1"],
["/", "/path2"],
["/root", "/dist"]
]
}
liveServer.settings.useLocalIp: false
liveServer.settings.file: ""
liveServer.settings.multiRootWorkspaceName: null
|
VScode QA
Q：エクステンション「vim」を使うと、コピペなどが出来なくなった
A：入力操作が常時vim形式になるため。VScode本来の操作に戻す場合は拡張vimをアンインストールするか停止する。
エラーシューティング
エラーシューティング（トラブルシューティング）は
こちらにまとめています。
参考
最終更新：2022年08月05日 15:25
