【Vue3 + Vite + ESLint】Visual Studio Code にて環境構築のメモ

やりたいこと

Vue3 を Vite でインストールして環境構築し、ESLintの設定も行いたい。そして、それらを使ったときのVisual Studio Codeでのちょっとした問題に対処したい。

やりたいこと
環境
Viteを利用してVue3のインストール
ESLintをインストール
- .eslintrc.jsの設定
インストールされたモジュールのバージョン
新しいESLintのルール
- 応急処置
実行
- ESLintの実行
まとめ
参考文献

環境

Node.js v12.13.0
npm@6.14.6
Visual Studio Code v1.47.1
Vetur v0.24.0
VS Code ESLint extension v2.1.7

Viteを利用してVue3のインストール

Viteというツールが最近新しく出た。ビルドがめちゃ速で、まだベータだがVue3を簡単にインストールできる。なのでViteを利用してみることした。使い方は公式のReadme.mdに載っている。大体、下記コマンドを順に実行していけば問題ない。

npm init vite-app example-vue
cd example-vue
npm i

ESLintをインストール

Vue3の環境ができたら、そのプロジェクト(example-vue)にeslintを導入する。導入の仕方については、eslint-plugin-vueの公式サイトに書かれてある。公式サイト通りに下記コマンドでインストールする。

npm i -D eslint eslint-plugin-vue@next

.eslintrc.jsの設定

大体、下記の通りに書いておけば問題は少ない。

module.exports = {
  extends: [
    'plugin:vue/vue3-recommended',
  ],
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-recommended',
    'plugin:vue/essential',
    'eslint:recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'vue/valid-template-root': 'off',
    'vue/no-multiple-template-root': 'off'
  }
}

インストールされたモジュールのバージョン

まだアルファやベータということでバージョンによってエラーが出てくるかもしれないので、自身のpackage.jsonをこちらに記しておく。

"dependencies": {
  "vue": "^3.0.0-beta.15"
},
"devDependencies": {
  "eslint": "^6.8.0",
  "eslint-plugin-vue": "^7.0.0-alpha.10",
  "vite": "^1.0.0-beta.3"
}

現在のディレクトリについて記しておく。

example-vue
├── .eslintrc.js ← new
├── .gitignore
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src

新しいESLintのルール

vue/valid-template-root から vue/no-multiple-template-rootに変わったらしい。現在(2020/7/16)だとこれで少しつまずくことになる。Veturが対応できていないようで、VS Codeでvue/valid-template-rootのエラーが絶えず下記画像のように指摘される。

応急処置

改善方法を発見された方がいるのでそれに習う。.vscodeというフォルダーを作成し、その中にsettings.jsonファイルを作成する。

mkdir .vscode
touch .vscode/settings.json

settings.jsonファイルにtemplate言語ブロックのバリデーションは無視するように設定する。

{
    "vetur.validation.template": false
}

これで、一応はvue/valid-template-rootのエラーが絶えず表示されることはなくなるが、template言語ブロック全てのバリデーションを弾いてしまうためいまいちである。

現在のディレクトリについて記しておく。

example-vue
├── .eslintrc.js
├── .gitignore
├── .vscode ← new
│   └── settings.json ← new
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
└── src

実行

これで諸々の準備が整ったので、あとはサーブするだけ。それは以下のコマンドで実行できる。

npm run dev

http://localhost:3000/にアクセスしてと表示されるので、ブラウザを開いてアクセス。

vite v1.0.0-beta.11

  Dev server running at:
  > Local:    http://localhost:3000/

すると慣れ親しんだVueのロゴをなどが表示される。やったね！

ESLintの実行

eslintについては、下記のようにして今まで通り実行できる。'vue/no-multiple-template-root': 'off'を.eslintrc.jsに記入しているので、Vue3に対応したコンポーネントを書くことができる。

npx eslint src/**.vue

まとめ

Vue3, Vite, ESLintの環境構築をVisual Studio Codeで行った。ESLintの設定周りはこれからのアップデートに期待である。開発者の皆様を心より応援しております。

参考文献

vitejs/vite: Native-ESM powered web dev build tool. It's fast., 入手先 https://github.com/vitejs/vite
User Guide | eslint-plugin-vue, 入手先 https://eslint.vuejs.org/user-guide/
fix: remove vue/valid-template-root rule from vue3 essentials by AlexandreBonaventure · Pull Request #1188 · vuejs/eslint-plugin-vue, 入手先 https://github.com/vuejs/eslint-plugin-vue/pull/1188