# web 開発でよく使う VSCode 拡張ツール
VSCode とは Visual Studio Code、Microsoft が開発している Windows、Linux、macOS、web 用のソースコードエディターです。MIT ライセンスで完全フリーソフトですが、多種多様な拡張ツールにより、多言語シンタックスハイライト、コード補完、スニペットはもちろん、SSH リモート接続や MysqlDB 接続もできる可能性無限大なエディターです。
javascript vuejs と php laravel で web 開発でよく使う extensions 拡張ツールを紹介します。
# Auto Close Tag
作者：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
作者：Jun Han
インストール：7,765,158
html/xml のタグを変更した際に自動的に閉じタグや頭タグを変更してくれるツール
- When you rename one HTML/XML tag, automatically rename the paired HTML/XML tag
# Better Comments
作者：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
作者：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
作者：CoenraadS
インストール：4,847,243
プログラムをきれいに色付けして見やすくするツール
# Excel Viewer
作者：GrapeCity
インストール：1,949,423
CSV 閲覧、ソート、フィルターができるツール
VSCode をエクセルのように扱うことができます。
# Git Graph
作者：mhutchie
インストール：2,193,912
Git レポジトリのグラフ表示し、ブランチ、コミット履歴、差分などを確認、タグ追加も簡単にできるツール
# Git History
作者：Don Jayamanne
インストール：5,247,007
Git log,ファイル変更履歴、コミット履歴、差分、ブランチなどの確認ツール
# GitLens — Git supercharged
作者：GitKraken
インストール：12,649,979
Git ファイル変更履歴、コミット履歴を便利に確認できるツール
# Highlight Matching Tag
作者：vincaslt
インストール：1,064,433
カーソル置くだけで、タグのマッチングしてくれるツール
# HTML Snippets
作者：Mohamed Abusaid
インストール：6,828,392
html タグの自動補完してくれるツール
# JavaScript (ES6) code snippets
作者：charalampos karypidis
インストール：7,241,614
javascript ES6 文法チェック、自動補完してくれるツール
# Laravel Blade formatter
作者：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
作者：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
作者：codingyu
インストール：672,139
Laravel プログラムに書いてある相対リングプログラムに直接ジャンプして開けてくれるツール
コントロールからビューへディレクトリ探す手間なく、直接開いてくれます。
# Laravel Snippets
作者：Winnie Lin
インストール：995,023
Laravel の構文シンタックスをフォーマットできるツール
対応 Laravel バージョン
- Laravel 5.x
- Laravel 6.x
- Laravel 7.x
- Laravel 8.x
# laravel-goto-controller
作者：ctf0
インストール：25,108
ルートやコントロールからコントロールへ直接ジャンプして開けてくれるツール
# Laravel Blade Snippets
作者：Winnie Lin
インストール：1,651,717
Laravel blade のシンタックス ハイライトとフォーマットできるツール
機能
- Blade syntax highlight
- Blade snippets
- Emmet works in blade template
- Blade formatting
# Markdown All in One
作者：Yu Zhang
インストール：3,574,926
マークダウン記法使うならこのツール一発で複数必要なパッケージを一括にインストールしてくれます。
markdown フォーマット、補完、プレビューなどなどのツールパッケージ
# Markdown PDF
作者：yzane
インストール：979,239
markdown ファイルを pdf, html, png, jpg ファイルに変換できるツール
# Markdown Shortcuts
作者：mdickin
インストール：160,400
markdown ファイルを編集する際に一括テーブル作成、ショートカットで編集できるツール
# PHP Intelephense
作者：Ben Mewburn
インストール：5,039,041
PHP プログラムハイライト、構文シンタックスチェックできるツール
# phpfmt - PHP formatter
作者：kokororin
インストール：656,505
PHP プログラムフォーマットツール
PHP >= 5.6 is required.
# Prettier - Code formatter
作者：Prettier
インストール：18,021,289
javascript,json,graphql などの言語をフォーマットできるツール
対応言語
- javascript
- javascriptreact
- typescript
- typescriptreact
- json
- graphql
- handlebars
# Rainbow CSV
作者：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
作者：Microsoft
インストール：7,877,451
VSCode からリモートサーバーの SSH へ接続できるツール
# Simple React Snippets
作者：Burke Holland
インストール：1,406,065
React プログラムを簡潔のショート入力で補完してくれるツール
# Twig
作者：whatwedo
インストール：490,538
テンプレートエンジン twig のシンタックスとハイライトできるツール
# Vetur
作者：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
作者：sarah.drasner
インストール：1,239,724
vuejs の簡略入力でソース補完やフォーマットできるツール
# XML Tools
作者：Josh Johnson
インストール：3,303,194
XML フォーマットツール
機能
- XML Formatting
- XML Tree View
- XPath Evaluation
- XQuery Linting
- XQuery Execution
- XQuery Code Completion
# Material Icon Theme
作者：Philipp Kief
インストール：10,665,880
プロジェクトのディレクトリやファイルアイコンを見やすくきれいにする icon ツール
2022-01-22