VSCode 拡張 - [新]パソコン忘備録

VSCode 拡張

vscode

本項は書きたての記事です。正確な情報は公式サイト、公式ドキュメント、記載の参照サイトでご確認ください。

目次

読む

Extension一覧

読む

		Ext Name	Ext ID	備考
1	〇	Vagrant	bbenoist.vagrant
2	〇	Npm Intellisense	christian-kohler.npm-intellisense
3	〇	Path Intellisense	christian-kohler.path-intellisense
4	〇	JSON Formatting	ClemensPeters.format-json
5	〇	ESLint	dbaeumer.vscode-eslint
6	〇	Draw.io	hediet.vscode-drawio	vscode-drawioだとアイコンがDL出来ないのでこちらを利用
7	〇	REST Client	humao.rest-client
8	〇	Google Apps Script	labnol.google-apps-script
9	〇	Vagrantfile Support	marcostazi.VS-code-vagrantfile
10	〇	Docker	ms-azuretools.vscode-docker
11	〇	vscode-workspace-switcher	sadesyllas.vscode-workspace-switcher
12	〇	Prettier Formatter	esbenp.prettier-vscode
13	〇	Highlight	fabiospampinato.vscode-highlight
14	〇	PlantUML	jebbs.plantuml
15		Open Folder Context Menus	chrisdias.vscode-opennewinstance
16		Code GPT	DanielSanMedium.dscodegpt
17		markdownlint	DavidAnson.vscode-markdownlint
18		GitLens	eamodio.gitlens
19		VSCode Great Icons	emmanuelbeziat.vscode-great-icons
20		ChatGPT	genieai.chatgpt-vscode
21		GitHub Repositories	GitHub.remotehub
22		C# Snippets	jorgeserrano.vscode-csharp-snippets
23		Dependency Cruiser	juanallo.vscode-dependency-cruiser	依存関係
24		PHP CS Fixer	junstyle.php-cs-fixer
25		Marp Markdown	marp-team.marp-vscode
26		Render Line Endings	medo64.render-crlf	この拡張機能は、空白のレンダリングがオンになっている場合、行末文字 (CR、LF、または CRLF) を表示します。
27		Better Folding	MohammadBaqer.better-folding	カッコの対
28		Japanese Language Pack	MS-CEINTL.vscode-language-pack-ja
29		C#	ms-dotnettools.csharp
30		Azure Repos	ms-vscode.azure-repos
31		Remote Repositories	ms-vscode.remote-repositories
32		Reload VSCode	natqe.reload	VSCode再起動ボタン追加
33		Document This	oouo-diogo-perdigao.docthis	TypeScriptと JavaScript に JSDoc コメントを自動的に生成する
34		Perl::LanguageServer	richterger.perl
35		Bash beautify	shakram02.bash-beautify
36		Markdown Paste Image To Qiniu OSS store	starkwang.markdown
37		ShellCheck	timonwong.shellcheck
38		PHP Debug	xdebug.php-debug
39		Markdown PDF	yzane.markdown-pdf
40		PHP IntelliSense	zobo.php-intellisense
41		Lambda Boilerplate Snippet	loganarnett.lambda-snippets

Extension（拡張機能）

拡張一括インストール

PowerShell（PS1ファイル）を作成し、PowerShellからVSCode拡張を一括インストールすることができます。
PowerShellは実行権限が煩いので実行時に注意が必要です。
PS1実行コマンドは下記に掲げますがこれは一時的対応の場合のコマンドです。

実行コマンド：　
PowerShell -ExecutionPolicy RemoteSigned .\vscode_extensionsInstall.ps1

インストール済みExtension一覧出力
code --list-extensions

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-workspace

拡張機能名	vscode-workspace-switcher
拡張機能ID	sadesyllas.vscode-workspace-switcher
拡張機能メンテナンス状況	リリース日　2017/8/24 19:03:45 最終更新　2020/8/20 18:46:24
setting.json	%UserProfile%\AppData\Roaming\Code\User\setting.json , "vscodeWorkspaceSwitcher.paths": [ "D:/path/to/dir/", ] }
拡張機能の設定ファイル	（任意の名称）.code-workspace
拡張機能の設定ファイル記述	{ "folders": [ ], "settings": { "workbench.colorCustomizations": { "activityBarBadge.background": "#4aa1c4", "activityBar.background": "#4aa1c4", "activityBar.foreground": "#000000" } } }

参考

VSCode に必ず入れておきたい拡張機能 - Qiita
<https://qiita.com/ucan-lab/items/e85931bf8276da43cc97>