LoginSignup
4

More than 3 years have passed since last update.

posted at

updated at

nuxtプロジェクトに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
image.png

1501 problemsが発見されたらしい

>yarn run lintfix
image.png

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

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

一行だけ無効にする

 // eslint-disable-line

複数行の無効

 /* eslint-disable */

 /* eslint-enable */

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
4