Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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)では、ESLintPrettierの依存関係を初回インストールできるようになった。素晴らしい。

ただ、初学者には「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 Stylestandardルールを利用。

「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'
  }
}

動作確認その1

とりあえず、適当な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)関連の記事一覧

技術よりの記事

  1. nuxt.js(v2)のインストール〜ESLint設定まで
  2. nuxt.js(v2)の作業ディレクトリを整理
  3. nuxt.js(v2)のベースURLをターミナルからコントロール
  4. nuxt.js(v2)でpug/stylusを利用する
  5. nuxt.js(v2)でIE11対応をする(CSS編)
  6. nuxt.js(v2)でIE11対応をする(JS編)
  7. nuxt.js(v2)で絶対パス(https~)を取得する方法
  8. nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい
  9. nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす

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

  1. nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。
  2. nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。
  3. nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!

まとめ系

  1. nuxt.js(v2)でgenerate納品する前にやっておきたい設定
  2. nuxt.jsにおける「components」ディレクトリの規約(案)
amishiro
5年近く作っていた自作テンプレートから離れて、最近はnuxtで開発してる。フロントエンドの未来は明るい。寂しいのでフォロープリーズ。
https://amiten.co.jp/
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