フロントエンドコーディング時に便利な Visual Studio Code 拡張機能（随時更新）


## 更新履歴

* 2024/05/27
  * 「[Excel to Markdown table](#excel-to-markdown-table)」を掲載しました
  * 「[Text Tables](#text-tables)」を掲載しました
  * 「[Markdown Navigation](#markdown-navigation)」を掲載しました
* 2024/02/20：使用していないものを削除し、新たな拡張機能を追加しました

## コードを見やすくする

### Apache Conf

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-apache

:::note info
Apache の以下設定ファイルをシンタックスハイライトしてくれます。
* `.conf`
* `.htaccess`
* `.htgroups`
* `.htpasswd`
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/0c7171cf-0721-5fb3-9be0-8629284ab0d0.png" width="1000" height="610" decoding="async" loading="lazy">

### DotENV

https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv

:::note info
`.env` ファイルをシンタックスハイライトしてくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/25e89e06-fc6d-25e8-fcbf-d56f3da92a63.png" width="1000" height="315" decoding="async" loading="lazy">

### Color Highlight

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

:::note info
`#fff` や `rgba(0, 0, 0, .7)` などのカラーコードの箇所にその色をつけてくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/ed01054b-7458-5fd5-1120-8143c5551e79.png" width="1000" height="192" decoding="async" loading="lazy">

### indent-rainbow

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

:::note info
インデントの階層ごとに色につけてくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/f58aa88c-8fa4-c5aa-2771-01d9fe40ce84.png" width="1000" height="410" decoding="async" loading="lazy">

虹色に設定して利用しています。

```json:setting.json
{
  "indentRainbow.colors": [
    "rgba(255,0,0,0.2)",
    "rgba(255,165,0,0.2)",
    "rgba(255,255,0,0.2)",
    "rgba(0,128,0,0.2)",
    "rgba(0,255,255,0.2)",
    "rgba(0,0,255,0.2)",
    "rgba(128,0,128,0.2)"
  ]
}
```

### Rainbow CSV

https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

:::note info
CSVファイルのデータを列ごとに色分けしてくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/ef7b40e3-ef39-c762-8365-b0c2619f0419.png" width="1000" height="1000" decoding="async" loading="lazy">

## コードの記述を楽にする

### HTML

#### Auto Close Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

:::note info
HTMLの閉じタグを自動で挿入してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/db62525e-d8ee-428e-c7c6-e291a913839f.gif" width="1000" height="300" decoding="async" loading="lazy">

#### Auto Rename Tag

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

:::note info
HTMLのタグを変更すると、ペアとなるタグを自動で変更してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/25e0f6b7-1132-aaa9-a9e1-58f6f8ce02bc.gif" width="1000" height="300" decoding="async" loading="lazy">

#### Highlight Matching Tag

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

:::note info
HTMLのペアとなるタグに下線が引かれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/64524b13-289d-3a37-3b2c-77ea3f5022d4.gif" width="1000" height="300" decoding="async" loading="lazy">

#### Insert br Tag

https://marketplace.visualstudio.com/items?itemName=1natsu.insert-br-tag

:::note info
キーボードショートカット で `<br>` タグを挿入できるようになります。
:::

|ショートカット|動作|
|:-|:-|
|`Shift` + `Enter`|`<br>` タグを挿入|

#### HTML End Tag Labels

https://marketplace.visualstudio.com/items?itemName=anteprimorac.html-end-tag-labels

:::note info
HTMLの閉じタグの後ろに、`id` や `class` の名前を表示してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/e9ba5424-9d3e-a6be-a750-33f5d4556272.png" width="1000" height="255" decoding="async" loading="lazy">

### pug

https://marketplace.visualstudio.com/items?itemName=amandeepmittal.pug

:::note info
pug のスニペットを利用できます。
:::

### Sass

#### SCSS IntelliSense

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

:::note info
ワークスペース内のすべての `.scss` に対して、変数、ミックスイン、関数を補完してくれます。
:::

#### Sass (.sass only)

https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented

:::note info
Sass の SASS記法（`.sass`）のシンタックスハイライト、プロパティの補完をしてくれます。
:::

### JavaScript

#### Bracket Lens

https://marketplace.visualstudio.com/items?itemName=wraith13.bracket-lens

:::note info
閉じ括弧の後ろにそのスコープがなんのスコープなのかを表示してくれます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/9cef9b26-410e-07c5-d49b-7a779908a3bd.png" width="1000" height="420" decoding="async" loading="lazy">

#### JavaScript (ES6) code snippets

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

:::note info
JavaScript (ES6) のスニペットを利用できます。
:::

#### IntelliCode

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

:::note info
AI によって利用する可能性の高いAPIを予測し、入力を補完してくれます。
:::

「★」マークが付いている入力候補がAIによって予測されたものとなります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/3c83d6ee-9b54-d550-9163-039bd8d5099d.png" width="1000" height="370" decoding="async" loading="lazy">

#### Multiple cursor case preserve

https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve

:::note info
同じ名前の変数や関数を一括変更する時に、命名規則のパターン（大文字／小文字）を区別して入力できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/fccb60a2-2374-a730-319e-89039a63b881.gif" width="1000" height="300" decoding="async" loading="lazy">

#### Regex Previewer

https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

:::note info
正規表現のテストをリアルタイムで行えます。
:::

拡張機能をインストールすると、コード中の正規表現の箇所に「Test Regex…」というリンクが表示されます。
リンクを押すと正規表現の確認画面が開きます。

:::note warn
複数のパターンに対してテストを行う場合は、正規表現のオプションで「グローバルサーチフラグ（g）」と「マルチラインフラグ（m）」を指定する必要があります。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/9f3396b6-bdbb-d999-073d-8e3de6ebfa13.gif" width="2000" height="700" decoding="async" loading="lazy">

### TypeScript

#### JSON To TS

https://marketplace.visualstudio.com/items?itemName=MariusAlchimavicius.json-to-ts

:::note info
JSON から TypeScript の型を生成してくれます。
:::

|コマンド|動作|
|:-|:-|
|`JSON to TS:Convert from clipboard`|クリップボードにコピーしたJSONを変換|
|`JSON to TS:Convert from selection`|選択したJSONを変換|

|ショートカット|動作|
|:-|:-|
|`Shift` + `Ctrl` + `Alt` + `V`|クリップボードにコピーしたJSONを変換|
|`Shift` + `Ctrl` + `Alt` + `S`|選択したJSONを変換|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/fa1cf406-7d6c-0c72-51eb-fd9cb2d1ab5d.gif" width="2000" height="1000" decoding="async" loading="lazy">

### Vue

#### Vetur

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

:::note info
Vue.js バージョン2までの開発をサポートをしてくれる拡張機能。
:::

#### Vue Language Features (Volar)

https://marketplace.visualstudio.com/items?itemName=Vue.volar

:::note info
Vue.js バージョン3の開発をサポートをしてくれる拡張機能。
:::

:::note warn
Vetur をインストールしている場合は Volar との競合を避けるため `無効にする（ワークスペース）` にしておきます。
:::

#### Vue 3 Snippets

https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets

:::note info
Vue.js 3 と Vue.js 2 のスニペットを利用できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/d5a2844d-a8e0-ca76-89b9-97e3a62be5fb.gif" width="1000" height="600" decoding="async" loading="lazy">

### WordPress Snippets

https://marketplace.visualstudio.com/items?itemName=wordpresstoolbox.wordpress-toolbox

:::note info
WordPress のスニペットを利用できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/856c8403-7cc3-873b-51fb-34d9910a7d40.png" width="1000" height="400" decoding="async" loading="lazy">

### MTML

https://marketplace.visualstudio.com/items?itemName=fhiromasa.mtml-language-provider

:::note info
Movable Type の `.mtml` ファイルのシンタックスハイライトや、スニペットを利用できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/dc90d767-38bf-39e5-fe89-40ae4cf69ab0.png" width="1000" height="450" decoding="async" loading="lazy">

### Markdown

#### Markdown All in One

https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

:::note info
MarkDown に関する便利機能全部盛りです！
:::

##### ショートカット

|ショートカット|動作|
|:-|:-|
|`Ctrl` + `B`|太字 (**)|
|`Ctrl` + `I`|イタリック(*)|
|`Alt` + `S`|取り消し(~~)|
|`Ctrl` + `Shift` + `]`|見出しレベルを上げる|
|`Ctrl` + `Shift` + `[`|見出しレベルを下げる|
|`Ctrl` + `M`|数式挿入($)|
|`Alt` + `C`|チェックリストのオンオフ|
|`Ctrl` + `Shift` + `V`|プレビュー表示のオンオフ|
|`Ctrl` + `K` → `V`|エディターの横にプレビュー表示|
|`Alt` + `Shift` + `F`|表組みの整形|

:::note warn
私の環境では表組みの整形（`Alt` + `Shift` + `F`）が動作しませんでした…
:::

##### 目次の自動作成

|コマンド|動作|
|:-|:-|
|`Markdown All in One: Create Table of Contents`|目次の自動作成|
|`Markdown All in One: Update Table of Contents`|目次の更新|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/67093e73-3110-19a4-5d2c-4a582c3bc445.gif" width="1000" height="700" decoding="async" loading="lazy">

##### 見出しのナンバリング

|コマンド|動作|
|:-|:-|
|`MarkDown All in One: Add/Update section numbers`|番号追加|
|`MarkDown All in One: Remove section numbers`|番号削除|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/1efecf06-c99f-78bf-f338-0ffe7406e8ea.gif" width="1000" height="700" decoding="async" loading="lazy">

##### HTML出力

MarkDownファイルからをHTMLファイルを作成してくれます。

|コマンド|動作|
|:-|:-|
|`Markdown All in One: Print current document to HTML`|HTMLファイルを作成|

##### リンクの作成

アドレスをコピーした状態で、テキストを選択して `Ctrl`+ `V` すると、リンクが作成されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/1817f0f7-d1db-6fd0-12c9-1d2a6f5cc8a5.gif" width="1000" height="350" decoding="async" loading="lazy">

#### Excel to Markdown table

https://marketplace.visualstudio.com/items?itemName=csholmq.excel-to-markdown-table

:::note info
エクセルの表をコピー＆ペーストでマークダウンに変換してくれます。
:::

|ショートカット|動作|
|:-|:-|
|`Shift` + `Alt` + `V`|エクセルの表をマークダウンに変換して貼り付け|

#### Text Tables

https://marketplace.visualstudio.com/items?itemName=RomanPeshkov.vscode-text-tables

:::note info
表の作成、編集がとても楽になります。
:::

|コマンド|動作|
|:-|:-|
|`Text Tables: Create table`|表の作成|
|`Text Tables: Enter table mode`|表の編集モードをONにする|
|`Text Tables: Exit table mode`|表の編集モードをOFFにする|

編集モードをONにすると以下の機能が利用できます。

* `Tab` でセル移動
* 行の自動挿入
* 表組みの自動フォーマット

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/0649b7b0-9992-3bfd-0796-5d094b3e23c7.gif" width="1000" height="700" decoding="async" loading="lazy">

#### Table Formatter

https://marketplace.visualstudio.com/items?itemName=shuworks.vscode-table-formatter

:::note info
MarkDown の表組みを整形してくれます。
:::

:::note warn
Markdown All in One に同等の機能がありますが、動作しなかったためインストールしています。
:::

|コマンド|動作|
|:-|:-|
|`Table: Format Current`|カーソルが当たっている表組みを整形|
|`Table: Format All`|すべての表組みを整形|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/351e8831-c8e0-3849-af03-2e9819fc2a97.gif" width="1000" height="500" decoding="async" loading="lazy">

#### Markdown Navigation

https://marketplace.visualstudio.com/items?itemName=AlanWalk.markdown-navigation

:::note info
マークダウン専用のアウトラインを表示してくれます。
:::

:::note warn
デフォルトの「アウトライン」でも確認できますが、見出しの「#」が表示されて見づらいです。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/fed95c7a-65c8-1634-64b4-76338c79a857.png" width="1000" height="800" decoding="async" loading="lazy">

### Edit csv

https://marketplace.visualstudio.com/items?itemName=janisdd.vscode-edit-csv

:::note info
CSVファイルをExcelのように編集できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/14ae3691-c227-3eb2-26bc-6e1bb881cbd9.gif" width="2000" height="1000" decoding="async" loading="lazy">

### Path Intellisense

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

:::note info
パスの入力を補完してくれます。
:::

### npm Dependency Links

https://marketplace.visualstudio.com/items?itemName=herrmannplatz.npm-dependency-links

:::note info
`package.json` 内のnpmパッケージの名前がクリックできるようになり、npmの公式ウェブサイトを表示することができます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/d8ac3dd1-a761-748e-4063-51a698dd289b.gif" width="1000" height="700" decoding="async" loading="lazy">

### Figma for VS Code

https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension

:::note info
Visual Studio Code 内で Figma を起動し、デザインを確認しながらコーディングできます。
:::

## コードを検証する

### Error Lens

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

:::note info
エラー内容をインライン表示してくれるようになります。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/27e461b6-5c2c-2838-0c67-6358c3f4845f.png" width="1000" height="240" decoding="async" loading="lazy">

### ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

:::note info
JavaScript の静的検証ツールです。
:::

ファイルの保存時に自動で `eslint --fix` を実行するように設定します。

```json:setting.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}
```

### HTMLHint

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

:::note info
HTML の静的検証ツールです。
:::

### puglint

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-puglint

:::note info
pug の静的検証ツールです。
:::

### stylelint

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

:::note info
CSS、SCSS、Lessの静的検証ツールです。
:::

Visual Studio Code はデフォルトでCSS、SCSSのエラーをチェックしてくれるので、stylelintと重複してエラーが表示される場合があります。
そのためデフォルトのチェックを無効にしておきます。

```json:setting.json
{
  "css.validate": false,
  "scss.validate": false
}
```

ファイルの保存時に自動で `stylelint --fix` を実行するように設定します。

```json:setting.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  }
}
```

### phpcs

https://marketplace.visualstudio.com/items?itemName=shevaua.phpcs

:::note info
PHPの記述がコーディング規約に沿っているか検証してくれます。
:::

:::note warn
利用するためには以下が必要です。

* CodeSniffer のインストール
* コーディング規約のインストール
* コーディング規約のパスの指定
:::

### phpcbf

https://marketplace.visualstudio.com/items?itemName=persoderlind.vscode-phpcbf

:::note info
PHPの記述をコーディング規約に沿って整形してくれます。
:::

:::note warn
利用するためには以下が必要です。

* CodeSniffer のインストール
* コーディング規約のインストール
* コーディング規約のパスの指定
:::


### markdownlint

https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

:::note info
Markdownの静的検証ツールです。
:::

### axe Accessibility Linter

https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter

:::note info
以下コード内のアクセシビリティ検証ツールです。

* React (JSX)
* React Native
* Angular
* Vue
* HTML
* Markdown
:::

### Partial Diff

https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff

:::note info
選択した文字列や表示しているエディターの文字列を比較できます。
:::

インストールすると右クリックメニューに以下の項目が追加されます。

* 比較のためにテキストを選択する
* 1つ前に選択したテキストと比較する
* クリップボードにあるテキストと比較する
* 表示されてるエディターにあるテキストと比較する

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/c5102030-9306-4eac-83b1-523ce8f5357c.gif" width="2000" height="830" decoding="async" loading="lazy">

### Code Runner

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

:::note info
Visual Studio Code 上でプログラムを実行できます。
:::

実行方法は以下の3種類あります。

* 右上の`▶ボタン`をクリック
* `Ctrl` + `Alt` + `N`
* `右クリック` → `Run Code`

デフォルトでは、実行結果は `出力` に表示されます（`ターミナル`に変更可能）。
何も選択していなければ全体を実行し、選択していれば選択箇所のみ実行されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/3e79bb98-f546-61a4-df33-12e1f7f5246a.gif" width="1000" height="730" decoding="async" loading="lazy">

### Microsoft Edge Tools for VS Code

https://marketplace.visualstudio.com/items?itemName=ms-edgedevtools.vscode-edge-devtools

:::note info
Visual Studio Code 内で Edge を起動し、表示確認と、DevTools が利用できます。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/67e0470a-d5dd-b1dd-17f0-59fc55078b3e.gif" width="1000" height="1000" decoding="async" loading="lazy">

### テキスト校正くん

https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading

:::note info
日本語の文章をチェックしてくれます。
* 「ですます」調と「である」調の混在
* ら抜き言葉
* 二重否定
* 同じ助詞の連続使用（※初期設定では無効）
* 同じ接続詞の連続使用
* 逆接の接続助詞「が」の連続使用
* 全角と半角アルファベットの混在
* 弱い日本語表現の利用（〜かもしれない）
* 読点の数（1文に4つまで）
* ウェブの用語や名称の表記統一（Javascript→JavaScript、Github→GitHub等）
* 漢字の閉じ方、開き方（下さい→ください、出来る→できる等）
:::

対応しているテキストファイルは以下の形式です。

* テキストファイル `.txt`
* Markdownファイル `.md`
* HTMLファイル `.html`
* Latexファイル `.tex`
* Re:VIEWファイル `.re`

## コードを整形する

### EditorConfig for VS Code

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

:::note info
文字コード、改行コード、インデントのサイズと種類を統一させます。
:::

### Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

:::note info
さまざまな言語を自動で整形してくれます。
:::

### XML Tools

https://marketplace.visualstudio.com/items?itemName=DotJoshJohnson.xml

:::note info
XMLの整形や圧縮ができます。
:::

|ショートカット|動作|
|:-|:-|
|`Ctrl` + `Shift` + `Alt` + `B`|XMLを整形|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/fb8e7da9-966b-05fc-062e-098cc666faed.gif" width="1000" height="800" decoding="async" loading="lazy">

## コードを変換する

### Encode Decode

https://marketplace.visualstudio.com/items?itemName=mitchdenny.ecdc

:::note info
さまざまな種類のエンコード・デコードが出来ます。
:::

|ショートカット|動作|
|:-|:-|
|`Ctrl` + `Alt` + `C`|選択した文字列をエンコード・デコード|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/ba748e04-364a-5089-0d87-bd986d1d7ab4.gif" width="1000" height="600" decoding="async" loading="lazy">

### Zenkaku-Hankaku

https://marketplace.visualstudio.com/items?itemName=masakit.zenkaku-hankaku

:::note info
日本語の全角文字と半角文字を変換してくれます。
また、ひらがなとカタカナの変換にも対応しています。
:::

#### 半角 → 全角

|コマンド|動作|
|:-|:-|
|`zenkaku-hankaku.hanzenAlphaNumSymbol`|半角のアルファベットと数字、記号を全角に置き換えます|
|`zenkaku-hankaku.hanzenAlphaNum`|半角のアルファベットと数字を全角に置き換えます|
|`zenkaku-hankaku.hanzenAlphabet`|半角のアルファベットを全角に置き換えます|
|`zenkaku-hankaku.hanzenNumber`|半角の数字を全角に置き換えます|
|`zenkaku-hankaku.hanzenSymbol`|半角の記号を全角に置き換えます|
|`zenkaku-hankaku.hanzenKatakana`|半角のカタカナを全角に置き換えます|

#### 全角 → 半角

|コマンド|動作|
|:-|:-|
|`zenkaku-hankaku.zenhanAlphaNumSymbol`|全角のアルファベットと数字、記号を半角に置き換えます|
|`zenkaku-hankaku.zenhanAlphaNum`|全角のアルファベットと数字を半角に置き換えます|
|`zenkaku-hankaku.zenhanAlphabet`|全角のアルファベットを半角に置き換えます|
|`zenkaku-hankaku.zenhanNumber`|全角の数字を半角に置き換えます|
|`zenkaku-hankaku.zenhanSymbol`|全角の記号を半角に置き換えます|
|`zenkaku-hankaku.zenhanKatakana`|全角のカタカナを半角に置き換えます|

#### ひらがな ↔ カタカナ

|コマンド|動作|
|:-|:-|
|`zenkaku-hankaku.HiraganaKatakana`|ひらがなをカタカナに置き換えます|
|`zenkaku-hankaku.KatakanaHiragana`|カタカナをひらがなに置き換えます|

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/b1c853ec-a50c-5ce9-a0ee-e323d924b440.gif" width="1000" height="400" decoding="async" loading="lazy">

## Git を利用しやすくする

### GitLens

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

:::note info
Git の変更履歴やリポジトリの状態を視覚的に理解しやすくしてくれます。
:::

### Git Graph

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

:::note info
Git のコミットグラフが見やすくなります。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/1c9d6b2e-f8ad-8cfa-b55a-e49a24c40416.gif" width="1208" height="682" decoding="async" loading="lazy">

### Git History

https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory

:::note info
ファイル単位の Git のログが見やすくなります。
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/041b546f-7256-72cd-ac0f-01696aedb146.gif" width="1509" height="923" decoding="async" loading="lazy">

## SVN を利用しやすくする

### SVN

https://marketplace.visualstudio.com/items?itemName=johnstoncode.svn-scm

:::note info
Visual Studio Code で SVN のコミットや変更履歴を確認できます。
:::

## エディターを操作しやすくする

### Duplicate action

https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate

:::note info
エクスプローラー上のファイルやフォルダを簡単にコピーできます。
:::

1. エクスプローラーでコピーしたいファイルやフォルダの上で右クリック
2. `Duplicate file or directory` をクリック

![vscode-duplicate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/0740e6bc-6e2e-ecc0-0381-38854b98eddb.png)

### Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

:::note info
Visual Studio Code を日本語化してくれます。
:::

### open in browser

https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

:::note info
HTMLファイルを簡単にブラウザで表示できるようになります。
:::

1. ブラウザで表示したいHTMLファイル上で右クリック
2. `open in default browser` または `open in Other browser` をクリック

|ショートカット|動作|
|:-|:-|
|`Alt` + `B`|デフォルトブラウザで表示|
|`Shift` + `Alt` + `B`|ブラウザを選択して表示|

![open-in-browser.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/5cea060c-a8be-0de4-1956-328e17ce00a6.png)

### Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

:::note info
各サイトをプロジェクトとして管理できるようになります。
:::

### Live Server

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

:::note info
ローカルサーバが立ち上がり、ファイルを修正すると自動でブラウザが更新されます。
:::

## エディターを見やすくする

### Dracula Official

https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula

:::note info
Visual Studio Code の配色テーマ。カッコイイ！
:::

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/8cc37cd9-3cfc-d01e-3c9b-967d34f237d0.png" width="1010" height="1046" decoding="async" loading="lazy">

:::note info
Visual Studio Code 以外にもさまざまなアプリの配色テーマが公開されています。
見た目が統一されていい感じです。以下アプリに適用させています。

* Slack
* Chrome
* Firefox
* Thunderbird
:::

https://draculatheme.com/

### Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

:::note info
エクスプローラーのフォルダーやファイルにアイコンが表示されます。
:::

#### File icons

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/32596557-7348-3b5f-39e8-a5fe16316a4d.png" width="1124" height="4624" decoding="async" loading="lazy">

#### Folder icons

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/492675/4538da32-afb5-d388-ab9d-a3fbb8f0fe9a.png" width="1124" height="2008" decoding="async" loading="lazy">

## 関連記事

<!-- フロントエンドコーディング時によく利用するジェネレーターサイト（随時更新） -->
https://qiita.com/taqumo/items/7df0c4dfaca6bd6436a3

<!-- フロントエンドコーディング時に便利なChrome拡張機能（随時更新） -->
https://qiita.com/taqumo/items/b2cc6807bc3ca31a5063

<!-- フロントエンドコーディング後によく利用するチェックサイト（随時更新） -->
https://qiita.com/taqumo/items/c5d20a6339045021f395