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に組み込まれてデフォルト機能で使えるようです。
bracket pair colorizer is no longer being maintained.
VsCodeより
— 眼力 玉壱號 (@objectxplosive) September 2, 2021
Vs Codeはsettingから設定しますが、最新のVs Codeではデフォルトで有効になるようです。
Clipboard Ring
Clipboard Ringはクリップボード履歴を呼び出せるVs Codeの拡張ですが、
ただ秀丸エディタのように使いやすくありません。頻繁に使うものが3キーのショートカットはきついです。一発で履歴一覧がでません。
コマンドパレット > Select and paste ringItem
で2階層あるため、Fキーのショートカットを割り当てたらだいぶ使いやすくなりました。コマンドパレットの歯車アイコンから設定できます。
vscode-textlint
textlintです。
textlintの使い方はこちらです。
VSCodeのおすすめ拡張機能（HTML、CSS）
Encode Decode2
htmlのコードをアンエスケープするために利用しています。
使い方は次のとおりです。
選択 > コマンドパレット > convert selection > String to HTML Entities
戻るときは次のとおりです。
選択 > コマンドパレット > convert selection > HTML Entities to String
stylelint-plus
stylelint-plusはCSSの整形目的です。詳細はこちらの記事です。
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を介さずデータのやりとりをする場合があります。
簡単ですが、ご参考になれば幸いです。
コメント