パソコンを変えた時用の備忘録です。それぞれに軽く説明も
プラグイン(拡張機能)一覧
1. Auto Close Tag
Auto Close Tag
Visual StudioIDEまたはSublimeTextと同じように、HTML / XML終了タグを自動的に追加します
コピーしてHTMLタグを使用する際に煩わしい時もありますが、あった方が捗ります。
2. Autoprefixer
Autoprefixer
VS Code用のこのプラグインは、autoprefixerへのインターフェースを提供します。
基本、SASSを使用するので、入れているが使ってないプラグイン。CSSをそのまま書く時に使用。
"autoprefixer.options": {
"browsers": ["last 4 versions", "ie >= 9", "> 5%"],
"grid": "autoplace"
}
・ 使用方法
コマンドパレットを開く ⌘ + Shift + c
Autoprefixer: RUN
※node.jsが入っていることが前提
node -v
node.jsダウンロードはここから
3. Beautify
Beautify
javascript、JSON、CSS、Sass、およびHTMLを美しく
デフォルトではインデントが多いのでこちらを使用
"beautify.config": {
"indent_size": 2
}
4. Bracket Pair Colorizer
Bracket Pair Colorizer
一致するブラケットを色付けするためのカスタマイズ可能な拡張機能
この拡張機能により、一致するブラケットを色で識別できます。ユーザーは、一致する文字と使用する色を定義できます。
5. Debugger for Chrome
Debugger for Chrome
ChromeブラウザまたはChromeデバッガプロトコルをサポートするその他のターゲットでJavaScriptコードをデバッグします。
6. Duplicate action
Duplicate action
VSCodeでファイルを複製する機能
7. HTML CSS Support
HTML CSS Support
Visual StudioCodeのHTMLidとclass属性の補完。
8. Japanese Language Pack for Visual Studio Code
Japanese Language Pack for Visual Studio Code
日本語用言語パック拡張
9. JS & CSS Minifier (Minify)
JS & CSS Minifier (Minify)
ES5 / ES6 / ES7 / ES8とCSSを簡単に縮小します。保存時の縮小、選択の縮小、カスタム構成をサポートします
10. Live Server
Live Server
静的および動的ページのライブリロード機能を備えた開発ローカルサーバーを起動します
11. Path Autocomplete
Path Autocomplete
静的および動的ページのライブリロード機能を備えた開発ローカルサーバーを起動します
12. SVG
SVG
強力なSVG言語サポート拡張機能。SVGを処理するために必要なほとんどすべての機能。
13. Svg Preview
Svg Preview
Svgファイルのプレビュー
14. TODO Highlight
TODO Highlight
TODO、FIXME、およびキーワード、注釈を強調表示します。
15. Trailing Spaces
Trailing Spaces
末尾のスペースを強調表示して、すぐに削除します。
16. vscode-icons-mac
vscode-icons-mac
Visual Studio Codeのアイコン（従来のMacフォルダーアイコン付き）
以上が、フロントエンド向けのプラグインです。
開発向けのプラグイン
. Bookmarks
Bookmarks
行をマークしてコードへジャンプします。開発向け。
. Docker
Docker
コンテナ化されたアプリケーションの作成、管理、およびデバッグを容易にします。
ローカル開発環境を構築してから設定。
. Git History
Git History
gitログ、ファイル履歴の表示、ブランチまたはコミットの比較
. GitHub
GitHub
githubとそのワークフローをvscodeに統合します
・ 使用方法
コマンドパレットからコマンドライン
コマンドパレットを開く ⌘ + Shift + c
Githubアカウントからパーソナルアクセストークンの設定が必要
. Vetur
Vetur
VSCode用のVueツール
. Gatsby Extension Pack
Gatsby Extension Pack
GatsbyJSの便利な拡張機能
. Gatsby Snippetsk
Gatsby Snippetsk
GatsbyJSのスニペット
. GraphQL
GraphQL
VSCodeのGraphQL拡張機能は、構文の強調表示、検証、およびgraphqlプロジェクトの定義への移動、ホバー情報、オートコンプリートなどの言語機能を追加します。この拡張機能は、gqlタグで注釈が付けられたクエリでも機能します。
. Laravel Blade Snippets
Laravel Blade Snippets
Laravelブレードスニペットと構文ハイライトのサポート
. Laravel Snippets
Laravel Snippets
Visual Studio CodeのLaravelスニペット（Laravel 5以降をサポート）
. Live Sass Compiler
Live Sass Compiler
ライブブラウザのリロードを使用して、SassまたはScssをCSSにリアルタイムでコンパイルします。
. Log File Highlighter
Log File Highlighter
ログファイルに色の強調表示を追加して、ログイベントのフローを追跡し、問題を特定しやすくします。
. Output Colorizer
Output Colorizer
ログファイルに色の強調表示を追加して、ログイベントのフローを追跡し、問題を特定しやすくします。
. Partial Diff
Partial Diff
ファイル内、ファイル間、またはクリップボードと（差分）テキスト選択を比較します
. PHP Debug
PHP Debug
XDebugを使用したPHPのデバッグサポート
. Kubernetes
Kubernetes
Kubernetesアプリケーションを開発、デプロイ、デバッグする
「Python」プラグインに依存
. Python
Python
リンティング、デバッグ（マルチスレッド、リモート）、Intellisense、Jupyter Notebook、コードフォーマット、リファクタリング、単体テストなど。
. Rainbow CSV
Rainbow CSV
CSVおよびTSVファイルを強調表示し、SQLのようなクエリを実行します
. Regex Previewer
Regex Previewer
Regexは、Visual Studio CodeのJavaScript、TypeScript、PHP、およびHaxeのプレビューアと一致します。
. Remote - Containers
Remote - Containers
「Docker」コンテナー内の任意のフォルダーまたはリポジトリーを開き、Visual StudioCodeの全機能セットを利用します。
. REST Client
REST Client
VisualStudioCode用のRESTクライアント
GraphQLクエリを送信し、エディターでGraphQL変数を作成します。
また良いプラグインを見つけたら追記していきます。