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を使っています。
VSCodeのおすすめ拡張機能(HTML、CSS)
Encode Decode2
htmlのコードをアンエスケープするために利用しています。
使い方は次のとおりです。
選択 > コマンドパレット > convert selection > String to HTML Entities
戻るときは次のとおりです。
選択 > コマンドパレット > convert selection > HTML Entities to String
stylelint-plus
stylelint-plusはCSSの整形目的です。詳細はこちらの記事です。


VSCodeのおすすめ拡張機能(電子書籍)
CharacterCount
文字数をカウントするプラグイン。開発者は日本人。
vscode-textlint
textlintです。
VSCodeのおすすめ拡張機能(Github)
Git History
Gitの履歴を見るのです。
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を介さずデータのやりとりをする場合があります。
簡単ですが、ご参考になれば幸いです。
コメント