2020-06-29

vue serve コマンドとカスタムパーサ設定の話

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

あとで調べる

カスタムパーサ #とは

参考

cli.vuejs.org

igatea.hatenablog.com

github.com

qiita.com

eslint.vuejs.org

2020-06-27

Vueでプロジェクトを初期化したときのメモ

Vue Vuetify

vue create <project-name>でVueプロジェクトを作成したとき、毎回同じところでハマっているのでいい加減手順をメモしておく。

構成は Vue+Firebase、UIにVuetifyを使用する（Vue 4系）。

あと、ついでにFirebase FunctionsではローカルのESLintを有効にする（グローバルインスコしない）。

手順

どうもVueで初期化したプロジェクトフォルダ内でfirebase initすると、Functionsのpackage.jsonとVueのpackage.jsonが競合（nodeモジュールが思ったところにインストールされない）してしまうため、frontendとbackendディレクトリに分けて構成した。

~~package.jsonがnode_moduleを走査するときの動作が影響しているような気がするけど、いまいち分からん。~~

~~…と思って検索したらこうすればよかった件。でもやっぱりめんどそうだな…( ˘ω˘)~~

www.it-swarm.dev

手順少し修正。FunctionsとHostingを同一フォルダにインストールしようとしてたのがいけない…。

Firebase でプロジェクトを作成

Firebase コンソールでプロジェクトを作成する。
FunctionsやStorage等初期化しておく（reagionはasia-northeast1（東京））

あとでindex.htmlに注入するHtmlスニペットはとりあえず脇に置いておく。

ローカルにプロジェクトを作成

前準備として、frontendとbackend/firebaseディレクトリを作成する
frontendディレクトリにて、vue create <project-name>でVueプロジェクトを作成する。このとき、TypeScriptを選択しておく（あとから導入する場合）
tsconfig.jsonにてcompilerOptions.module: "commonjs"とする
とりあえずnpm run buildでビルドできることを確認する（distディレクトリが生成）
vue add vuetifyでVuetifyを導入する。App.vue等書き換えるか聞かれるが、問題なければYesで。
tsconfig.jsonにて、compilerOptions.types: ["vuetify"]を追加する。忘れると型定義を参照できないためコンパイル時にエラー吐く。
backend/firebaseに移動し、firebase initでFirebase プロジェクトを初期化する
Firebase コンソールにて作成したプロジェクトを選択する
とりあえずFirestore~~とHosting~~とFunctionsを選択する。Hostingはfrontendディレクトリで初期化する。
FuncitonsをインストールするときにTSLintを導入するか聞かれるが、現在はESLintに移行しているようなのでNoを選択する
ひととおりインストールが終わったら、frontendディレクトリに移動し、firebase init hostingでホスティングをインストールする
Hostingの設定時にデプロイするディレクトリを聞かれるので、distとする。このとき既存のファイルを上書きするか聞かれるが、Noとする
firebase serveでVuetifyの初期ページが表示されることを確認
backend/firebase/package.jsonにてdevDependenciesにeslintの依存関係を追加し、npm i
./node_modules/.bin/eslint --initでESLintを導入
frontend/public/index.htmlの<body></body>内にFirebaseを利用するためのHtmlスニペットを記載する