# web 開発でよく使う VSCode 拡張ツール

VSCode とは Visual Studio Code、Microsoft が開発している Windows、Linux、macOS、web 用のソースコードエディターです。MIT ライセンスで完全フリーソフトですが、多種多様な拡張ツールにより、多言語シンタックスハイライト、コード補完、スニペットはもちろん、SSH リモート接続や MysqlDB 接続もできる可能性無限大なエディターです。

javascript vuejs と php laravel で web 開発でよく使う extensions 拡張ツールを紹介します。

# Auto Close Tag

Auto Close Tag (opens new window)

作者:Jun Han
インストール:6,245,012

html/xml の頭タグを書くだけで、閉じタグを用意してくれるツール

  • Automatically add closing tag when you type in the closing bracket of the opening tag
  • After closing tag is inserted, the cursor is between the opening and closing tag
  • Set the tag list that would not be auto closed
  • Automatically close self-closing tag
  • Support auto close tag as Sublime Text 3
  • Use Keyboard Shortcut or Command Palette to add close tag manually

# Auto Rename Tag

Auto Rename Tag (opens new window)

作者:Jun Han
インストール:7,765,158

html/xml のタグを変更した際に自動的に閉じタグや頭タグを変更してくれるツール

  • When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag

# Better Comments

Better Comments (opens new window)

作者:Aaron Bond
インストール:2,591,386

プログラムのコメント欄を見やすくしてアラート、TODO などを強調して表示するツール

With this extension, you will be able to categorise your annotations into:

  • Alerts
  • Queries
  • TODOs
  • Highlights
  • Commented out code can also be styled to make it clear the code shouldn't be there
  • Any other comment styles you'd like can be specified in the settings

# Bookmarks

Bookmarks (opens new window)

作者:Alessandro Fragnani
インストール:1,862,519

気になるところにブックマーク貼って、後からブックマーク一覧やそのブックマークに飛んで閲覧することができるツール

  • Mark/unmark positions in your code
  • Mark positions in your code and give it name
  • Jump forward and backward between bookmarks
  • Icons in gutter and overview ruler
  • See a list of all Bookmarks in one file and project
  • Select lines and regions with bookmarks
  • A dedicated Side Bar

# Bracket Pair Colorizer 2

Bracket Pair Colorizer 2 (opens new window)

作者:CoenraadS
インストール:4,847,243

プログラムをきれいに色付けして見やすくするツール

# Excel Viewer

Excel Viewer (opens new window)

作者:GrapeCity
インストール:1,949,423

CSV 閲覧、ソート、フィルターができるツール
VSCode をエクセルのように扱うことができます。

# Git Graph

Git Graph (opens new window)

作者:mhutchie
インストール:2,193,912

Git レポジトリのグラフ表示し、ブランチ、コミット履歴、差分などを確認、タグ追加も簡単にできるツール

# Git History

Git History (opens new window)

作者:Don Jayamanne
インストール:5,247,007

Git log,ファイル変更履歴、コミット履歴、差分、ブランチなどの確認ツール

# GitLens — Git supercharged

GitLens — Git supercharged (opens new window)

作者:GitKraken
インストール:12,649,979

Git ファイル変更履歴、コミット履歴を便利に確認できるツール

# Highlight Matching Tag

Highlight Matching Tag (opens new window)

作者:vincaslt
インストール:1,064,433

カーソル置くだけで、タグのマッチングしてくれるツール

# HTML Snippets

HTML Snippets (opens new window)

作者:Mohamed Abusaid
インストール:6,828,392

html タグの自動補完してくれるツール

# JavaScript (ES6) code snippets

JavaScript (ES6) code snippets (opens new window)

作者:charalampos karypidis
インストール:7,241,614

javascript ES6 文法チェック、自動補完してくれるツール

# Laravel Blade formatter

Laravel Blade formatter (opens new window)

作者:Shuhei Hayashibara
インストール:207,329

Laravel Blade テンプレートエンジンをフォーマットしてくれるツール

  • Automatically Indents markup inside directives
  • Automatically add spacing to blade templating markers
  • PHP 8 support (null safe operator, named arguments) 🐘
  • PSR-2 support (format inside directives)

# Laravel Extra Intellisense

Laravel Extra Intellisense (opens new window)

作者:amir
インストール:553,813

Laravel Routes、views、controller など自動連想してプログラムを補完してくれるツール

機能

  • Route names and route parameters
  • Views and variables
  • Configs
  • Translations and translation parameters
  • Laravel mix function
  • Validation rules
  • View sections and stacks
  • Env
  • Route Middlewares
  • Asset
  • Model Attributes (Beta!)
  • Blade directives

# Laravel goto view

Laravel goto view (opens new window)

作者:codingyu
インストール:672,139

