MicroSoft 製の高機能エディター
Visual Studio Code : VS Code
インストール
winget
PS> winget install Microsoft.VisualStudioCode
起動
code
コマンドで起動
VS Code を現在のフォルダで起動
PS> code .
操作
エクスプローラーを開く
Ctrl + Shift + E
ソース管理を開く
Ctrl + Shift + G G
サイドバーを開く・閉じる
Ctrl + B
ターミナルを開く・閉じる
Ctrl + @
最初のエディターにフォーカス
Ctrl + 1
ファイル移動
Ctrl + P
#
ワークスペース内シンボル移動
@
ファイル内シンボル移動
:
ファイル内行移動
>
コマンド入力
ワークスペース内シンボルに移動
Ctrl + T
ファイル内シンボル移動
Ctrl + Shift + O
コマンド入力
Ctrl + Shift + P
行の入れ替え
Alt + ↑
Alt + ↓
行のコピー
Alt + Shift + ↑
Alt + Shift + ↓
コメントアウト
Ctrl + /
検索
Ctrl + F
ファイル内
Ctrl + Shift + F
ワークスペース内
置換
Ctrl + H
ファイル内
Ctrl + Shift + H
ワークスペース内
前へ移動・後ろへ移動
Alt + ←
Alt + →
マルチカーソル
Ctrl + Alt + ↑
Ctrl + Alt + ↓
Alt + Click
最近開いたフォルダとワークスペース間を移動する
Ctrl + R
設定
ユーザー設定
VS Code 全体の設定
settings.json
{
"files.encoding": "utf8", // 既定のエンコード
"files.eol": "\n", // 既定の改行文字
"files.autoGuessEncoding": true, // エンコード自動判別
"files.insertFinalNewline": true, // 最終行に改行
"files.trimFinalNewlines": true, // 最終行をトリミング
"files.trimTrailingWhitespace": true, // 行末のスペース削除
"editor.fontFamily": "HackGen Console NFJ",
"editor.tabSize": 4,
"editor.detectIndentation": false, // 開いたファイルからインデントを自動判別
"editor.insertSpaces": true, // タブキーをスペース入力
"editor.renderControlCharacters": true, // 制御文字を表示
"editor.minimap.enabled": false, // ミニマップを表示
"editor.formatOnSave": true, // 保存時自動フォーマット
"editor.guides.bracketPairs": true, // ブラケットペアガイド
"workbench.editor.enablePreview": false, // プレビューモード
"terminal.integrated.scrollback": 2000,
"terminal.integrated.windowsEnableConpty": true, // 選択したテキストを自動コピーする
"security.workspace.trust.untrustedFiles": "open", // 信頼されたワークスペースで信頼されていないファイルを開くときの取り扱い
"emmet.triggerExpansionOnTab": true, // Emmet有効
"emmet.excludeLanguages": [
"markdown",
"php"
],
"[markdown]": {
"files.trimTrailingWhitespace": false,
"editor.formatOnSave": false,
},
"[plaintext]": {
"files.trimTrailingWhitespace": false,
"files.insertFinalNewline": false,
"files.trimFinalNewlines": false,
"editor.formatOnSave": false
},
}
ワークスペース設定
ワークスペース設定は.vscode
フォルダに保存する
.vscode\settings.json
{
// 非表示にするファイル・ディレクトリ
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true
},
// 監視対象から外すファイル・ディレクトリ
"files.watcherExclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/*/**": true,
"**/.hg/store/**": true,
"**/vendor/*/**": true
},
// 検索対象から外すファイル・ディレクトリ
"search.exclude": {
"**/node_modules": true,
"**/bower_components": true,
"**/*.code-search": true,
"**/vendor/*/**": true
}
}
拡張機能
拡張インストール Tips
PowerShell からコマンドでインストール可能
PS> code --install-extension RoscoP.ActiveFileInStatusBar
Active File In StatusBar
ステータスバーにファイルのフルパスを表示
RoscoP.ActiveFileInStatusBar
Auto Rename Tag
ペアになっている HTML / XML タグの名前を自動的に変更
formulahendry.auto-rename-tag
Background Phi Colors
エディタ内のテキストの背景をさまざまに着色する
wraith13.background-phi-colors
- インデントの深さに応じた着色
- 行頭と行末を除く連続した2つ以上の半角スペースに着色
Clipboard Manager
複数クリックボード
EdgardMessias.clipboard-manager
Code Spell Checker
スペルミスを検出
streetsidesoftware.code-spell-checker
code-eol 2019 (Line Endings)
改行を表示
jeff-hykin.code-eol
settings.json
"code-eol.style": {
"color": "#999999",
"opacity": 0.1
},
"code-eol.newlineCharacter": "↓",
"code-eol.returnCharacter": "←",
"code-eol.crlfCharacter": "↵",
Color Highlight
色コードの背景にその色を表示
naumovs.color-highlight
Color Manager
カラーパレット表示・選択
RoyAction.color-manager
CSS Navigation
HTML から CSS への定義や CSS から HTML への参照を検索
pucelle.vscode-css-navigation
CSSTree validator
CSS の検証
smelukov.vscode-csstree
Database Client
cweijan.vscode-database-client2
settings.json
"remote.extensionKind": {
"cweijan.vscode-database-client2": ["workspace"]
},
Docker
Docker の構築・管理・デプロイ
ms-azuretools.vscode-docker
DotENV
.env のシンタックスハイライト
mikestead.dotenv
Draw.io Integration
VS Code から draw.io の作図可能
hediet.vscode-drawio
EditorConfig for VS Code
.editorconfig の設定で VS Code の設定を上書き
EditorConfig.EditorConfig
.editorconfig
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_size = 4
indent_style = space
trim_trailing_whitespace = true
Error Lens
エラーメッセージをインラインで表示
usernamehw.errorlens
settings.json
"errorLens.excludePatterns": [
"**/*.{txt,md}"
],
EvilInspector
全角スペースを強調表示
saikou9901.evilinspector
Excel Viewer
CSV・Excel ビューア
GrapeCity.gc-excelviewer
file-icons
シンプルなファイルアイコン
file-icons.file-icons
Firebase
Firebase Explorer
Firebase Snippets
GistPad
GitHub の Gists とリポジトリの編集
vsls-contrib.gistfs
Git Graph
Git の履歴をグラフィカルに表示
mhutchie.git-graph
GitHub Actions
cschleiden.vscode-github-actions
GitLens
Git の機能を強化
eamodio.gitlens
settings.json
"gitlens.codeLens.authors.enabled": false,
"gitlens.codeLens.recentChange.enabled": false,
"gitlens.currentLine.enabled": false,
Gitmoji
Git コミットメッセージに絵文字入力支援
seatonjiang.gitmoji-vscode
settings.json
"gitmoji.addCustomEmoji": [
{
"emoji": "👍",
"code": ":+1:",
"description": "機能改善"
},
{
"emoji": "🎨",
"code": ":art:",
"description": "コードの構造・形式の改善"
},
{
"emoji": "⚡️",
"code": ":zap:",
"description": "パフォーマンスの改善"
},
{
"emoji": "🔥",
"code": ":fire:",
"description": "コードやファイルの削除"
},
{
"emoji": "🐛",
"code": ":bug:",
"description": "バグ修正"
},
{
"emoji": "🚑",
"code": ":ambulance:",
"description": "クリティカルなバグ修正"
},
{
"emoji": "✨",
"code": ":sparkles:",
"description": "新機能"
},
{
"emoji": "📝",
"code": ":memo:",
"description": "ドキュメントの追加・更新"
},
{
"emoji": "🚀",
"code": ":rocket:",
"description": "デプロイ"
},
{
"emoji": "💄",
"code": ":lipstick:",
"description": "デザインの追加・更新"
},
{
"emoji": "🎉",
"code": ":tada:",
"description": "プロジェクト開始"
},
{
"emoji": "✅",
"code": ":white_check_mark:",
"description": "テストの追加、更新、パス"
},
{
"emoji": "🔒️",
"code": ":lock:",
"description": "セキュリティ問題の修正"
},
{
"emoji": "🚧",
"code": ":construction:",
"description": "作業中"
},
{
"emoji": "♻️",
"code": ":recycle:",
"description": "リファクタリング"
},
{
"emoji": "🔧",
"code": ":wrench:",
"description": "設定ファイルの追加・更新"
},
{
"emoji": "💩",
"code": ":poop:",
"description": "改良が必要な悪いコード"
},
{
"emoji": "⏪",
"code": ":rewind:",
"description": "リバート"
},
{
"emoji": "🔀",
"code": ":twisted_rightwards_arrows:",
"description": "ブランチをマージ"
},
{
"emoji": "👽️",
"code": ":alien:",
"description": "外部APIの変更"
},
{
"emoji": "🚚",
"code": ":truck:",
"description": "リソースの移動・名称変更"
},
{
"emoji": "💬",
"code": ":speech_balloon:",
"description": "テキストの追加・更新"
},
{
"emoji": "🩹",
"code": ":adhesive_bandage:",
"description": "軽微な修正"
},
{
"emoji": "👔",
"code": ":necktie:",
"description": "ビジネスロジックの追加・更新"
}
],
"gitmoji.onlyUseCustomEmoji": true,
google-search
Google で検索を追加
kameshkotwani.google-search
Highlight Matching Tag
一致する開始タグや終了タグ を強調表示
vincaslt.highlight-matching-tag
Hopscotch
配色テーマ
idleberg.hopscotch
Hosts Language
hosts ファイルのシンタックスカラー
tommasov.hosts
htmltagwrap
選択内容を HTML タグでラップ
bradgashler.htmltagwrap
IntelliCode
VisualStudioExptTeam.vscodeintellicode
Japanese Language Pack
日本語化
MS-CEINTL.vscode-language-pack-ja
Laravel Blade Snippets
Laravel Blade スニペット
onecentlin.laravel-blade
Laravel Extra Intellisense
amiralizadeh9480.laravel-extra-intellisense
Laravel goto view
Laravel Snippets
Laravel スニペット
stef-k.laravel-goto-controller
laravel-goto-controller
Live Sass Compiler
SASS / SCSS ファイルを CSS ファイルにリアルタイムでコンパイル/トランスパイル
glenn2223.live-sass
Live Server
ローカルのウェブサーバーを起動
ritwickdey.LiveServer
Log File Highlighter
ログファイルに色の強調表示
emilast.LogFileHighlighter
Markdown Preview Enhanced
マークダウンプレビュー
shd101wyy.markdown-preview-enhanced
Marp for VS Code
プレゼン資料作成
marp-team.marp-vscode
Output Colorizer
Paste Image
画像をクリップボードから直接貼り付け
mushan.vscode-paste-image
Path Autocomplete
コードのパス補完
ionutvmi.path-autocomplete
PDF Preview
PDF ビューア
analytic-signal.preview-pdf
Peacock
ワークスペースの色を変更
johnpapa.vscode-peacock
PHP Debug
PHP Debug
xdebug.php-debug
PHP DocBlocker
Doc コメントの入力を補完
neilbrayfield.php-docblocker
PHP Intelephense
PHP コードインテリジェンス
bmewburn.vscode-intelephense-client
settings.json
"php.validate.enable": false,
"php.suggest.basic": false,
"[php]": {
"editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
},
PHPUnit Test Explorer
Prettier
コードフォーマッタ
esbenp.prettier-vscode
settings.json
"": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
},
ワークスペース毎の設定
.prettierrc
{
"printWidth": 100,
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true,
"endOfLine": "lf"
}
除外したいファイル、フォルダ
.prettierignore
package.json
package-lock.json
Project Manager
VS Code のプロジェクトをお気に入りとして登録
alefragnani.project-manager
Rainbow CSV
CSV の列を強調表示
mechatroner.rainbow-csv
Regex Previewer
正規表現の一致を表示
chrmarti.regex
Remote Development
リモート開発
ms-vscode-remote.vscode-remote-extensionpack
- Remote - SSH
- Remote - Containers
- Remote - WSL
REST Client
HTTP リクエストを送信し、レスポンスを確認
humao.rest-client
Sass
Sass 構文の強調表示
Syler.sass-indented
Sort lines
行をソート・ユニーク・ジョイン
Tyriar.sort-lines
Svg Preview
SVG プレビュー
SimonSiefke.svg-preview
switch-hosts
hosts の切り替え
yang-yue.switch-hosts
Tailwind CSS IntelliSense
Test Explorer UI
Todo Tree
TODO コメントの強調表示やマーキング
Gruntfuggly.todo-tree
settings.json
"todo-tree.general.tags": [
"TODO",
"FIXME",
"WARNING",
"BUG",
"NOTE",
"DEBUG"
],
"todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS):",
"todo-tree.highlights.defaultHighlight": {
"icon": "checklist",
"iconColour": "#FFFFFF",
"fontWeight": "bold",
"type": "text",
},
"todo-tree.highlights.customHighlight": {
"TODO": {
"icon": "check",
"iconColour": "#007bff",
"background": "#007bff",
"foreground": "#333333",
},
"FIXME": {
"iconColour": "#28a745",
"background": "#28a745",
"foreground": "#333333",
},
"WARNING": {
"icon": "alert",
"iconColour": "#ffc107",
"background": "#ffc107",
"foreground": "#333333",
},
"BUG": {
"icon": "bug",
"iconColour": "#dc3545",
"background": "#dc3545",
"foreground": "#333333",
},
"NOTE": {
"iconColour": "#C0C0C0",
"background": "#C0C0C0",
"foreground": "#333333",
},
},
Vega Viewer
グラフ作成
RandomFractalsInc.vscode-vega-viewer
Vetur
Vue ツール
octref.vetur
Vscode Google Translate
テキストの翻訳
funkyremi.vscode-google-translate
vscode-icons
ファイルアイコン
vscode-icons-team.vscode-icons
Zenkaku-Hankaku
全角半角変換
masakit.zenkaku-hankaku
テキスト校正くん
テキストファイルまたは Markdown ファイルの日本語の文章をチェック
ICS.japanese-proofreading
settings.json
"japanese-proofreading.textlint.外来語カタカナ表記": false,
"japanese-proofreading.textlint.全角文字どうし": false,
"japanese-proofreading.textlint.かっこ類と隣接する文字の間のスペースの有無": false,
"japanese-proofreading.textlint.全角文字と半角文字の間": false,
"japanese-proofreading.textlint.丸かっこ()": false,
コメント