【Html,CSS,Vue(Nuxt)】VSCodeのおすすめ拡張機能(extension)ライブラリ

おすすめのオンラインプログラミング学習

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を使っています。

Bracket Pair Colorizer 2 - Visual Studio Marketplace
Extension for Visual Studio Code - A customizable extension for colorizing matching brackets
スポンサーリンク

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の整形目的です。詳細はこちらの記事です。

【stylelint-plusが最適解!?】VSCodeでcssのプロパティをソートする拡張比較!
「cssのプロパティをソートする拡張」や「プログラミングを整形する拡張」はいろいろありますので、覚書がてら、いろいろとまとめて紹介します。 結論からいうと個人的にはWordpressのブログ運営もJavascript系のnuxtもst...
スポンサーリンク

VSCodeのおすすめ拡張機能(電子書籍)

CharacterCount

文字数をカウントするプラグイン。開発者は日本人。

CharacterCount - Visual Studio Marketplace
Extension for Visual Studio Code - 文字数をリアルタイムでカウントする、Visual Studio Codeの機能拡張です。

vscode-textlint

textlintです。

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

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を介さずデータのやりとりをする場合があります。

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

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

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