本記事では、フロントエンド開発において、VsCodeに入れるべき必須の便利プラグインを紹介しています。
開発全般の共通編はこちら
【共通編】VsCodeにインストールするべき必須の便利拡張機能
本記事では、VsCodeにインストールするべき必須の便利プラグイン&初期設定を紹介しています。見た目をスタイリッシュにしてくれ開発モチベーションを高めてくれるものから、開発を支援してくれるものまで必須級のプラグインと設定や使い方などを一挙に紹介しています。
maasaablog.com
2021.09.20
PHP、Laravel向けはこちら
【PHP、Laravel編】VsCodeにインストールするべき必須の便利拡張機能
本記事では、vscodeを用いて行うPHP、Laravel開発を効率化させるvscodeの便利拡張機能を紹介します。効率的でミスのないコーディングを行うために必要な機能が備わった各種プラグインと開発のモチベーションを高めてくれるツールをご紹介しておりますので、まだ使用したことない方はぜひこの機会に使ってみてください。
maasaablog.com
2021.05.05
VSCodeでしゃれおつなテーマ一覧はこちら
VSCodeでしゃれおつなテーマを適用して開発モチベーションを上げる
本記事では、VSCodeでしゃれおつなテーマを適用して開発モチベーションを上げる方法について紹介しています。
maasaablog.com
2021.09.12
環境
- VsCode 1.63.2
拡張機能
Auto Rename Tag
masayan
htmlの開始タグと終了タグを同期してくれます(片方を修正したら、もう片方も自動的に修正される)
Auto Rename Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Auto rename paired HTML/XML tag
marketplace.visualstudio.com
Eslint
masayan
コードの静的解析ツールです。
ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - Integrates ESLint JavaScript into VS Code.
marketplace.visualstudio.com
Prettier
masayan
コードの自動フォーマット。
Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier
marketplace.visualstudio.com
JavaScript(ES6) code snippets
masayan
特定の文字を入力したら、以下のような定型を自動で補完してくれるようなスニペットが色々使える拡張機能です。
JavaScript (ES6) code snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Code snippets for JavaScript in ES6 syntax
marketplace.visualstudio.com
array.forEach(currentItem => {
})ES7 React/Redux/GraphQL/React-Native snippets
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.
marketplace.visualstudio.com
Add jsdoc comments
masayan
jsDocの入力を支援してくれます
We're sorry, the page you requested cannot be found.
marketplace.visualstudio.com
Better Comments
masayan
コード内のコメントの種類ごとに色を付けることができ、見やすくなります
Better Comments - Visual Studio Marketplace
Extension for Visual Studio Code - Improve your code commenting by annotating with alert, informational, TODOs, and more!
marketplace.visualstudio.com
Highlight Matching Tag
masayan
対になる開始タグと終了タグをハイライトする事ができる
Highlight Matching Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Highlights matching closing and opening tags
marketplace.visualstudio.com
Tailwind CSS IntelliSense
masayan
Tailwind CSSの補完が効くようになります。Tailwind使うなら必須級!
Tailwind CSS IntelliSense - Visual Studio Marketplace
Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code
marketplace.visualstudio.com
Color Highlight
masayan
HTMLやCSS等で指定されたRGB値に対応する色をつけて可視化してくれるプラグインです
Color Highlight - Visual Studio Marketplace
Extension for Visual Studio Code - Highlight web colors in your editor
marketplace.visualstudio.com
以上です。
コメント