2021-08-08に更新

【VSCode】拡張機能一覧(主にWeb系システム開発用)

個人用メモ。
主にPHPを使用して開発する環境で使用している拡張機能一覧。
(他のも混じっているけど)
(後で追加・変更・削除するかも)

VSCode

  • Bookmarks
     あらかじめソースコード中にブックマークを設定しておくと、他の場所からブックマークまで一瞬で移動することが出来る。

  • indent-rainbow
     インデントを色付きで表示してくれる。

  • Japanese Language Pack for Visual Studio Code
     VSCodeの日本語化。

HTML

  • Auto Close Tag
     自動的に閉じタグを追記してくれる。

  • Auto Rename Tag
     タグを変更すると、対応する閉じタグを自動的に変更してくれる。

  • HTML Snippets
     HTMLの予測変換を表示してくれる。

  • HTMLHint
     HTMLの文法チェックをしてくれる。

PHP(Laravel)

  • Bracket Pair Colorizer 2
     メソッドやArrayなどで、対となるカッコを色付きで表示してくれる。

  • php cs fixer
     PHPソースを自動整形してくれる。
     ※別途、「php-cf-fixer.phar」のインストールが必要。

  • PHP Debug
     PHPをステップ実行してデバッグできるようになる。

  • PHP IntelliSense
     PHPの予測変換を表示してくれる。

【2021.8.8 追加】
* Laravel Blade Snippets
 Laravelのbladeファイル内のタグやディレクティブを色付きで表示してくれる。

  • Laravel Blade formatter
     Laravelのbladeファイル用のフォーマッタ。
     blade独自のディレクティブもインデントしてくれる(これ重要)。

JavaScript(Node.js,Vue.js)

  • ESLint
     JavaScriptの構文チェックをリアルタイムで実行してくれる。
     ※Vue.jsで使用するには設定が必要。

  • JavaScript (ES6) code snippets
     JavaScriptの予測変換を表示してくれる。

  • Vetur
     Vue.jsコードのシンタックスハイライトやコード補完、リント、フォーマットを行ってくれる。

CSS(Sass,SCSS)

  • IntelliSense for CSS class names in HTML
     CSSクラス名を入力するときに、入力補完してくれる。

  • SCSS Formatter
     SCSSコードを自動整形してくれる。

その他

  • Log File Highlighter
     ログファイルの内容を色付きで表示してくれる。

  • MySQL
     VSCodeでMySQLを使用可能にする。

  • Rainbow CSV
     CSVファイルをカラムごとに色分けして表示してくれる。

  • Regex Previewer
     正規表現の実行結果をプレビュー表示してくれる。

  • SFTP
     サーバへ自動的にソースファイルをアップロードしてくれる。

【参考】

「Visual Studio Code」をインストールしてPHPコードのデバッグ環境を設定する方法
https://incloop.com/visualstudiocodeのデバッグ設定/

Visual Studio Codeで作るPHP開発環境のおすすめ拡張機能17選
https://wonwon-eater.com/vscode-php-plugin/

VScodeの日本語化ができない 変わらない時の対処法[Visual Studio Code]
https://rabotiku-sato.com/vscode-japanese-setting

vscodeでVue.jsを書くときに使っているプラグインとか
https://qiita.com/dayoshix/items/c61a75a971331418c348

【HTML編】Visual Studio Code おすすめプラグイン紹介 #02
https://so-da.tech/tech/vscode/vscd3/

VSCodeのAuto Rename Tagで閉じタグも自動変更
https://tech.pjin.jp/blog/2020/04/27/vscode_extension_auto_rename_tag/

VSCode で HTML の文法チェックを行う拡張機能 HTMLHint
https://loumo.jp/archives/26229

VSCode拡張機能『indent-rainbow』でインデントを虹色にする方法
https://onedarling.site/programming/tool/vscode-indent-rainbow/

【2020年版】VSCodeでhtml/css/jsの拡張機能おすすめ
https://uetani33.net/vscode-web-extensions/#toc_id_3_2

VSCode使い必見!?使って便利な Visual Studio Code 拡張機能10選
https://www.geekfeed.co.jp/geekblog/vscode_extension

【超便利】VSCodeでMySQLを利用する方法
https://newmtube07.com/vscode-mysql/

[Visual Studio Code] PHPのコードを整形する「php cs fixer」の設定
https://www.searchlight8.com/visual-studio-code-php/

VSCode(Visual Studio Code)でSFTP・FTP経由でファイルを自動アップロードや同期できる拡張機能「SFTP」が超便利
https://www.karelie.net/vscode-sftp/

Windows10でVisual Studio Code + vue-cliの開発環境構築メモ
https://belhb.hateblo.jp/entry/2020/08/08/142540

【2021.8.8 追加】
LaravelでVisual Studio Codeを使う時に入れておきたい拡張機能3選
https://biz.addisteria.com/laravel-vscode/

Laravel blade formatter VSCode Extensionを作った
https://shufo.dev/2020/10/03/published-vscode-blade-formatter/

VSCodeでBladeテンプレートを整形する
https://blog.nplpl.com/310

ツイッターでシェア
みんなに共有、忘れないようにメモ

acmz

ゲーム好きのおっさんSE。 Unityでゲーム開発勉強中。最近はLalavel、Vue.js、SCSSも勉強中。

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント