コーディング初心者が役に立ったVScodeプラグイン

## はじめに
学習を初めてVScodeのプラグインも落ち着いて来たので、これを気に自分や初学者向けに纏めておこうと思います。

## 8/26 加筆、修正

VScode標準の機能とコンフリクトするものや必要のないものを外しました

---

##環境
M1 Macbook Air
VScode v1.59.0

***

## VScodeのインストール
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

Download nowから自分の使っているOSに対応している物をダウンロードしましょう。
M1チップ搭載のMacの方はApple Siliconと記載のあるものか、Universalと記載のあるものを使いましょう。

<font color='violet'>※Intel入ってるなMacの方はIntel Chip or Universal</font>

***

##最初に入れよう
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

日本人なのでまずは日本語化から。
インストール後は再起動すると反映されます。

***

## 全体的に使うプラグイン
### ~~Auto Close Tag~~
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

~~開始タグを入れると自動的に終了タグも入力してくれます。~~
Promise<>を打つ時に閉じタグが入ってしまって邪魔なのでアンインストールしました

***

### Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

開始タグを編集すると自動的に終了タグも編集してくれます。
便利！！

***

### Bracket Pair Colorizer2
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

< > { } [ ] などのカッコに色を付けてくれます。
JavaScriptなどを書いているとネストが深くなったときにどれがどのカッコに対応しているかひと目で分かるようになるのでイイね！

これがないと生きていけないくらいに便利！！

***

### Code Spell Checker
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

スペルミスをチェックしてくれます。
タイプミスにすぐ気付けるので入れておくといいと思います。

※自分でつけたオリジナルのクラス名などもスペルミスとみなされる場合もあるので注意

***

### GitLens
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Gitの変更履歴を行ごとに見ることができます。
チーム開発している時にこの行のコードは誰に聞けばいいのかなど迷わなくなるのでいいですね。

***

### Indent-Rainbow
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

インデントに色を付けてくれます。
テーマカラーや個人の好みによると思うのでお好みでどうぞ。

***

### Live Preview
https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

後述するLive Serverを使わなくてもVScode上でアプリケーションやHTMLの確認ができます。
リアルタイムで同期するのでDreamweaverの内蔵プレビューと近い（より便利）ので乗り換えした方にもおすすめです。

※現在プレビュー版ですが筆者の環境では問題なく動いています。

必須級に便利なので入れておきましょう。

***

### Live Server
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

上記のLive Previewと同じくHTMLやアプリケーションの確認をブラウザで行います。
ブラウザの指定もできます。
ファイル保存時にブラウザ側を自動でリロードします。

※フォルダで開かないと利用できないので注意

***

### Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

ファイルのパスを補完してくれます。
必須級なので必ず入れておきましょう。

***

### TODO Highlight
https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

コメントでTODOやFIXMEと書くと強調表示してくれます。
便利！！

***

### zenkaku
https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

全角スペースを強調表示してくれます。
全角スペースが問題でエラーと戦うのは時間の無駄なので必ず入れておきましょう。

※インストール後はコマンドパレット（Mac/cmd + shift + p, Windows/ctrl + shift + p）を開いて「Enable Zenkaku」と打って実行しないと効果がありませんので注意！！

***

### Visual Studio Intellicode
https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

JavaScriptなどでいい感じに補完候補を出してくれます。
便利！！

***

## HTML関係のプラグイン
### Highlight Matching Tag
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

対応しているタグに黄色のアンダーラインを引いてくれます。
正直VScodeデフォルトのタグのハイライトでも十分見れますがなんとなく入れています。

***

### HTML CSS Support
https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

CSSファイルからクラス名を読み取ってHTML側で補完してくれます。
便利！！

***

### HTML Snippets
https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

HTMLのタグ名の補完をしてくれます。
VScode自体にもsnippetsがあるので無くてもいいかも…。

***

### ~~HTMLHint~~
https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint

~~HTMLの記述が間違ったりしているとエラーを出してくれます。
便利！！~~
VScode標準の機能とコンフリクトするので削除

***

### htmltagwrap
https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

コードを書いていて後から親要素を追加したいときに使います。
範囲選択をして<font color='red'>Option + W</font>（windowsは<font color='red'>Alt + W</font>）で選択範囲を囲むようにタグを追加できます。
デフォルトではpタグが追加されますが設定から変更可能です。
筆者はdivタグにしています。

これがないと生きていけないくらいに便利！！

***

## CSS/Sassなどのスタイルシート関係のプラグイン
### Autoprefixer
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-autoprefixer

やっかいなベンダープレフィックスを自動で付けてくれます。
F1キーを押して「Autoprefixer: Run.」を実行しましょう。

***

### CSS Peek
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

HTMLで定義されているクラス名を参照しているCSSなどをファイル移動せずに見ることができます。
便利！！

***

### SCSS Everywhere
https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion

SCSSやCSSでHTML側のクラス名やID名を補完してくれます。
これがないと生きていけないくらいに便利！！

***

### SCSS IntelliSense
https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss

SCSSを書く際にいい感じで補完してくれます。

***

### DartJS Sass Compiler and Sass Watcher
https://marketplace.visualstudio.com/items?itemName=codelios.dartsass

dart sassを利用してSassやSCSSのコンパイルやwatchができます。

※よく紹介されているLive Sass Compilerはnode sassに対応しているものです。
2021年10月を目処にnode sassの書き方であるimportが使えなくなります。
dart sassではuseを使います。
node sassではuseを利用できません。
今後node sassではなくdart sassを使うことが公式から推奨されていますのでLive Sass Compilerは使わないようにしましょう。

***

## その他のプラグイン
### GitHub Theme
https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

GitHub公式のテーマカラーです。
見やすい！！

***

### JavaScript(ES6)code snippets
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

JavaScriptのES6の記法のスニペットを追加してくれます。
例えば`nfn`で

```javascript
const 関数名 = (パラメーター) => {
  中身
}
```

や
`anfn`で

```javascript
(パラメーター) => {
  中身
}
```

などを一発で出すことができます。
超便利！！！

***

### Vetur
https://marketplace.visualstudio.com/items?itemName=octref.vetur

vueを書く際にスニペットやフォーマットなどを行ってくれます。
vueを書くなら必ず入れましょう。

***

### Vue VSCode Snippets
https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets

Vueのスニペットが使えるようになります。
Veturとセットで入れておきましょう。

---

以上となります。
いかがでしたでしょうか。

修正点、加筆点等ございましたらコメントにてご教授願えますと幸いです。