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. フォント
      1. インストール
    2. ユーザー設定
    3. ワークスペース設定
  5. 拡張機能
      1. 拡張インストール Tips
    1. :emojisense:
    2. Active File In StatusBar
    3. Auto Rename Tag
    4. Background Phi Colors
    5. Better Comments
    6. Bracket Pair Colorizer 2
    7. change-case
    8. Clipboard Manager
    9. Code Spell Checker
    10. code-eol 2019 (Line Endings)
    11. Color Highlight
    12. Color Manager
    13. CSS Navigation
    14. CSSTree validator
    15. Docker
    16. DotENV
    17. Draw.io Integration
    18. EditorConfig for VS Code
    19. EvilInspector
    20. Excel Viewer
    21. file-icons
    22. Firebase
    23. Firebase Explorer
    24. Firebase Snippets
    25. GistPad
    26. Git Graph
    27. GitLens
    28. Gitmoji
    29. google-search
    30. Highlight Matching Tag
    31. Hopscotch
    32. Hosts Language
    33. HTMLHint
    34. htmltagwrap
    35. Japanese Language Pack
    36. JavaScript (ES6) code snippets in StandardJS style
    37. Laravel Blade Snippets
    38. Laravel Snippets
    39. Live Sass Compiler
    40. Live Server
    41. Log File Highlighter
    42. Markdown PDF
    43. Markdown Preview Enhanced
    44. Marp for VS Code
    45. Paste Image
    46. Path Autocomplete
    47. PDF Preview
    48. Peacock
    49. PHP DocBlocker
    50. PHP Intelephense
    51. Prettier
    52. Project Manager
    53. Rainbow CSV
    54. Regex Previewer
    55. Remote Development
    56. Sass
    57. Sort lines
    58. Svg Preview
    59. switch-hosts
    60. Todo Tree
    61. Vagrantfile Support
    62. Vega Viewer
    63. Vetur
    64. Vscode Google Translate
    65. vscode-icons
    66. テキスト校正くん

インストール

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

設定

フォント

好みに合わせてフォントをインストールします。
私は白源を使用します。

プログラミングフォント白源 (はくげん/HackGen)
https://github.com/yuru7/HackGen/releases

インストール

PowerShell

PS> Invoke-WebRequest -Uri https://github.com/yuru7/HackGen/releases/download/v2.3.5/HackGenNerd_v2.3.5.zip -OutFile HackGenNerd.zip -UseBasicParsing
PS> Expand-Archive -Path HackGenNerd.zip -DestinationPath .
PS> $fonts = (New-Object -ComObject Shell.Application).Namespace(0x14)
PS> dir HackGenNerd_v2.3.5/*.ttf | %{ $fonts.CopyHere($_.fullname) }
PS> rm HackGenNerd* -Recurse

Chocolatey

choco install -y font-hackgen-nerd

ユーザー設定

VS Code 全体の設定例です。
settings.json

{
  "files.encoding": "utf8", // 既定のエンコード
  "files.eol": "\n", // 既定の改行文字
  "files.autoGuessEncoding": true, // エンコード自動判別
  "files.insertFinalNewline": true, // 最終行に改行
  "files.trimFinalNewlines": true, // 最終行をトリミング
  "files.trimTrailingWhitespace": true, // 行末のスペース削除
  "[markdown]": {
    "files.trimTrailingWhitespace": false // Markdownは行末のスペースを削除しない
  },

  "editor.fontFamily": "HackGenNerd",
  "editor.tabSize": 4,
  "editor.detectIndentation": false, // 開いたファイルからインデントを自動判別
  "editor.insertSpaces": true, // タブキーをスペース入力
  "editor.renderControlCharacters": true, // 制御文字を表示
  "editor.minimap.enabled": false, // ミニマップを表示

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

  "emmet.triggerExpansionOnTab": true, // Emmet有効

  "": ""
}

ワークスペース設定

プロジェクト毎に設定する場合は、.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 bierner.emojisense

:emojisense:

絵文字の入力支援
bierner.emojisense

Active File In StatusBar

ステータスバーにファイルのフルパスを表示
RoscoP.ActiveFileInStatusBar

Auto Rename Tag

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

Background Phi Colors

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

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

Better Comments

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

Bracket Pair Colorizer 2

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

change-case

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

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 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 for VS Code - Visual Studio Marketplace
Extension for Visual Studio Code - EditorConfig Support for Visual Studio Code

.editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_size = 4
indent_style = space
trim_trailing_whitespace = true

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.

GitLens

Git の機能を強化
eamodio.gitlens

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

settings.json

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

Gitmoji

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

Gitmoji - Visual Studio Marketplace
Extension for Visual Studio Code - An emoji tool for your git commit messages
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

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 Snippets

Laravel スニペット
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

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

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

Prettier

コードフォーマッタ
esbenp.prettier-vscode

Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier

settings.json

"": {
    "editor.formatOnSave": true
},
"": {
    "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

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 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'...
  • Remote - SSH
  • Remote - Containers
  • Remote - WSL

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

Todo Tree

TODO コメントの強調表示やマーキング
Gruntfuggly.todo-tree

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

テキスト校正くん

テキストファイルまたは Markdown ファイルの日本語の文章をチェック
ICS.japanese-proofreading

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

コメント

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