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ファイルから定義ジャンプすることはそんなに無いから問題にならないと思う）