vue serve <vue file>が便利そうだったので使いたいと思ったら、思いのほかトラップがあったのでメモ。
.eslintrc.jsにおいてカスタムパーサを指定するのがキモだった模様。
実際何が必須で何が不要なのかわかってないので後で調べる。
手順
まず最初にnpm install -g @vue/cli @vue/cli-service-globalをインストールしておく。
このままvue serve <vue file>をやっても、おそらくCannot find module 'babel-eslint'とエラーを吐いてしまう。
babel-eslintパッケージがインストールされてないのは分かる。 一方で、ESLintをローカルのままでserveしたい場合が出てこなかった。
ESLintをローカルのままでserveしたい場合、次のようにする。
①最初にnpm i --save-dev eslint babel-eslintでローカルにインストールする。
package.jsonのdevDependenciesに次のとおり記載されていればOK（だと思う）。
// package.json // `vue create`で最初から導入されているパッケージも含む "devDependencies": { "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-babel": "~4.4.0", "@vue/cli-plugin-eslint": "~4.4.0", "@vue/cli-plugin-typescript": "~4.4.0", "@vue/cli-service": "~4.4.0", "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", "typescript": "~3.9.3", }
②.eslintrc.jsに次のとおり追記する
// .eslintrc.js
module.exports = {
root: true,
env: {
node: true
},
'extends': [
'plugin:vue/essential',
'eslint:recommended',
'@vue/typescript/recommended'
],
parser: "vue-eslint-parser", // ←追記
parserOptions: {
parser: "@typescript-eslint/parser", // ←追記
ecmaVersion: 2020
},
...
③vue serve <vue file>でローカル鯖起動できればOK
あとで調べる
カスタムパーサ #とは
