Visual Studio Code

MicroSoft 製の高機能エディタです。
Visual Studio Code : VS Code

Visual Studio: ソフトウェア開発者とチーム向けの IDE およびコードエディター

Visual Studio 開発ツールとサービスによって、開発者が任意のプラットフォームや言語でアプリの開発を行うのが容易になります。コードエディターまたは IDE を使用してどこでも無料で開発できます。

インストール
起動
操作
設定
1. ユーザー設定
2. ワークスペース設定
拡張機能

インストール

Visual Studio: ソフトウェア開発者とチーム向けの IDE およびコードエディター

wget

PS> winget install Microsoft.WindowsTerminal

起動

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": "HackGenNerd",
    "editor.tabSize": 4,
    "editor.detectIndentation": false, // 開いたファイルからインデントを自動判別
    "editor.insertSpaces": true, // タブキーをスペース入力
    "editor.renderControlCharacters": true, // 制御文字を表示
    "editor.minimap.enabled": false, // ミニマップを表示
    "editor.formatOnSave": true, // 保存時自動フォーマット

    "terminal.integrated.scrollback": 2000,
    "terminal.integrated.windowsEnableConpty": true, // 選択したテキストを自動コピーする

    "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

Active File In StatusBar - Visual Studio Marketplace

Extension for Visual Studio Code - Add statusbar entry to show path for currently active file.

Auto Rename Tag

ペアになっている HTML / XML タグの名前を自動的に変更
formulahendry.auto-rename-tag

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

Background Phi Colors

エディタ内のテキストの背景をさまざまに着色する
wraith13.background-phi-colors

インデントの深さに応じた着色
行頭と行末を除く連続した2つ以上の半角スペースに着色

Background Phi Colors - Visual Studio Marketplace

Extension for Visual Studio Code - This extension colors the background in various ways.

Better Comments

コメントの種類によって着色
aaron-bond.better-comments

settings.json

    "better-comments.tags": [
        {
            "tag": "TODO",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "color": "#007bff",
        },
        {
            "tag": "FIXME",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "color": "#28a745",
        },
        {
            "tag": "WARNING",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "color": "#ffc107",
        },
        {
            "tag": "BUG",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "color": "#dc3545",
        },
        {
            "tag": "NOTE",
            "strikethrough": false,
            "backgroundColor": "transparent",
            "color": "#C0C0C0",
        },
    ],

Better Comments - Visual Studio Marketplace

Extension for Visual Studio Code - Improve your code commenting by annotating with alert, informational, TODOs, and more!

Bracket Pair Colorizer 2

カッコの対応を色付きで表示
CoenraadS.bracket-pair-colorizer-2

Bracket Pair Colorizer 2 - Visual Studio Marketplace

Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

change-case

文字列のフォーマットを変換してくれる拡張機能。
wmaurer.change-case

change-case - Visual Studio Marketplace

Extension for Visual Studio Code - Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word

settings.json

    "code-eol.style": {
        "color": "#999999",
        "opacity": 0.1
    },
    "code-eol.newlineCharacter": "↓",
    "code-eol.returnCharacter": "←",
    "code-eol.crlfCharacter": "↵",

code-eol 2019 (Line Endings) - Visual Studio Marketplace

Extension for Visual Studio Code - Displays line endings like Atom/Notepad

Color Highlight

色コードの背景にその色を表示
naumovs.color-highlight

Color Highlight - Visual Studio Marketplace

Extension for Visual Studio Code - Highlight web colors in your editor

Color Manager

カラーパレット表示・選択
RoyAction.color-manager

Color Manager - Visual Studio Marketplace

Extension for Visual Studio Code - color picker and color palette

CSS Navigation

HTML から CSS への定義や CSS から HTML への参照を検索
pucelle.vscode-css-navigation

CSS Navigation - Visual Studio Marketplace

Extension for Visual Studio Code - Allows Go to Definition from HTML to CSS / Sass / Less; provides Completion and Workspace Symbols for class & id name.

