4
Help us understand the problem. What are the problem?

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 */
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?