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

### 2019/12/24追記

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

### 2019/7/29追記

 `create-nuxt-app`のバージョンが上がり`Linter / Formatter`の仕様が変更になりました。最新の情報は[こちら](https://qiita.com/amishiro/items/56f4859e930aa10d3806)をご覧ください。

---

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

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

というか、[@nuxtjs/eslint-config](https://github.com/nuxt/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を導入する方法](https://qiita.com/munieru_jp/items/22ad3a5d0919e423b447)

---


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

ただ、初学者には「ESLint」と「Prettier」の両方を覚えるのは混乱を招くようなので、「ESLintのみ」を利用とし、個人的に好きな「[JavaScript Standard Style](https://github.com/standard/eslint-config-standard)」のルール利用方法を記載。

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

## Nuxtをインストール

[公式ドキュメント](https://ja.nuxtjs.org/guide/installation/)を参考に、ESlint込みでNuxt.jsをインストール。
※`prettier`は利用しないので、勢い余って`yes`にしないように注意

```terminal:terminal
$ npx create-nuxt-app

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

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

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

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


```terminal: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',`を追記。

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

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

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

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

- [公式ESlintのルールページ](https://eslint.org/docs/rules/)
- [公式JavaScript Standard Styleのルールページ](https://standardjs.com/rules.html)

```.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`を実行して、エラーが出たら成功。

```console
$ 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 .",
    ...
  },
}
```

動作確認

```console
$ 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)関連の記事一覧

## 技術よりの記事

0. [nuxt.js(v2)のインストール〜ESLint設定まで](https://qiita.com/amishiro/items/9cd8007d46f91c8b5da2)
0. [nuxt.js(v2)の作業ディレクトリを整理](https://qiita.com/amishiro/items/9c31a3a9424de27efe28)
0. [nuxt.js(v2)のベースURLをターミナルからコントロール](https://qiita.com/amishiro/items/7c7af250368083216d8e)
0. [nuxt.js(v2)でpug/stylusを利用する](https://qiita.com/amishiro/items/38fe1b102d7e91a93ada)
0. [nuxt.js(v2)でIE11対応をする（CSS編）](https://qiita.com/amishiro/items/84b14108c749a0a0c966)
0. [nuxt.js(v2)でIE11対応をする（JS編）](https://qiita.com/amishiro/items/db37c6a56ddf7e214144)
0. [nuxt.js(v2)で絶対パス(https~)を取得する方法](https://qiita.com/amishiro/items/9d7ca6b239f604a40424) 
0. [nuxt.js(v2)でSEOに必要なmeta(OGP)を入れたい](https://qiita.com/amishiro/items/b7260116b282d2cf2756)
0. [nuxt.js(v2)でSEOに必要なmeta(OGP)で入力漏れの事故をなくす](https://qiita.com/amishiro/items/77e3c2546fa63cc69a62)

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

0. [nuxt.js(v2)で便利なvue-mqを使ってみるがSSRモードでコンソールエラーがでるので確認してみた。](https://qiita.com/amishiro/items/f2e302fedf03c3d0f79e)
0. [nuxt-linkでスムーズスクロールするならvue-scrolltoが便利で気が利いている…と思う。](https://qiita.com/amishiro/items/f70aca4797cd57bc51b5)
0. [nuxt.jsでパララックスをするならvue-parallax-jsがお手軽。Cool!](https://qiita.com/amishiro/items/ccca406a9bda1863ab01)

## まとめ系

0. [nuxt.js(v2)でgenerate納品する前にやっておきたい設定](https://qiita.com/amishiro/items/11bd642728f6b5838189)
0. [nuxt.jsにおける「components」ディレクトリの規約（案）](https://qiita.com/amishiro/items/c7493f5e9375a0609bdc)