CSSTree validator

CSS の検証
smelukov.vscode-csstree

CSSTree validator - Visual Studio Marketplace

Extension for Visual Studio Code - Validate CSS according to W3C specs and browser implementations

Docker

Docker の構築・管理・デプロイ
vscode-docker

Docker - Visual Studio Marketplace

Extension for Visual Studio Code - Makes it easy to create, manage, and debug containerized applications.

DotENV

.env のシンタックスハイライト
mikestead.dotenv

DotENV - Visual Studio Marketplace

Extension for Visual Studio Code - Support for dotenv file syntax

Draw.io Integration

VS Code から draw.io の作図可能
hediet.vscode-drawio

Draw.io Integration - Visual Studio Marketplace

Extension for Visual Studio Code - This unofficial extension integrates Draw.io into VS Code.

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

EditorConfig for VS Code - Visual Studio Marketplace

Extension for Visual Studio Code - EditorConfig Support for Visual Studio Code

Error Lens

エラーメッセージをインラインで表示
usernamehw.errorlens

settings.json

    "errorLens.excludePatterns": [
        "**/*.{txt,md}"
    ],

Error Lens - Visual Studio Marketplace

Extension for Visual Studio Code - Improve highlighting of errors, warnings and other language diagnostics.

EvilInspector

全角スペースを強調表示
saikou9901.evilinspector

EvilInspector - Visual Studio Marketplace

Extension for Visual Studio Code - inspect evil charactors on your code

Excel Viewer

CSV・Excel ビューア
GrapeCity.gc-excelviewer

Excel Viewer - Visual Studio Marketplace

Extension for Visual Studio Code - View Excel spreadsheets and CSV files within Visual Studio Code workspaces.

file-icons

シンプルなファイルアイコン
file-icons.file-icons

file-icons - Visual Studio Marketplace

Extension for Visual Studio Code - File-specific icons in VSCode for improved visual grepping.

Firebase

toba.vsfire

Firebase - Visual Studio Marketplace

Extension for Visual Studio Code - Firestore Security Rules syntax highlighting

Firebase Explorer

jsayol.firebase-explorer

Firebase Explorer - Visual Studio Marketplace

Extension for Visual Studio Code - Visual Studio Code extension to explore and manage your Firebase projects

Firebase Snippets

hasanakg.firebase-snippets

Firebase Snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Firebase snippets for Visual Studio Code

GistPad

GitHub の Gists とリポジトリの編集
vsls-contrib.gistfs

GistPad - Visual Studio Marketplace

Extension for Visual Studio Code - Manage your code snippets and developer notes using GitHub Gists and repositories.

Git Graph

Git の履歴をグラフィカルに表示
mhutchie.git-graph

Git Graph - Visual Studio Marketplace

Extension for Visual Studio Code - View a Git Graph of your repository, and perform Git actions from the graph.

GitHub Actions

cschleiden.vscode-github-actions

GitHub Actions - Visual Studio Marketplace

Extension for Visual Studio Code - GitHub Actions workflows and runs for github.com hosted repositories in VS Code

GitLens

Git の機能を強化
eamodio.gitlens

settings.json

    "gitlens.codeLens.authors.enabled": false,
    "gitlens.codeLens.recentChange.enabled": false,
    "gitlens.currentLine.enabled": false,

GitLens — Git supercharged - Visual Studio Marketplace

Extension for Visual Studio Code - Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotati...

Gitmoji

Git コミットメッセージに絵文字入力支援
Vtrois.gitmoji-vscode

gitmoji

Gitmoji is an emoji guide for your commit messages. Aims to be a standarization cheatshee /t for using emojis on GitHub's commit messages.

settings.json

    "gitmoji.additionalEmojis": [
        {
            "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": ":truck:",
            "description": "リソースの移動・名称変更"
        },
        {
            "emoji": "💬",
            "code": ":speech_balloon:",
            "description": "テキストの追加・更新"
        },
        {
            "emoji": "🩹",
            "code": ":adhesive_bandage:",
            "description": "軽微な修正"
        }
    ],
    "gitmoji.onlyUseAdditionalEmojis": true,

