【フロントエンド】VsCodeに入れるべき必須の便利プラグイン&初期設定

こちらの記事は、vscodeの設定・拡張機能シリーズのフロントエンド開発編です。

【共通編】VsCodeに入れるべき必須の便利拡張機能&初期設定
本記事では、VsCodeに入れるべき必須の便利プラグイン&初期設定を紹介しています。見た目をスタイリッシュにしてくれるものから、開発を支援してくれるものまで必須級のプラグインと設定を一挙に紹介しています。
【PHP、Laravel編】VsCodeに入れるべき必須の便利プラグイン&初期設定
本記事では、vscodeを用いて行うPHP、Laravel開発を効率化させるvscodeのプラグインを紹介します。効率的でミスのないコーディングを行うために必要な機能が備わった各種プラグインと開発のモチベーションを高めてくれるツールをご紹介しておりますので、まだ使用したことない方はぜひこの機会に使ってみてください。

環境

  • windows10
  • DockerDesktop for Win 3.5.x
  • node v14.17.4
  • npm 6.14.14
  • VsCode
  • gitbash 2.32.0.1

初期設定

Emmet

Emmetは、vscodeに標準で搭載されている、htmlとcssの補完機能です。react限定ですが、以下を追記することで、jsx内のhtml要素にもemmetを効かせることが可能になります。(デフォルトだと純粋なhtmlファイルにしか効かない)

settings.json

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

ユーザースニペット

言語ごとに対応する設定ファイルにあらかじめスニペットを登録しておくと、一気にひな型のコードを挿入できます。

VsCodeのユーザースニペット機能で開発効率を爆上げする
本記事では、VsCodeのユーザースニペット機能で開発効率を爆上げする方法について紹介しています。また、スニペットに$を含めるための設定方法についても併せて紹介していますので、ぜひ参考にしてみてください。

javascriptreact.json

"component": {
        "prefix": "react",
        "body": [
            "import React,{useCallback, useState, useEffect} from 'react';",
            "import ReactDOM from 'react-dom';",
            "import styled from 'styled-components'; \n",
            "const PrimaryButton = styled.button({ ",
            "backgroundColor: 'blue',",
            "border: 'none',",
            "padding: '4px 14px', }); \n",
            "const $TM_FILENAME_BASE = () => {",
                "\treturn(",
                "<div><button>登録</button></div>",
                "\t)",
            "} \n",
            "export default $TM_FILENAME_BASE",
            "if (document.getElementById('$idname')) {",
            "if (document.getElementById('$idname')) {",
            "ReactDOM.render(<$TM_FILENAME_BASE />, document.getElementById('$idname'))",
            "}",
            "}"
        ],
        "description": "react"
    },

サイドバー

サイドバーに表示する項目はサイドバー上で右クリックメニューから指定できる。よく使うやつを設定しておくと便利。

Import Cost

Import Cost - Visual Studio Marketplace
Extension for Visual Studio Code - Display import/require package size in the editor

ライブラリのインポートに必要なサイズを計算して表示してくれる

キーバインド(ショートカットキーの割り当て)

自分の好みに合わせてショートカットキーを割り当てることが可能。左下の歯車アイコンより、キーボードショートカットを選択

キーバインド一覧が表示するので、検索したいコマンドの名称もしくは、キーバインドを検索する

ctrl + j の割り当てで検索すると、ctrl + j を含むキーバインドの一覧が表示する

(本記事作成前にすでにユーザー設定として割り当て済み)

対象のコマンドのキーバインド列をクリックし、ウィンドウにキーバインドを指定する

設定は以上。デフォルトのキーバインドからの変更内容はkeybindings.jsonに一覧として定義される。

拡張機能

Auto Rename Tag

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

Prettier

コードフォーマッターです。

Material Icon Theme

定番のアイコン拡張設定

JavaScript(ES6) code snippets

freと入力したら、以下を自動で補完してくれるようなスニペットが色々使える拡張機能です。便利ではあるのですが、省略したコマンドをいちいち覚えないのいけないので、必須レベルではないかなと個人的に思っています。

array.forEach(currentItem => {

})

ES7 React/Redux/GraphQL/React-Native snippets

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

Add jsdoc comments

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

 

Better Comments

コード内のコメントに色を付けることができます。

Bracket Pair Colorizer

他の記事でも少し紹介しましたが、カッコの対応を色付きで表示してくれます。

Highlight Matching Tag

Bracket Pair Colorizerのhtmlタグバージョン

Tailwind CSS IntelliSense

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

TODO Highlight

特定のキーワードをハイライト表示してくれる。TODOとかFIXMEなど。

Sort lines

アルファベット順等でコードを並び替えてくれる

Color Highlight

HTMLやCSS等で指定されたカラーコードの箇所に色をつけて可視化してくれるプラグインです

Path Intellisense

パスの入力を支援してくれます。

以上です。

コメント

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