フロントエンドエンジニアにおすすめVSCode拡張機能

 # はじめに
こんにちは、都内でソフトウェアエンジニアをしている[YSasago](https://qiita.com/YSasago)です。
私はフロントエンド開発において、主に[VSCode](https://code.visualstudio.com/)を利用しています。
先日、[おすすめのChromeの拡張機能](https://qiita.com/YSasago/items/e29803ff460f3a5a6da4)を紹介したところ、たくさんの方からの反響がありました。今回は私が日常的に使用しているVSCodeの拡張機能を紹介したいと思います。

## [Turbo Console Log](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)
開発しているときに値が意図したとおりに受け取れているか、変更されているか確認したいときに、Turbo Console Logを使うまでは、```console.log()```を毎回書いてました。console.log()が多くなると、どのログが確認したいログかわからなくなったりとする問題があったりしました。Turbo Console Logの導入により、変数名を選択し`ctrl + alt + L`（Windows）または`ctrl + option + L`（Mac）を押すだけで、ログが自動生成されます。これにより、ファイル名や行数も含めてログを簡単に追跡できるようになりました。

#### 自動生成されるログ例
```
console.log("🚀 ~ file: page.tsx:98 ~ projectName:", projectName)
```

![insert-log-message.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/3b10dee6-b533-93d6-3315-d3a06ed367e4.gif)

https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

## [Shortcuts](https://marketplace.visualstudio.com/items?itemName=gizak.shortcuts)
この拡張機能はVSCodeの左下に便利なショートカットを追加します。特にターミナルやコマンドパレットへのアクセスが頻繁にある場合、このショートカットは大変便利です。

![スクリーンショット 2023-12-13 13.48.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/a556960f-63c7-aa3f-8ff5-7bde6a1accd8.png)

https://marketplace.visualstudio.com/items?itemName=gizak.shortcuts

## [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

Prettierはコードフォーマッターとして非常に優れています。JavaScript、TypeScript、CSSなど、多くの言語をサポートしており、VSCodeに導入することで、より一貫性のあるコードを簡単に記述できます。

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

# [ES7+ React/Redux/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
私はフロントエンド開発ではReactを使っており、Reactのお決まりのテンプレート的なものをSnippetsとして用意してくれている便利な拡張機能です。
たとえば、新規にファイルを作成したら、```rafc```と入力すると、ReactのArrowFunctionComponetのテンプレートを自動で出力してくれます。他にも[用意されているSnippets](https://github.com/r5n-dev/vscode-react-javascript-snippets/blob/HEAD/docs/Snippets.md)はたくさんあるので、普段使うものは覚えておくとコーディングのスピードが上がると思います。

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets

rafcと入力すると、サジェストされます。
![スクリーンショット 2023-12-15 18.04.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/5bcf6f28-8dfa-5867-240c-f9a4b47eafea.png)

自動で出力されるコード

```react
import React from 'react'

export const index = () => {
  return (
    <div>index</div>
  )
}
```

## [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
こちらは、書いているコードのスペルを自動でチェックしてくれる拡張機能です。よくタイプミスをするのでとても助かっております。

![スクリーンショット 2023-12-15 18.24.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/72501aa8-cbed-2fa3-4925-6881efe4131c.png)

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

## [htmltagwrap](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)
複数行を`<div>`や`<p>`で囲む際、htmltagwrapは非常に便利です。特定の行を選択し、`Option + W`（Mac）または`Alt + W`（Windows）を押すだけで、選択したコードをタグで囲むことができます。とても良く使う拡張機能です。

![screenshot.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/47e29247-7a14-0c0b-19a4-e5a0b7ea9a20.gif)

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

# おわりに
今回、私がフロントエンド開発時によく使っているVSCodeの拡張機能を紹介しました。
今後も、便利な拡張機能を見つけ次第、情報を更新していきます。他におすすめの拡張機能があれば、ぜひ教えてください。最後までお読みいただき、ありがとうございました。