Gitmoji - Visual Studio Marketplace

Extension for Visual Studio Code - An emoji tool for your git commit messages

google-search

Google で検索を追加
kameshkotwani.google-search

google-search - Visual Studio Marketplace

Extension for Visual Studio Code - Google your doubts, errors and confusions!

Highlight Matching Tag

一致する開始タグや終了タグを強調表示
vincaslt.highlight-matching-tag

Highlight Matching Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Highlights matching closing and opening tags

Hopscotch

配色テーマ
idleberg.hopscotch

Hopscotch - Visual Studio Marketplace

Extension for Visual Studio Code - Color scheme inspired by the Hopscotch learning platform for kids

Hosts Language

hosts ファイルのシンタックスカラー
tommasov.hosts

Hosts Language - Visual Studio Marketplace

Extension for Visual Studio Code - Syntax colors for hosts file.

HTMLHint

HTML 静的解析ツール
mkaufman.HTMLHint

HTMLHint - Visual Studio Marketplace

Extension for Visual Studio Code - VS Code integration for HTMLHint - A Static Code Analysis Tool for HTML

htmltagwrap

選択内容を HTML タグでラップ
bradgashler.htmltagwrap

htmltagwrap - Visual Studio Marketplace

Extension for Visual Studio Code - Wraps selected code with HTML tags

Japanese Language Pack

日本語化
MS-CEINTL.vscode-language-pack-ja

Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace

Extension for Visual Studio Code - Language pack extension for Japanese

JavaScript (ES6) code snippets in StandardJS style

JavaScript（ES6）スニペット
jmsv.JavaScriptSnippetsStandard

JavaScript (ES6) code snippets in StandardJS style - Visual Studio Marketplace

Extension for Visual Studio Code - Code snippets for JavaScript in ES6 syntax in StandardJS style

Laravel Blade Snippets

Laravel Blade スニペット
onecentlin.laravel-blade

Laravel Blade Snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Laravel blade snippets and syntax highlight support

Laravel Extra Intellisense

amiralizadeh9480.laravel-extra-intellisense

Laravel Extra Intellisense - Visual Studio Marketplace

Extension for Visual Studio Code - better intellisense for laravel projects.

Laravel goto view

codingyu.laravel-goto-view

Laravel goto view - Visual Studio Marketplace

Extension for Visual Studio Code - Quick jump to view

Laravel Snippets

Laravel スニペット
stef-k.laravel-goto-controller

laravel-goto-controller - Visual Studio Marketplace

Extension for Visual Studio Code - Alt + click to navigate from a route to a respective controller file

laravel-goto-controller

onecentlin.laravel5-snippets

Laravel Snippets - Visual Studio Marketplace

Extension for Visual Studio Code - Laravel snippets for Visual Studio Code (Support Laravel 5 and above)

Live Sass Compiler

SASS / SCSS ファイルを CSS ファイルにリアルタイムでコンパイル/トランスパイル
glenn2223.live-sass

Live Sass Compiler - Visual Studio Marketplace

Extension for Visual Studio Code - Compile Sass or Scss to CSS at realtime.

Live Server

ローカルのウェブサーバーを起動
ritwickdey.LiveServer

Live Server - Visual Studio Marketplace

Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages

Log File Highlighter

ログファイルに色の強調表示
emilast.LogFileHighlighter

Log File Highlighter - Visual Studio Marketplace

Extension for Visual Studio Code - Adds color highlighting to log files to make it easier to follow the flow of log events and identify problems.

Markdown PDF

Markdown を pdf・html・png・jpeg に変換
yzane.markdown-pdf

Markdown PDF - Visual Studio Marketplace

Extension for Visual Studio Code - Convert Markdown to PDF

Markdown Preview Enhanced

