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

Extension for Visual Studio Code - Vue tooling for VS Code

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

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

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

vuejs.github.io

Vetur | Vetur

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

Vue tooling for VS Code.

Vue Peek

marketplace.visualstudio.com

Vue Peek - Visual Studio Marketplace

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

Extension for Visual Studio Code - Allows peek and goto definition for Vue single-file components.

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

• 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

Extension for Visual Studio Code - Viewing documentation directly from VS Code!

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

HTMLやCSSなどのコードの入力で同じような入力を何度もしていませんか？そんな方にはスニペットツールがオススメです。スニペットツールを使えばよく使う定型文を簡単にペーストできるように登録したり、入力後のカーソル位置の指定や、クリップボード内のテキストと合わせてペーストしたりといった細かい指定ができます。今回は数あるスニペットアプリの中から「Dash」について基本的な機能を紹介します。ちなみに、自分の場合は日常会話などに使う定型文はAlfredのスニペット機能を使っていて、コードの定型文はDashを使うようにして...