VSCodeのおすすめ拡張機能(Html,CSS,Vue,Nuxt)

プログラミング学習

VSCode(visual studio code)のおすすめ拡張機能(extension)をまとめておきます、個人的なめももかねています。

VS Codeの拡張(extension)のインストール

画面左のExtensions(マイクロソフトのロゴみたいなアイコン) > キーワードをいれて検索 > install

スポンサーリンク

VSCodeのおすすめ拡張機能(言語問わず)

phpやjavascript言語関係なく共通で使えます。

indent-rainbow、Bracket Pair Colorizer2(非推奨)

  • indent-rainbow インデントをカラーでわかりやすくする
  • Bracket Pair Colorizer2 括弧の対応をカラーでわかりやすくする

Bracket Pair ColorizerとBracket Pair Colorizer2の違いは公式サイトによると以下のとおり。

Differences between v1 and v2?
v2 Uses the same bracket parsing engine as VSCode, greatly increasing speed and accuracy. A new version was released because settings were cleaned up, breaking backwards compatibility.

ベースが同じで速度があがっています。β版だが、今のところ困ったことがないためBracket Pair Colorizer2を使っています。

[Deprecated] Bracket Pair Colorizer 2 - Visual Studio Marketplace
Extension for Visual Studio Code - A customizable extension for colorizing matching brackets

(追記)非推奨になりました。VsCodeに組み込まれてデフォルト機能で使えるようです。

bracket pair colorizer is no longer being maintained.

VsCodeより

Vs Codeはsettingから設定しますが、最新のVs Codeではデフォルトで有効になるようです。

Clipboard Ring

Clipboard Ringはクリップボード履歴を呼び出せるVs Codeの拡張ですが、

Clipboard Ring - Visual Studio Marketplace
Extension for Visual Studio Code - A Visual Studio Code plugin that extends the clipboard and stores copied data in a ring storage.

ただ秀丸エディタのように使いやすくありません。頻繁に使うものが3キーのショートカットはきついです。一発で履歴一覧がでません。

コマンドパレット > Select and paste ringItem

で2階層あるため、Fキーのショートカットを割り当てたらだいぶ使いやすくなりました。コマンドパレットの歯車アイコンから設定できます。

vscode-textlint

textlintです。

vscode-textlint - Visual Studio Marketplace
Extension for Visual Studio Code - Integrates Textlint into VS Code.

textlintの使い方はこちらです。

スポンサーリンク

VSCodeのおすすめ拡張機能(HTML、CSS)

Encode Decode2

htmlのコードをアンエスケープするために利用しています。

Encode Decode - Visual Studio Marketplace
Extension for Visual Studio Code - An extension for Visual Studio Code that allows you to quickly convert text selections.

使い方は次のとおりです。

選択 > コマンドパレット > convert selection > String to HTML Entities

戻るときは次のとおりです。

選択 > コマンドパレット > convert selection > HTML Entities to String

stylelint-plus

stylelint-plusはCSSの整形目的です。詳細はこちらの記事です。

スポンサーリンク

VSCodeのおすすめ拡張機能(Github)

Git History

Gitの履歴を見るのです。

Git History - Visual Studio Marketplace
Extension for Visual Studio Code - View git log, file history, compare branches or commits
スポンサーリンク

Vue(Nuxt)のおすすめ開発環境

vscodeのおすすめ拡張機能

Vue.js Extension Packがありますが、いろいろとインストールされすぎます。個人的にはveturをとりあえず、入れておけばいいかなっと。シンタックスハイライトが表示されるようになります。

vue.jsのおすすめライブラリ

必要になった時点でいれればOKですが、軽くリストアップ。

  • vue-cli
  • Vue Router
  • Vuex(状態管理)
  • vuex-router-sync(route情報を参照)
  • vuex-persistedstate(リロード対策)
  • VeeValidate(フォームのエラー対策)
  • BootstrapVue(デザイン、ハンバーガーメニュー)
  • axios(サーバーとのやりとり)

リロード対策のvuex-persistedstateはfirebaseから常時データを取得していれば大丈夫ですが、firebaseを介さずVueXを使う際には便利です。会員登録するサイトでも時折、firebaseを介さずデータのやりとりをする場合があります。

簡単ですが、ご参考になれば幸いです。

コメント

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