More than 3 years have passed since last update.

nuxt.js(v2)のインストール〜ESLint設定まで

Last updated at 2019-12-24Posted at 2018-11-20

2019/12/24追記

こちらの情報は古いので、削除予定です。

2019/7/29追記

create-nuxt-appのバージョンが上がりLinter / Formatterの仕様が変更になりました。最新の情報はこちらをご覧ください。

注意　Nuxt.js(v2.3.4)から、Linterの設定が自動化！？

Nuxt.js(v2.3.4)から、Nuxtのインストール時にLinter / Formatterを選ぶことで、JavaScript Standard Styleがディフォルトで設定されるようになりました。

というか、@nuxtjs/eslint-config経由で、JavaScript Standard StyleやVueファイルなどを始めとした、Nuxt.jsに必要なLinterがディフォルトで入いることで、より強力Linter/Formatterを何も設定せずに使えるようになっています。（まだ、ざっくりとしか見てませんが…すごい。）

（2019/1/22加筆）

注意　以下は、Nuxt.js(v2.3.4)未満を利用した場合の設定。

本記事でやりたかったことが、ほぼ以下記事に記載されていましたので、参考にしつつ自分用に加筆した内容となっています。
↓
Nuxt.jsのプロジェクトにESLint + JavaScript Standard Styleを導入する方法

nuxt.js(v2)では、ESLintとPrettierの依存関係を初回インストールできるようになった。素晴らしい。

ただ、初学者には「ESLint」と「Prettier」の両方を覚えるのは混乱を招くようなので、「ESLintのみ」を利用とし、個人的に好きな「JavaScript Standard Style」のルール利用方法を記載。

~~コアな開発でなければ、EsLintのみで十分でしょ。~~

Nuxtをインストール

公式ドキュメントを参考に、ESlint込みでNuxt.jsをインストール。
※prettierは利用しないので、勢い余ってyesにしないように注意

terminal

$ npx create-nuxt-app

// ESLintのみ使用したいため以下設定（他はご自由に）
? Use eslint yes
? Use prettier no

JavaScript Standard Styleのnpmパッケージをインストール

ディフォルトで使用(追加でnpmパッケージインストールせずに使用)できるeslint:recommendedルールはチェックがゆるいので、JavaScript Standard Styleのstandardルールを利用。

~~「standard」とか「王道」とかの響きに弱い。~~

terminal

$ npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node

参考：https://github.com/standard/eslint-config-standard#usage

.eslintrc.jsを修正

nuxt.jsインストール時に「? Use eslint」で「yes」を選択していると、自動で.eslintrc.jsファイルが生成される。そこに'standard',を追記。

.eslintrc.js

module.exports = {
  extends: [
    'standard', // <- 追記
    'plugin:vue/recommended'
  ],
  ...
}

好みに合わせてルールを追加

個人的にはcomma-dangleの修正のみで良いと思う。（diff時に「,」をつけたり消したりが目に引っかかってチェックに集中できないので。）

他にも、追加したければ、以下を参考に加筆修正

.eslintrc.js

module.exports = {
  rules: {
    'comma-dangle': ['error', 'only-multiline'], // <-追加
    ...
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
  }
}

動作確認その１

とりあえず、適当なscriptを記載

pages/index.vue

<script>
// ...
export default {
  data() {
    return {
      object: {
        a:1,
        b: 2,
      },
      ary: [1, 2,],
    }
},
    mounted () {
const x = 1
        if (x === 1) {
      console.log('test')
}
  }
}
</script>

$ npm run lintを実行して、エラーが出たら成功。

$ npm run lint

↓

/Users/yorname/project/pages/index.vue
  32:7   error  Missing space before function parentheses     space-before-function-paren
  35:11  error  Missing space before value for key 'a'        key-spacing
  38:17  error  Unexpected trailing comma                     comma-dangle
  38:17  error  A space is required after ','                 comma-spacing
  40:1   error  Expected indentation of 2 spaces but found 0  indent
  41:1   error  Expected indentation of 2 spaces but found 4  indent
  42:1   error  Expected indentation of 4 spaces but found 0  indent
  43:1   error  Expected indentation of 4 spaces but found 8  indent
  45:1   error  Expected indentation of 4 spaces but found 0  indent

✖ 9 problems (9 errors, 0 warnings)
  9 errors and 0 warnings potentially fixable with the `--fix` option.

自動整形ができるようにする。

package.jsonに以下追記

package.json

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

動作確認

$ npm run lintfix

$ npm run lintfixを実行して、整形されたら成功。

pages/index.vue

<script>
// ...
export default {
  components: {
    Logo
  },
  data () {
    return {
      object: {
        a: 1,
        b: 2,
      },
      ary: [1, 2],
    }
  },
  mounted () {
    const x = 1
    if (x === 1) {
      console.log('test')
    }
  }
}
</script>

よしよし。美しい。

Link

以下、公開中のnuxt.js(v2)関連の記事一覧

技術よりの記事

よく使うプラグインのお話

まとめ系

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up