マークダウンプレビュー
shd101wyy.markdown-preview-enhanced

Markdown Preview Enhanced - Visual Studio Marketplace

Extension for Visual Studio Code - Markdown Preview Enhanced ported to vscode

Marp for VS Code

プレゼン資料作成
marp-team.marp-vscode

Marp for VS Code - Visual Studio Marketplace

Extension for Visual Studio Code - Create slide deck written in Marp Markdown on VS Code

Output Colorizer

IBM.output-colorizer

Output Colorizer - Visual Studio Marketplace

Extension for Visual Studio Code - Syntax highlighting for log files

Paste Image

画像をクリップボードから直接貼り付け
mushan.vscode-paste-image

Paste Image - Visual Studio Marketplace

Extension for Visual Studio Code - paste image from clipboard directly

Path Autocomplete

コードのパス補完
ionutvmi.path-autocomplete

Path Autocomplete - Visual Studio Marketplace

Extension for Visual Studio Code - Provides path completion for visual studio code.

PDF Preview

PDF ビューア
analytic-signal.preview-pdf

PDF Preview - Visual Studio Marketplace

Extension for Visual Studio Code - Preview Portable Document Format (.pdf) files in VSCode

Peacock

ワークスペースの色を変更
johnpapa.vscode-peacock

Peacock - Visual Studio Marketplace

Extension for Visual Studio Code - Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly i...

PHP Debug

PHP Debug
felixfbecker.php-debug

PHP Debug - Visual Studio Marketplace

Extension for Visual Studio Code - Debug support for PHP with Xdebug

PHP DocBlocker

Doc コメントの入力を補完
neilbrayfield.php-docblocker

PHP DocBlocker - Visual Studio Marketplace

Extension for Visual Studio Code - A simple, dependency free PHP specific DocBlocking package

PHP Intelephense

PHP コードインテリジェンス
bmewburn.vscode-intelephense-client

settings.json

    "php.validate.enable": false,
    "php.suggest.basic": false,
    "[php]": {
        "editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
    },

PHP Intelephense - Visual Studio Marketplace

Extension for Visual Studio Code - PHP code intelligence for Visual Studio Code

PHPUnit Test Explorer

recca0120.vscode-phpunit

PHPUnit Test Explorer - Visual Studio Marketplace

Extension for Visual Studio Code - 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

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

Project Manager

VS Code のプロジェクトをお気に入りとして登録
alefragnani.project-manager

Project Manager - Visual Studio Marketplace

Extension for Visual Studio Code - Easily switch between projects

Rainbow CSV

CSV の列を強調表示
mechatroner.rainbow-csv

Rainbow CSV - Visual Studio Marketplace

Extension for Visual Studio Code - Highlight CSV and TSV files, Run SQL-like queries

Regex Previewer

正規表現の一致を表示
chrmarti.regex

Regex Previewer - Visual Studio Marketplace

Extension for Visual Studio Code - Regex matches previewer for JavaScript, TypeScript, PHP and Haxe in Visual Studio Code.

Remote Development

リモート開発
ms-vscode-remote.vscode-remote-extensionpack

Remote - SSH
Remote - Containers
Remote - WSL

Remote Development - Visual Studio Marketplace

Extension for Visual Studio Code - An extension pack that lets you open any folder in a container, on a remote machine, or in WSL and take advantage of VS Code'...

REST Client

HTTP リクエストを送信し、レスポンスを確認
humao.rest-client

REST Client - Visual Studio Marketplace

Extension for Visual Studio Code - REST Client for Visual Studio Code

Sass

Sass 構文の強調表示
Syler.sass-indented

Sass - Visual Studio Marketplace

Extension for Visual Studio Code - Indented Sass syntax Highlighting, Autocomplete & Formatter

Sort lines

行をソート・ユニーク・ジョイン
Tyriar.sort-lines

Sort lines - Visual Studio Marketplace

Extension for Visual Studio Code - Sorts lines of text

Svg Preview

