Visual Studio Code

コンピュータ
コンピュータ

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

Visual Studio: ソフトウェア開発者とチーム向けの IDE およびコード エディター
Visual Studio 開発ツールとサービスによって、開発者が任意のプラットフォームや言語でアプリの開発を行うのが容易になります。 コード エディターまたは IDE を使用してどこでも無料で開発できます。
  1. インストール
  2. 起動
  3. 操作
      1. エクスプローラーを開く
      2. ソース管理を開く
      3. サイドバーを開く・閉じる
      4. ターミナルを開く・閉じる
      5. 最初のエディターにフォーカス
      6. ファイル移動
      7. ワークスペース内シンボルに移動
      8. ファイル内シンボル移動
      9. コマンド入力
      10. 行の入れ替え
      11. 行のコピー
      12. コメントアウト
      13. 検索
      14. 置換
      15. 前へ移動・後ろへ移動
      16. マルチカーソル
      17. 最近開いたフォルダとワークスペース間を移動する
  4. 設定
    1. ユーザー設定
    2. ワークスペース設定
  5. 拡張機能
      1. 拡張インストール Tips
    1. Active File In StatusBar
    2. Auto Rename Tag
    3. Background Phi Colors
    4. Better Comments
    5. Bracket Pair Colorizer 2
    6. change-case
    7. Clipboard Manager
    8. Code Spell Checker
    9. code-eol 2019 (Line Endings)
    10. Color Highlight
    11. Color Manager
    12. CSS Navigation
    13. CSSTree validator
    14. Docker
    15. DotENV
    16. Draw.io Integration
    17. EditorConfig for VS Code
    18. Error Lens
    19. EvilInspector
    20. Excel Viewer
    21. file-icons
    22. Firebase
    23. Firebase Explorer
    24. Firebase Snippets
    25. GistPad
    26. Git Graph
    27. GitHub Actions
    28. GitLens
    29. Gitmoji
    30. google-search
    31. Highlight Matching Tag
    32. Hopscotch
    33. Hosts Language
    34. HTMLHint
    35. htmltagwrap
    36. Japanese Language Pack
    37. JavaScript (ES6) code snippets in StandardJS style
    38. Laravel Blade Snippets
    39. Laravel Extra Intellisense
    40. Laravel goto view
    41. Laravel Snippets
    42. laravel-goto-controller
    43. Live Sass Compiler
    44. Live Server
    45. Log File Highlighter
    46. Markdown PDF
    47. Markdown Preview Enhanced
    48. Marp for VS Code
    49. Output Colorizer
    50. Paste Image
    51. Path Autocomplete
    52. PDF Preview
    53. Peacock
    54. PHP Debug
    55. PHP DocBlocker
    56. PHP Intelephense
    57. PHPUnit Test Explorer
    58. Prettier
    59. Project Manager
    60. Rainbow CSV
    61. Regex Previewer
    62. Remote Development
    63. REST Client
    64. Sass
    65. Sort lines
    66. Svg Preview
    67. switch-hosts
    68. Test Explorer UI
    69. Todo Tree
    70. Vagrantfile Support
    71. Vega Viewer
    72. Vetur
    73. Vscode Google Translate
    74. vscode-icons
    75. vscode-icons
    76. テキスト校正くん

インストール

Visual Studio: ソフトウェア開発者とチーム向けの IDE およびコード エディター
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

Clipboard Manager

複数クリックボード
EdgardMessias.clipboard-manager

Clipboard Manager - Visual Studio Marketplace
Extension for Visual Studio Code - Clipboard Manager

Code Spell Checker

スペルミスを検出
streetsidesoftware.code-spell-checker

Code Spell Checker - Visual Studio Marketplace
Extension for Visual Studio Code - Spelling checker for source code

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": "↵",
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 - Edit Excel spreadsheets and CSV files in Visual Studio Code and VS Code for the Web.

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 Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly nav...

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,
We're sorry, the page you requested cannot be found.

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 and VS Code for Web.

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ファイルの日本語の文章をチェックする拡張機能

コメント

タイトルとURLをコピーしました