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

URL: https://webrandum.net/vscode-vue-plugin/
公開日: 2020-07-26
更新日: 2020-07-26
カテゴリー: コーディング
タグ: Visual Studio Code, Vue.js
出典: Webrandum（著者: サイトウ マサカズ）

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

| 拡張機能名 | 拡張機能の内容 |
| --- | --- |

| Vetur | Vueの基本プラグイン |
| --- | --- |

| Vue Peek | 選択したコンポーネントがどこで定義しているか表示してくれる |
| --- | --- |

| Vue docs | Vue.js・Vuez・Vue Router・Nuxt.jsなどの公式ドキュメントを見れる |
| --- | --- |

## Vetur

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/b62e8d65db7de4992dfbcbd6cdd70677fb74847289a172bdfd1c6206a4e1c85e.webp)Vetur - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=octref.veturExtension for Visual Studio Code - Vue tooling for VS Code](https://marketplace.visualstudio.com/items?itemName=octref.vetur)

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

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

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

[![](https://www.google.com/s2/favicons?domain=vuejs.github.io)vuejs.github.io![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fvuejs.github.io%2Fvetur%2F?w=160)Vetur | Veturhttps://vuejs.github.io/vetur/Vue tooling for VS Code.](https://vuejs.github.io/vetur/)

## Vue Peek

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/e1863099751eb21b0e7c1adecb3a410c7bcfec5b8090c98642a0e37e543b5995.webp)Vue Peek - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peekExtension for Visual Studio Code - Allows peek and goto definition for Vue single-file components.](https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek)

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

- F12でコンポーネントのファイルを新規タブで開く

- shift + command + F12でコンポーネント内容を読み込みその場で開き、編集もできる

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

![Vue Peek](https://webrandum.net/mskz/wp-content/uploads/2020/07/image_1-7-1024x566.png)

## Vue docs

[![](https://www.google.com/s2/favicons?domain=marketplace.visualstudio.com)marketplace.visualstudio.com![](//webrandum.net/mskz/wp-content/uploads/pz-linkcard/cache/993b60b9d53b77877347910c9e839112929673cc8568a49cec0034857180250a.webp)Vue docs - Visual Studio Marketplacehttps://marketplace.visualstudio.com/items?itemName=titiaiev.vue-docsExtension for Visual Studio Code - Viewing documentation  directly from VS Code!](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から検索するのがオススメです。

[![](https://www.google.com/s2/favicons?domain=webrandum.net)Webrandum![](//webrandum.net/mskz/wp-content/uploads/2018/02/Dash_Snippet.png)Macユーザーにオススメのスニペットアプリ「Dash」でコードや定型文の管理を行うhttps://webrandum.net/dashHTMLやCSSなどのコードの入力で同じような入力を何度もしていませんか？そんな方にはスニペットツールがオススメです。スニペットツールを使えばよく使う定型文を簡単にペーストできるように登録したり、入力後のカーソル位置の指定や、クリップボード内のテキストと合わせてペーストしたりといった細かい指定ができます。今回は数あるスニペットアプリの中から「Dash」について基本的な機能を紹介します。ちなみに、自分の場合は日常会話などに使う定型文はAlfredのスニペット機能を使っていて、コードの定型文はDashを使うようにして...](https://webrandum.net/dash)