Laravel プログラムに書いてある相対リングプログラムに直接ジャンプして開けてくれるツール
コントロールからビューへディレクトリ探す手間なく、直接開いてくれます。

# Laravel Snippets

Laravel Snippets (opens new window)

作者:Winnie Lin
インストール:995,023

Laravel の構文シンタックスをフォーマットできるツール

対応 Laravel バージョン

  • Laravel 5.x
  • Laravel 6.x
  • Laravel 7.x
  • Laravel 8.x

# laravel-goto-controller

Laravel Goto Controller (opens new window)

作者:ctf0
インストール:25,108

ルートやコントロールからコントロールへ直接ジャンプして開けてくれるツール

# Laravel Blade Snippets

Laravel Blade Snippets (opens new window)

作者:Winnie Lin
インストール:1,651,717

Laravel blade のシンタックス ハイライトとフォーマットできるツール

機能

  • Blade syntax highlight
  • Blade snippets
  • Emmet works in blade template
  • Blade formatting

# Markdown All in One

Markdown All in One (opens new window)

作者:Yu Zhang
インストール:3,574,926

マークダウン記法使うならこのツール一発で複数必要なパッケージを一括にインストールしてくれます。
markdown フォーマット、補完、プレビューなどなどのツールパッケージ

# Markdown PDF

Markdown PDF (opens new window)

作者:yzane
インストール:979,239

markdown ファイルを pdf, html, png, jpg ファイルに変換できるツール

# Markdown Shortcuts

Markdown Shortcuts (opens new window)

作者:mdickin
インストール:160,400

markdown ファイルを編集する際に一括テーブル作成、ショートカットで編集できるツール

# PHP Intelephense

PHP Intelephense (opens new window)

作者:Ben Mewburn
インストール:5,039,041

PHP プログラムハイライト、構文シンタックスチェックできるツール

# phpfmt - PHP formatter

phpfmt - PHP formatter (opens new window)

作者:kokororin
インストール:656,505

PHP プログラムフォーマットツール

PHP >= 5.6 is required.

# Prettier - Code formatter

Prettier - Code formatter (opens new window)

作者:Prettier
インストール:18,021,289

javascript,json,graphql などの言語をフォーマットできるツール

対応言語

  • javascript
  • javascriptreact
  • typescript
  • typescriptreact
  • json
  • graphql
  • handlebars

# Rainbow CSV

Rainbow CSV (opens new window)

作者:mechatroner
インストール:1,574,661

ハイライト CSV,TSV ファイルを虹のようにきれいに表示できるツール

メイン機能

  • Highlight columns in comma (.csv), tab (.tsv), semicolon and pipe - separated files in different colors
  • Transform and filter tables using built-in SQL-like query language
  • Provide info about column on hover
  • Automatic consistency check for csv files (CSVLint)
  • Multi-cursor column edit
  • Align columns with spaces and Shrink (trim spaces from fields)
  • Works in browser (vscode.dev) with limited functionality

# Remote - SSH

Remote - SSH (opens new window)

作者:Microsoft
インストール:7,877,451

VSCode からリモートサーバーの SSH へ接続できるツール

# Simple React Snippets

Simple React Snippets (opens new window)

作者:Burke Holland
インストール:1,406,065

React プログラムを簡潔のショート入力で補完してくれるツール

# Twig

Twig (opens new window)

作者:whatwedo
インストール:490,538

テンプレートエンジン twig のシンタックスとハイライトできるツール

# Vetur

Vetur (opens new window)

作者:Pine Wu
インストール:9,538,928

vuejs シンタックス ハイライト 文本チェック フォーマットできるツール
Vuejs で開発ならすべての開発者が使っていると信じています。

機能

  • Syntax-highlighting
  • Semantic-highlighting
  • Snippet
  • Emmet
  • Linting / Error Checking
  • Formatting
  • IntelliSense
  • Debugging
  • Component Data: auto-completion and hover-information for popular Vue frameworks and your own custom components
  • Experimental Interpolation Features: auto-completion, hover information and type-checking in Vue template
  • VTI: Surface template type-checking errors on CLI
  • Global components: support define global components.

# Vue VSCode Snippets

Vue VSCode Snippets (opens new window)

作者:sarah.drasner
インストール:1,239,724

vuejs の簡略入力でソース補完やフォーマットできるツール

# XML Tools

XML Tools (opens new window)

作者:Josh Johnson
インストール:3,303,194

XML フォーマットツール

機能

  • XML Formatting
  • XML Tree View
  • XPath Evaluation
  • XQuery Linting
  • XQuery Execution
  • XQuery Code Completion

# Material Icon Theme

Material Icon Theme (opens new window)

作者:Philipp Kief
インストール:10,665,880

プロジェクトのディレクトリやファイルアイコンを見やすくきれいにする icon ツール

2022-01-22
  • software
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