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. Clipboard Manager
    5. Code Spell Checker
    6. code-eol 2019 (Line Endings)
    7. Color Highlight
    8. Color Manager
    9. CSS Navigation
    10. CSSTree validator
    11. Database Client
    12. Docker
    13. DotENV
    14. Draw.io Integration
    15. EditorConfig for VS Code
    16. Error Lens
    17. EvilInspector
    18. Excel Viewer
    19. file-icons
    20. Firebase
    21. Firebase Explorer
    22. Firebase Snippets
    23. GistPad
    24. Git Graph
    25. GitHub Actions
    26. GitLens
    27. Gitmoji
    28. google-search
    29. Highlight Matching Tag
    30. Hopscotch
    31. Hosts Language
    32. htmltagwrap
    33. IntelliCode
    34. Japanese Language Pack
    35. Laravel Blade Snippets
    36. Laravel Extra Intellisense
    37. Laravel goto view
    38. Laravel Snippets
    39. laravel-goto-controller
    40. Live Sass Compiler
    41. Live Server
    42. Log File Highlighter
    43. Markdown Preview Enhanced
    44. Marp for VS Code
    45. Output Colorizer
    46. Paste Image
    47. Path Autocomplete
    48. PDF Preview
    49. Peacock
    50. PHP Debug
    51. PHP DocBlocker
    52. PHP Intelephense
    53. PHPUnit Test Explorer
    54. Prettier
    55. Project Manager
    56. Rainbow CSV
    57. Regex Previewer
    58. Remote Development
    59. REST Client
    60. Sass
    61. Sort lines
    62. Svg Preview
    63. switch-hosts
    64. Tailwind CSS IntelliSense
    65. Test Explorer UI
    66. Todo Tree
    67. Vega Viewer
    68. Vetur
    69. Vscode Google Translate
    70. vscode-icons
    71. Zenkaku-Hankaku
    72. テキスト校正くん

インストール

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

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.

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 2022 (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

Database Client

cweijan.vscode-database-client2

settings.json

  "remote.extensionKind": {
    "cweijan.vscode-database-client2": ["workspace"]
  },
Database Client - Visual Studio Marketplace
Extension for Visual Studio Code - Database manager for MySQL/MariaDB, PostgreSQL, SQLite, Redis and ElasticSearch.

Docker

Docker の構築・管理・デプロイ
ms-azuretools.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 コミットメッセージに絵文字入力支援
seatonjiang.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.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

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.

htmltagwrap

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

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

IntelliCode

VisualStudioExptTeam.vscodeintellicode

IntelliCode - Visual Studio Marketplace
Extension for Visual Studio Code - AI-assisted development

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

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

We're sorry, the page you requested cannot be found.

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 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
xdebug.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

Tailwind CSS IntelliSense

bradlc.vscode-tailwindcss

Tailwind CSS IntelliSense - Visual Studio Marketplace
Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code

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

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

Zenkaku-Hankaku

全角半角変換
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をコピーしました