SVG プレビュー
SimonSiefke.svg-preview

Svg Preview - Visual Studio Marketplace

Extension for Visual Studio Code - Preview for Svg files

switch-hosts

hosts の切り替え
yang-yue.switch-hosts

switch-hosts - Visual Studio Marketplace

Extension for Visual Studio Code - switch hosts fast

Test Explorer UI

hbenl.vscode-test-explorer

Test Explorer UI - Visual Studio Marketplace

Extension for Visual Studio Code - Run your tests in the Sidebar of Visual Studio Code

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",
        },
    },

Todo Tree - Visual Studio Marketplace

Extension for Visual Studio Code - Show TODO, FIXME, etc. comment tags in a tree view

Vagrantfile Support

marcostazi.VS-code-vagrantfile

Vagrantfile Support - Visual Studio Marketplace

Extension for Visual Studio Code - Provides syntax highlighting support for Vagrantfile, useful if you use Vagrant

Vega Viewer

グラフ作成
RandomFractalsInc.vscode-vega-viewer

Vega Viewer - Visual Studio Marketplace

Extension for Visual Studio Code - VSCode extension for Interactive Preview of Vega & Vega-Lite maps 🗺️ & graphs 📈

Vetur

Vue ツール
octref.vetur

Vetur - Visual Studio Marketplace

Extension for Visual Studio Code - Vue tooling for VS Code

Vscode Google Translate

テキストの翻訳
funkyremi.vscode-google-translate

Vscode Google Translate - Visual Studio Marketplace

Extension for Visual Studio Code - Translate text right in your code

vscode-icons

ファイルアイコン
vscode-icons-team.vscode-icons

vscode-icons - Visual Studio Marketplace

Extension for Visual Studio Code - Icons for Visual Studio Code

vscode-icons

全角半角変換
masakit.zenkaku-hankaku

Zenkaku-Hankaku - Visual Studio Marketplace

Extension for Visual Studio Code - 全角と半角を変換する (switches Japanese fullwidth characters and halfwidth ones)

テキスト校正くん

テキストファイルまたは 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,

テキスト校正くん - Visual Studio Marketplace

Extension for Visual Studio Code - VS CodeでテキストファイルやMarkdownファイルの日本語の文章をチェックする拡張機能

インストール

起動

操作

エクスプローラーを開く

ソース管理を開く

サイドバーを開く・閉じる

ターミナルを開く・閉じる

最初のエディターにフォーカス

ファイル移動

ワークスペース内シンボルに移動

ファイル内シンボル移動

コマンド入力

行の入れ替え

行のコピー

コメントアウト

検索

置換

前へ移動・後ろへ移動

マルチカーソル

最近開いたフォルダとワークスペース間を移動する

設定

ユーザー設定

ワークスペース設定

拡張機能

拡張インストール Tips

Active File In StatusBar

Auto Rename Tag

Background Phi Colors

Better Comments

Bracket Pair Colorizer 2

change-case

Clipboard Manager

Code Spell Checker

code-eol 2019 (Line Endings)

Color Highlight

Color Manager

CSS Navigation

CSSTree validator

Docker

DotENV

Draw.io Integration

EditorConfig for VS Code

Error Lens

EvilInspector

Excel Viewer

file-icons

Firebase

Firebase Explorer

Firebase Snippets

GistPad

Git Graph

GitHub Actions

GitLens

Gitmoji

google-search

Highlight Matching Tag

Hopscotch

Hosts Language

HTMLHint

htmltagwrap

Japanese Language Pack

JavaScript (ES6) code snippets in StandardJS style

Laravel Blade Snippets

Laravel Extra Intellisense

Laravel goto view

Laravel Snippets

laravel-goto-controller

Live Sass Compiler

Live Server

Log File Highlighter

Markdown PDF

Markdown Preview Enhanced

Marp for VS Code

Output Colorizer

Paste Image

Path Autocomplete

PDF Preview

Peacock

PHP Debug

PHP DocBlocker