【フロントエンド】VsCodeにインストールするべき必須の便利拡張機能

本記事では、フロントエンド開発において、VsCodeに入れるべき必須の便利プラグインを紹介しています。

開発全般の共通編はこちら

【共通編】VsCodeにインストールするべき必須の便利拡張機能
本記事では、VsCodeにインストールするべき必須の便利プラグイン&初期設定を紹介しています。見た目をスタイリッシュにしてくれ開発モチベーションを高めてくれるものから、開発を支援してくれるものまで必須級のプラグインと設定や使い方などを一挙に紹介しています。

PHP、Laravel向けはこちら

【PHP、Laravel編】VsCodeにインストールするべき必須の便利拡張機能
本記事では、vscodeを用いて行うPHP、Laravel開発を効率化させるvscodeの便利拡張機能を紹介します。効率的でミスのないコーディングを行うために必要な機能が備わった各種プラグインと開発のモチベーションを高めてくれるツールをご紹介しておりますので、まだ使用したことない方はぜひこの機会に使ってみてください。

VSCodeでしゃれおつなテーマ一覧はこちら

VSCodeでしゃれおつなテーマを適用して開発モチベーションを上げる
本記事では、VSCodeでしゃれおつなテーマを適用して開発モチベーションを上げる方法について紹介しています。

環境

  • VsCode 1.63.2

拡張機能

Auto Rename Tag

masayan
masayan

htmlの開始タグと終了タグを同期してくれます(片方を修正したら、もう片方も自動的に修正される)

Auto Rename Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Auto rename paired HTML/XML tag

Eslint

masayan
masayan

コードの静的解析ツールです。

ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.

Prettier

masayan
masayan

コードの自動フォーマット。

Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier

JavaScript(ES6) code snippets

masayan
masayan

特定の文字を入力したら、以下のような定型を自動で補完してくれるようなスニペットが色々使える拡張機能です。

JavaScript (ES6) code snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Code snippets for JavaScript in ES6 syntax
array.forEach(currentItem => {

})

ES7 React/Redux/GraphQL/React-Native snippets

masayan
masayan

useEffectやuseStateなどのreact特有の記述が一気に補完できるのでreactを使用するのであれば、必須です。

ES7+ React/Redux/React-Native snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.

Add jsdoc comments

masayan
masayan

jsDocの入力を支援してくれます

Add jsdoc comments - Visual Studio Marketplace
Extension for Visual Studio Code - Adds jsdoc @param and @return tags for selected function signatures in JS and TS

Better Comments

masayan
masayan

コード内のコメントの種類ごとに色を付けることができ、見やすくなります

Better Comments - Visual Studio Marketplace
Extension for Visual Studio Code - Improve your code commenting by annotating with alert, informational, TODOs, and more!

Highlight Matching Tag

masayan
masayan

対になる開始タグと終了タグをハイライトする事ができる

Highlight Matching Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Highlights matching closing and opening tags

Tailwind CSS IntelliSense

masayan
masayan

Tailwind CSSの補完が効くようになります。Tailwind使うなら必須級!

Tailwind CSS IntelliSense - Visual Studio Marketplace
Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code

Color Highlight

masayan
masayan

HTMLやCSS等で指定されたRGB値に対応する色をつけて可視化してくれるプラグインです

Color Highlight - Visual Studio Marketplace
Extension for Visual Studio Code - Highlight web colors in your editor

以上です。

コメント

タイトルとURLをコピーしました