nuxtプロジェクトにESLint導入

前提

• 動作確認環境
  • Windows10, VSCode
  • Node v8.11.3
• 参考
• Nuxt公式　ガイド>開発ツール＞ESLint
• [Qiita] Nuxt.js + TypeScript + Sass + ESLint 事始め

Install and Set up

install Package

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

.eslintrc.jsの作成

プロジェクトのルートに追加

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    mocha:true,
  },
  parserOptions: {
    parser: 'babel-eslint'
  },
  extends: [
    "eslint:recommended",
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // より厳しいルールにするには`plugin:vue/strongly-recommended` もしくは `plugin:vue/recommended` に切り替えることを検討してください。
    "plugin:vue/recommended",
    "plugin:prettier/recommended"
  ],
  // *.vue ファイルを lint にかけるために必要
  plugins: [
    'vue'
  ],
  // ここにカスタムルールを追加します。
  rules: {
    "semi": [2, "never"],
    "no-console": "off",
    "vue/max-attributes-per-line": "off",
    "prettier/prettier": ["error", { "semi": false }]
  }
}

package.jsonにコマンドを追加

package.json

"scripts": {
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
  "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore ."
}

lint , lintfix実行テスト

>yarn run lint

1501 problemsが発見されたらしい

>yarn run lintfix

ソースが沢山修正されて、83 problemsだけ残った

チェックを無効にする方法

一行だけ無効にする

 // eslint-disable-line

複数行の無効

 /* eslint-disable */

 /* eslint-enable */