Vue.jsを使う人が最低限導入しておきたいVisual Studio Codeの拡張機能
最近Vue.jsを触ることが増えてきたので、Vue.jsでの開発が便利になるVisual Studio Codeの拡張機能をまとめておきます。
| 拡張機能名 | 拡張機能の内容 |
|---|---|
| Vetur | Vueの基本プラグイン |
| Vue Peek | 選択したコンポーネントがどこで定義しているか表示してくれる |
| Vue docs | Vue.js・Vuez・Vue Router・Nuxt.jsなどの公式ドキュメントを見れる |
Vetur
このVeturを入れておかないとシンタックスハイライトや、.vue内に記述するHTMLやJavaScriptの補間が効かなかったりします。
.vueファイルを開くとVisual Studio Code側からも、この拡張機能がオススメとして右下に表示されるので、とにかくVueを触る人はインストールすることになる拡張機能です。
細かい設定内容に関しては全て公式のドキュメントにまとまっていたりもするので、細かく設定してみたい人は探してみると良いです。
Vue Peek
コンポーネントの編集をラクにしてくれる拡張機能です。
- F12でコンポーネントのファイルを新規タブで開く
- shift + command + F12でコンポーネント内容を読み込みその場で開き、編集もできる
Vue.jsでコンポーネントを大量に作っていくと、ファイル間の移動が面倒になってきますが、この拡張機能を使えば移動の手間が激減しますし、shift + command + F12の方を使えば、新規タブが開かれるわけではないので、タブを圧迫しないで済みます。
Vue docs
Vue.js・Vuez・Vue Router・Nuxt.jsなどの公式ドキュメントをVisual Studio Code上で見れる拡張機能です。
Google Chromeのタブがいっぱいでごちゃごちゃになるのがイヤになる人や、わざわざGoogle Chromeに移動して検索するのが面倒な人はVisual Studio Code上で開くのも1つの手です。
ただ、個人的にはDashなどのドキュメント検索ができるアプリケーションを使ったり、Alfredから検索するのがオススメです。
