VSCodeでVueを書くときの諸々の設定
  • Veturのインストール
  • jsconfig.jsonの作成
  • vueファイルへの定義ジャンプを可能にする方法
  • ESLintでの保存時フォーマット

jsconfig.jsonの作成

Vue CLIやNuxtの場合、最初から@~といったエイリアスが用意されている。

エイリアスはjsconfig.jsonを用意してVSCodeに認識させないといけない。

設定内容は以下の通り

Vue CLI

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

Nuxt

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "*"
      ],
      "~/*": [
        "*"
      ],
      "@@/*": [
        "*"
      ],
      "~~/*": [
        "*"
      ]
    }
  }
}

vueファイルの定義ジャンプを出来るようにする

vueファイルへのF12ショートカットでの定義ジャンプは、

  • Veturのインストール
  • jsconfig.jsonの作成

をした上で、importの際に.vue拡張子を明示的に書いておかなければならない。

// .vueは省略してはいけない
import ExampleComponent from '~/components/ExampleComponent.vue'

あと、vueファイルからvueファイルへの定義ジャンプは可能だが、jsファイルからvueファイルへの定義ジャンプは出来なかったりする。(この点に関してはjsファイルから定義ジャンプすることはそんなに無いから問題にならないと思う)

ESLintでの保存時フォーマット

VSCode+Vue+ESLintで保存時フォーマット+コミット時にリント