vueのプロジェクト設定メモ

メモの要略

vue-cliで作ったSingle Page Webアプリのプロジェクト設定でつまづいたところのメモ

環境変数(.envファイル)をvueのプロジェクトで読み込んで使う
Vueファイルに対してESlintとPrettierを設定し、vscodeで使う

前提環境

vue
- vue/cli: 4.5.9
- vue: 2.6.12
eslint: 7.16.0
prettier: 2.2.1

1. 環境変数の読み込みをできるようにする

公式ドキュメント(Modes and Environment Variables | Vue CLI)によると、vue-cliでは.envファイルで定義した環境変数をプロジェクトやpublic/index.html内の埋め込み変数として使えるとのこと。しかし、何が悪いのかはっきりしなかったが、デフォルトでは.envファイルを読み込まなかったので注意として記しておく。

解決策

プロジェクトにdotenv-webpackを追加すること

yarn add -D dotenv-webpack

.envファイルの作り方での注意

公式ドキュメント通り

.envファイル内で定義する変数名はPREFIXとしてVUE_APP_を与え、VUE_APP_SOMETHINGという名前にすること
.envファイルはpackage.jsonと同じ、プロジェクトのルートに置くこと
.envファイルを更新したら開発サーバ(yarn serve)を再起動すること

環境変数の使い方

.envファイルでVUE_APP_SOMETHINGという変数を定義したとして

.js/.vueではprocess.env.VUE_APP_SOMETHINGで参照する
public/index.htmlでは<%= VUE_APP_SOMETHING %>で参照する

参考

vue.js - Vue-cli 3 Environment Variables all undefined - Stack Overflow: 同じような症状にあった方がいる様子。Dylan Nguyenさんがdotenv-webpackのインストールが必要だった旨に言及。

2. Vueファイルに対してESlintとPrettierを設定

2020年11月頃にPrettierのLintとの併用における公式設定が変ったらしいとのことで、Qiitaなどに転がっていた2020年6月頃の情報が古くなっていたことから試行錯誤。

これを読んでいるあなたも一旦公式ドキュメントを確認したほうが良いかも。情報古くなるの早すぎ…。

必要なパッケージ

プロジェクトに追加するものとして

yarn add -D eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier

eslint: 7.16.0
prettier: 2.2.1
eslint-plugin-vue: 7.3.0
eslint-config-prettier: 7.1.0
eslint-plugin-prettier: 3.3.0

VSCodeに追加するものとして

設定ファイル

prettierrcは作らずにeslintrcに含めてしまいました

vscodeのsetting.json

veturを入れている多いのでvalidationを無効にする設定とeslintの有効対象設定. 心を込めた手作業にするためautosaveなどはonにしてない。

{
  "vetur.validation.template": false,
  "eslint.workingDirectories": ["./"],
  "eslint.validate": ["vue", "javascript", "html"]
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es6: true,
  },
  plugins: ['prettier'],
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier',
    'prettier/vue',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
        singleQuote: true,
        semi: false,
      },
    ],
  },
  parserOptions: { parser: 'babel-eslint' },
}