[フロントエンド+a] 2021年版 VSCodeプラグイン(拡張機能)と設定

パソコンを変えた時用の備忘録です。それぞれに軽く説明も

##プラグイン(拡張機能)一覧
###1. <font color="cornflowerblue">Auto Close Tag</font>
![Auto Close Tag](https://github.com/formulahendry/vscode-auto-close-tag/raw/master/images/usage.gif)

>[Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
Visual StudioIDEまたはSublimeTextと同じように、HTML / XML終了タグを自動的に追加します
コピーしてHTMLタグを使用する際に煩わしい時もありますが、あった方が捗ります。

---

###2. <font color="cornflowerblue">Autoprefixer</font>
![Autoprefixer](https://cloud.githubusercontent.com/assets/7034281/16823311/da82a3c6-496b-11e6-8d95-0bebbf0b9607.gif)

>[Autoprefixer](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
VS Code用のこのプラグインは、autoprefixerへのインターフェースを提供します。
基本、SASSを使用するので、入れているが使ってないプラグイン。CSSをそのまま書く時に使用。

```json:seting.jsonに追加
"autoprefixer.options": {
"browsers": ["last 4 versions", "ie >= 9", "> 5%"],
"grid": "autoplace"
}
```
####・ 使用方法
コマンドパレットを開く `⌘ + Shift + c`

```vscode:CSSファイルから使用
Autoprefixer: RUN
```

※node.jsが入っていることが前提

```terminal:node.jsの確認
node -v
```
node.jsダウンロードは[ここから](https://nodejs.org/ja/download/)

---

###3. <font color="cornflowerblue">Beautify</font>

>[Beautify](https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify)
javascript、JSON、CSS、Sass、およびHTMLを美しく
デフォルトではインデントが多いのでこちらを使用

```json:seting.jsonに追加
"beautify.config": {
    "indent_size": 2
}
```

---

###4. <font color="cornflowerblue">Bracket Pair Colorizer</font>
![Bracket Pair Colorizer](https://github.com/CoenraadS/BracketPair/raw/master/images/example.png)

>[Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
一致するブラケットを色付けするためのカスタマイズ可能な拡張機能
この拡張機能により、一致するブラケットを色で識別できます。ユーザーは、一致する文字と使用する色を定義できます。

---

###5. <font color="cornflowerblue">Debugger for Chrome</font>

>[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome)
ChromeブラウザまたはChromeデバッガプロトコルをサポートするその他のターゲットでJavaScriptコードをデバッグします。

---

###6. <font color="cornflowerblue">Duplicate action</font>

>[Duplicate action](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate)
VSCodeでファイルを複製する機能

---

###7. <font color="cornflowerblue">HTML CSS Support</font>

>[HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
Visual StudioCodeのHTMLidとclass属性の補完。

---

###8. <font color="cornflowerblue">Japanese Language Pack for Visual Studio Code</font>

>[Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
日本語用言語パック拡張

---

###9. <font color="cornflowerblue">JS & CSS Minifier (Minify)</font>

>[JS & CSS Minifier (Minify)](https://marketplace.visualstudio.com/items?itemName=olback.es6-css-minify)
ES5 / ES6 / ES7 / ES8とCSSを簡単に縮小します。保存時の縮小、選択の縮小、カスタム構成をサポートします

---

###10. <font color="cornflowerblue">Live Server</font>
![Live Server](https://github.com/ritwickdey/vscode-live-server/raw/master/./images/Screenshot/vscode-live-server-animated-demo.gif)

>[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
静的および動的ページのライブリロード機能を備えた開発ローカルサーバーを起動します

---

###11. <font color="cornflowerblue">Path Autocomplete</font>
![Path Autocomplete](https://raw.githubusercontent.com/ionutvmi/path-autocomplete/master/demo/path-autocomplete.gif)

>[Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)
静的および動的ページのライブリロード機能を備えた開発ローカルサーバーを起動します

---

###12. <font color="cornflowerblue">SVG</font>
![SVG](https://github.com/lishu/vscode-svg2/raw/master/images/f1s.gif)

>[SVG](https://marketplace.visualstudio.com/items?itemName=jock.svg)
強力なSVG言語サポート拡張機能。SVGを処理するために必要なほとんどすべての機能。

---

###13. <font color="cornflowerblue">Svg Preview</font>
![Svg Preview](https://github.com/SimonSiefke/vscode-svg-preview/raw/master/./demo_images/demo.gif)

>[Svg Preview](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview)
Svgファイルのプレビュー

---

###14. <font color="cornflowerblue">TODO Highlight</font>
![TODO Highlight](https://github.com/wayou/vscode-todo-highlight/raw/master/assets/material-night.png)

>[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
TODO、FIXME、およびキーワード、注釈を強調表示します。

---

###15. <font color="cornflowerblue">Trailing Spaces</font>

>[Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
末尾のスペースを強調表示して、すぐに削除します。

---

###16. <font color="cornflowerblue">vscode-icons-mac</font>
![vscode-icons-mac](https://raw.githubusercontent.com/wayou/vscode-icons/master/images/preview.png)

>[vscode-icons-mac](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
Visual Studio Codeのアイコン（従来のMacフォルダーアイコン付き）

---
以上が、フロントエンド向けのプラグインです。


---
##開発向けのプラグイン

###. <font color="cornflowerblue">Bookmarks</font>
![Bookmarks](https://github.com/alefragnani/vscode-bookmarks/raw/master/images/printscreen-toggle.png)

>[Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)
行をマークしてコードへジャンプします。開発向け。

---

###. <font color="cornflowerblue">Docker</font>
![Docker](https://github.com/microsoft/vscode-docker/raw/master/resources/readme/overview.gif)

>[Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)
コンテナ化されたアプリケーションの作成、管理、およびデバッグを容易にします。
ローカル開発環境を構築してから設定。

---

###. <font color="cornflowerblue">Git History</font>

>[Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
gitログ、ファイル履歴の表示、ブランチまたはコミットの比較

---

###. <font color="cornflowerblue">GitHub</font>
![GitHub](https://github.com/KnisterPeter/vscode-github/raw/master/images/create-pull-request.png)

>[GitHub](https://marketplace.visualstudio.com/items?itemName=KnisterPeter.vscode-github)
githubとそのワークフローをvscodeに統合します
####・ 使用方法
コマンドパレットからコマンドライン
コマンドパレットを開く `⌘ + Shift + c`

__Githubアカウントからパーソナルアクセストークンの設定が必要__

---


###. <font color="cornflowerblue">Vetur</font>

>[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
VSCode用のVueツール

---

###. <font color="cornflowerblue">Gatsby Extension Pack</font>

>[Gatsby Extension Pack](https://marketplace.visualstudio.com/items?itemName=nickytonline.gatsby-extension-pack)
GatsbyJSの便利な拡張機能

---

###. <font color="cornflowerblue">Gatsby Snippetsk</font>

>[Gatsby Snippetsk](https://marketplace.visualstudio.com/items?itemName=nickytonline.vscode-gatsby-snippets)
GatsbyJSのスニペット

---

###. <font color="cornflowerblue">GraphQL</font>
![GraphQL](https://camo.githubusercontent.com/97dc1080d5e6883c4eec3eaa6b7d0f29802e6b4b/687474703a2f2f672e7265636f726469742e636f2f497379504655484e5a342e676966)

>[GraphQL](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql)
VSCodeのGraphQL拡張機能は、構文の強調表示、検証、およびgraphqlプロジェクトの定義への移動、ホバー情報、オートコンプリートなどの言語機能を追加します。この拡張機能は、gqlタグで注釈が付けられたクエリでも機能します。

---

###. <font color="cornflowerblue">Laravel Blade Snippets</font>

>[Laravel Blade Snippets](https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade)
Laravelブレードスニペットと構文ハイライトのサポート

---

###. <font color="cornflowerblue">Laravel Snippets</font>

>[Laravel Snippets](https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel5-snippets)
Visual Studio CodeのLaravelスニペット（Laravel 5以降をサポート）

---

###. <font color="cornflowerblue">Live Sass Compiler</font>

>[Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)
ライブブラウザのリロードを使用して、SassまたはScssをCSSにリアルタイムでコンパイルします。

---

###. <font color="cornflowerblue">Log File Highlighter</font>
![Log File Highlighter](https://raw.githubusercontent.com/emilast/vscode-logfile-highlighter/master/content/sample.png)

>[Log File Highlighter](https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter)
ログファイルに色の強調表示を追加して、ログイベントのフローを追跡し、問題を特定しやすくします。

---

###. <font color="cornflowerblue">Output Colorizer</font>
![Output Colorizer](https://raw.githubusercontent.com/IBM-Bluemix/vscode-log-output-colorizer/master/github-assets/screenshot-4.jpg)

>[Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)
ログファイルに色の強調表示を追加して、ログイベントのフローを追跡し、問題を特定しやすくします。

---

###. <font color="cornflowerblue">Partial Diff</font>

>[Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)
ファイル内、ファイル間、またはクリップボードと（差分）テキスト選択を比較します

---

###. <font color="cornflowerblue">PHP Debug</font>

>[PHP Debug](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-debug)
XDebugを使用したPHPのデバッグサポート

---

###. <font color="cornflowerblue">Kubernetes</font>

>[Kubernetes](https://marketplace.visualstudio.com/items?itemName=ms-kubernetes-tools.vscode-kubernetes-tools)
Kubernetesアプリケーションを開発、デプロイ、デバッグする
「Python」プラグインに依存

---

###. <font color="cornflowerblue">Python</font>

>[Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
リンティング、デバッグ（マルチスレッド、リモート）、Intellisense、Jupyter Notebook、コードフォーマット、リファクタリング、単体テストなど。

---

###. <font color="cornflowerblue">Rainbow CSV</font>

>[Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)
CSVおよびTSVファイルを強調表示し、SQLのようなクエリを実行します

---

###. <font color="cornflowerblue">Regex Previewer</font>

>[Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)
Regexは、Visual Studio CodeのJavaScript、TypeScript、PHP、およびHaxeのプレビューアと一致します。

---

###. <font color="cornflowerblue">Remote - Containers</font>

>[Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
「Docker」コンテナー内の任意のフォルダーまたはリポジトリーを開き、Visual StudioCodeの全機能セットを利用します。

---

###. <font color="cornflowerblue">REST Client</font>

>[REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
VisualStudioCode用のRESTクライアント
GraphQLクエリを送信し、エディターでGraphQL変数を作成します。

---

また良いプラグインを見つけたら追記していきます。