2019-4-6

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 で保存時フォーマット+コミット時にリント