Vue.jsを使う人が最低限導入しておきたいVisual Studio Codeの拡張機能

最近Vue.jsを触ることが増えてきたので、Vue.jsでの開発が便利になるVisual Studio Codeの拡張機能をまとめておきます。

Vetur

marketplace.visualstudio.com

Vetur - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=octref.vetur

このVeturを入れておかないとシンタックスハイライトや、.vue内に記述するHTMLやJavaScriptの補間が効かなかったりします。

.vueファイルを開くとVisual Studio Code側からも、この拡張機能がオススメとして右下に表示されるので、とにかくVueを触る人はインストールすることになる拡張機能です。

細かい設定内容に関しては全て公式のドキュメントにまとまっていたりもするので、細かく設定してみたい人は探してみると良いです。

vuejs.github.io

Vetur | Vetur

https://vuejs.github.io/vetur/

Vue Peek

marketplace.visualstudio.com

Vue Peek - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek

コンポーネントの編集をラクにしてくれる拡張機能です。

• F12でコンポーネントのファイルを新規タブで開く
• shift + command + F12でコンポーネント内容を読み込みその場で開き、編集もできる

Vue.jsでコンポーネントを大量に作っていくと、ファイル間の移動が面倒になってきますが、この拡張機能を使えば移動の手間が激減しますし、shift + command + F12の方を使えば、新規タブが開かれるわけではないので、タブを圧迫しないで済みます。

Vue docs

marketplace.visualstudio.com

Vue docs - Visual Studio Marketplace

https://marketplace.visualstudio.com/items?itemName=titiaiev.vue-docs

Vue.js・Vuez・Vue Router・Nuxt.jsなどの公式ドキュメントをVisual Studio Code上で見れる拡張機能です。

Google Chromeのタブがいっぱいでごちゃごちゃになるのがイヤになる人や、わざわざGoogle Chromeに移動して検索するのが面倒な人はVisual Studio Code上で開くのも1つの手です。

ただ、個人的にはDashなどのドキュメント検索ができるアプリケーションを使ったり、Alfredから検索するのがオススメです。

Webrandum

Macユーザーにオススメのスニペットアプリ「Dash」でコードや定型文の管理を行う

https://webrandum.net/dash