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,
  
  
  
  

コメント