Vue.jsをさわってみた際に、Vue.js公式のWebpack用ボイラープレートを使って環境構築しようと思ったら、結構つまづいたので記録として残しておきます。

Eslintでめちゃめちゃコケる

1.ESLintの設定ファイルが最新のルールに対応してない

こちらを参考に、ルールを修正してください。 keyword-spacingとかその辺りです。

2.babel-eslintのバグに遭遇する

詳細はこちら

現状の最新版6.0.0-beta.6では解決されているようなので、手動でバージョン指定して入れなおしました。

3.デフォルトでなぜかeslint-plugin-htmlをかませてないので、.vueファイルをlintできない

.vueファイルに対してlintをかけるには、eslint-plugin-htmlを通して読み込む必要があります。 .eslintrcにプラグインを読み込むよう書きます。（デフォルトで書いておいて欲しい…）

以上を踏まえて

.eslintrc.jsをeslint-loaderで読み込ませて、環境によってlintのルール変えたりしているようなのですが、Atomなど各エディターのESLintプラグインではJSでの設定ファイルを読めずエラー表示が毎回出て面倒だったので、シンプルに.eslintrcを読むようにしました。

以上の問題を解決するとこんな感じになりました。

.eslintrc

{
  'root': true,
  'parser': 'babel-eslint',
  'plugins': [
    'html'
  ],
  'env': {
    'es6': true,
    'browser': true,
    'node': true
  },
  'parserOptions': {
    'ecmaVersion': 6,
    'sourceType': 'module',
    'ecmaFeatures': {
      'jsx': false
    }
  },
  'rules': {...}
}

webpack.base.conf.js

eslint: {
  configFile: './.eslintrc',
  formatter: require('eslint-friendly-formatter')
}

ちなみに、Babelを使う際にESLint標準のパーサーだと対応しきれていないようなので、babel-eslintをパーサーに指定しています。

その他

Vuexとvue-routerを併用する時

Vue.js用のFluxライブラリVuexと、ルーターvue-routerを併用しようとするとき、少し問題があったのですが、vuex-router-syncなるもので簡単に解決できたので念のため書いておきます。

問題というのは、vue-routerでVueインスタンスを生成するときに、Vuexで作ったStoreを読み込むことができません。(無理矢理できなくはなかったのですが、あんまり綺麗な解決法ではなかった)

そこで、vuex-router-syncを使うと以下のように書けます。

main.js

import Vue from 'vue'
import { sync } from 'vuex-router-sync'
import Router from 'vue-router'
import App from './App'
import List from './components/List'
import store from './store/'

// debug mode
Vue.config.debug = true

// install router
Vue.use(Router)

// routing
let router = new Router()

router.map({
  '/': {
    component: List
  }
})

// vuex-router-sync
sync(store, router)

// start router
router.start(App, '#app')

やっとコードが書ける〜〜〜

おわり🐶