Vue.js用のESLint環境を用意する方法

Ⅰ. はじめに

タイトルの通り「Vue.js用のESLint環境を用意する方法」です。

※Laravelを利用している場合はこちらの方法を推奨します。
https://kagasu.hatenablog.com/entry/2018/05/19/201521

Ⅱ. やり方

1. 必要なパッケージをインストールする

npm install -g eslint
npm install -g eslint-plugin-vue
npm install -g eslint-config-standard
npm install -g eslint-plugin-import
npm install -g eslint-plugin-node
npm install -g eslint-plugin-promise
npm install -g eslint-plugin-standard

2. .eslintrc.jsを作成する

// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parserOptions: {
    parser: 'babel-eslint'
  },
  env: {
    browser: true,
  },
  extends: [
    'plugin:vue/essential', 
    'standard' // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  ],
  // required to lint *.vue files
  plugins: [
    'vue'
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    'generator-star-spacing': 'off'
  }
}

3. ESLint を実行する

eslint resources/assets/js/**

実行結果