Vueの開発におすすめなVSCodeの拡張機能を紹介!!

Web

はじめに

Vueの開発にVSCodeはかなりおすすめのエディタです。ここではVueを開発する上で役立つVSCodeの拡張機能を紹介します。

まだVSCodeをインストールしていない方はこちらを参考にしてください。

【Visual Studio Code】インストールと使い方についてサクッと解説
Visual Studio Code(VSCode)は、Microsoftが開発したソースコードエディタで、最近人気が急上昇しているエディタです。使いやすく、見た目も良いので初心者にオススメのエディタなので一度インストールしてみてはいかがでしょうか。

Vetur

Veturは、Vueの開発に役立つ様々な機能が用意されています。正直なところ、Veturを入れておけばとりあえずOKなところはあります。

具体的には次のような機能がサポートされています。

  • シンタックスハイライト
  • スニペット
  • Emmet
  • コードチェック(linting/Erorr Check)
  • オートコンプリート

では、一部の機能について簡単に紹介します。詳しい内容は公式ドキュメントを参考にしてください。

Vetur | Vetur
Vue tooling for VS Code.

スニペット

スニペットとは、簡単に言うとコードの一部分を意味します。スニペットを入力することで、その入力に合わせてコードを補完してくれます。

Veturでは次のスニペットがサポートされています。

<vue

 

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>
<template
<template>
  
</template>
<script
<script>
export default {

}
</script>
<style
<style>

</style>

Emmet

Emmetは、HTMLとCSSのためのスニペットによる入力補間の機能です。Veturを追加することで、<template>と<style> 内でEmmetを利用できるようになります。

<template>
  ul>li*3
</template>
<template>
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</template>
<style>
.class {
  w100
}
</style>
<style>
.class {
  width: 100px;
}
</style>

Vue 2 Snippets

Vue 2 Snippetsは、Vueファイルのシンタックスハイライトと豊富なスニペットがサポートされています。

VeturのスニペットはVueのベースとなる部分だけですが、Vue 2 Snippetsはディレクティブなどのスニペットなどもサポートされています。

詳しくはVue 2 Snippetsの拡張機能の画面を参考にしてください。

といっても個人的にはVeturのオートコンプリートで事足りる気がしていますが…。

Debugger for Chrome

Chromeがインストールされていることが前提ですが、Chromeを使うことでVSCode上でJSのデバックができる拡張機能です。

当然Vueのデバックもできます!

ただし、少し設定が必要になります。

vue.config.jsの設定

Vue CLIプロジェクトフォルダ直下にvue.config.jsを作成して、以下の内容を設定してください。

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

vue.config.jsは、vueの設定ファイルで、コンパイル時に自動で読み込んで設定を反映してくれます。

launch.jsonの設定

launch.jsonはデバックの設定用のファイルです。F5キーを押せば初回時に作成されます。ファイルはプロジェクトフォルダ直下の .vscodeフォルダ内に作成されます。

作成されたlaunch.jsonを次のように変更します。ただし、内部サーバーがポート8080で起動されることが前提です。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      }
    }
  ]
}

デバックの実行

デバック用にApp.vueを次のように変更してみましょう。

<template>
  <div id="app">
    <button @click="showMessage">button</button>
    <p>{{val}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      val: ''
    }
  },
  methods: {
    showMessage() {
      const message = ["これは", "テスト用に", "作った", "メッセージです"]
      this.val  = message[0] //<-- ここにブレイクポイントを設置します
      this.val += message[1]
      this.val += message[2]
      this.val += message[3]
    }
  }
}
</script>

デバックを実行するには、まず内部サーバーを起動する必要があります。

$npm run serve

次にブレイクポイントを設定します。ブレイクポイントの設定は、行番号の左側をクリックするだけです。赤い丸が表示されればOKです。

デバックを実行するにはF5キーを押します。デバックが実行されるとChromeが起動し、対象の画面が表示されます。ではbuttonボタンをクリックし、showMessage()を発火させましょう。するとブレイクポイントで止まるはずです。

値の確認をするには、サイドバーに表示されたデバック画面内の変数とウォッチ式を使用します。

変数にはLocalとGlobalがありますが、基本的にはLocalだけで十分でしょう。Localには、スコープ内で参照できる変数の一覧とその値が表示されます。今回の場合だと、showMessage()で定義したmessageとコンポーネント自身を表すthisが参照できます。

ただ、このままだとコンポーネントのデータが参照しにくいためウォッチ式を利用します。ウォッチ式には、参照したい変数や式を指定します。ヘッダー部のプラスアイコンをクリックし、参照したい式を入力します。今回はdataプロパティのvalの動きが見たいのでthis.valと入力します。何もしていなければ空文字が値として参照できるはずです。

デバックの操作は画面上部に表示されるアイコンで行います。左から順に、Continue、Step Over、Step Into、Step Out、Restart、Stop になります。基本的なデバックと意味は同じなのでここでは割愛します。ただ、ブレイクポイントを変更した場合やコードを変更した場合は、1度Restartする必要があります。

ではStep Overをしてデバックを進めてみてください。ウォッチ式に設定したthis.valの値が更新されるはずです。

このようにDebugger for Chromeを使えばVueファイルのデバックも簡単に行えるようになります。

Vue.js Devtools

VSCodeの拡張機能ではないですが、Vueの開発には欠かせない存在なので紹介します。

Vue.js Devtoolsは、ChromeとFirefoxの拡張機能として提供されています。

Vue.js devtools
Chrome and Firefox DevTools extension for debugging Vue.js applications.
Vue.js devtools – 🦊 Firefox (ja) 向け拡張機能を入手
Firefox 向け Vue.js devtools をダウンロード。DevTools extension for debugging Vue.js applications.

Vue.js Devtoolsを追加するとDev ToolsにVueという項目が追加されます。

Vue.js Devtoolsでは、コンポーネント、Vuex、イベントなどが監視され、処理毎に内部的な状態を確認することができます。

Vueをやるなら必ず入れておきたい機能です。

 

- Vue.jsのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました