Nuxt v2.9.2でTypeScript, eslint, Prettier環境構築 + VSCodeの設定(20190921tailwind.css導入追記) #JavaScript

20190921 tailwind.css導入追記
20190921 plugin:nuxt/recommendedについて追記

はじめに

今までNuxtは使ってきたものNuxt+TypeScriptは導入したことがなかったので導入してみました。
意外と環境構築で手間取ったので、備忘録として残しておきたいと思います。

想定

Nuxtは使っていたけど、TypeScriptは入れてなかった人
Nuxt以外でTypaScriptは使っていて、TypeScript自体は書いている人

開発環境

Nuxt 2.9.2
node 12.6.0
TypeScript 3.5.3

Nuxtのインストール

まずは公式に沿ってNuxtをインストールをしていきます。
公式インストール手順

yarn create nuxt-app test

プロジェクトの作成

いくつか質問されますが今回は以下のような形でプロジェクトを作成しました。

Project name: test
Project description ]: My super-duper Nuxt.js project
Author name: test
Choose the package manager : yarn
Choose UI framework : None
Choose custom server framework : None
Choose Nuxt.js modules : 選択しない
Choose linting tools : Prettier
Choose test framework : None
Choose rendering mode : Universal (SSR)
Choose development tools : 選択しない

最低限の環境で動作を確認

ここまででとりあえず最低限の動く状態が作成されたはずです。
まずはこの状態で動くことを確認します。

cd test
yarn dev

上記をターミナルで叩くと他にローカルで立ち上げているアプリケーションがなければ、以下のアドレスで動作しているはずです。

localhost:3000

TypeScriptの導入

この環境にTypeScriptを入れていきます。

ちなみにNuxtに関してはTypeScriptの導入方法がバージョンが上がるたびに変わっていて
ネットの記事を見ても、最新のものと昔のものでインストール方法が異なるようです。

現時点(2019年9月)でNuxt公式からNuxtでのTypeScriptの運用に関して公式のドキュメントを出しているのでそれを参考にインストールしていきます。

Nuxt TypeScript

インストール

公式のインストールページを参考にTypeScriptを入れていきます。

Setup

yarn add --dev @nuxt/typescript-build

上記をインストール後nuxt.config.jsに以下を追記します。

nuxt.config.js

export default {
  buildModules: [
    '@nuxt/typescript-build' // ←追記
  ]
}

tsconfig.jsonを作成します。

touch tsconfig.json

tsconfig.jsonの中身は公式に記載がある内容をそのまま記載します。

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": [
      "esnext",
      "esnext.asynciterable",
      "dom"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@types/node",
      "@nuxt/types"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

index.vueをTypeScriptに書き換え

ここまで入れたらindex.vueをTypeScriptに変えて動作するか確認します。

他のPJでクラスベースでの書き方をしていたため、今回もクラスベースで記載していきます。
まずはvue-class-componentを使用するためにvue-property-decoratorをインストールします。

yarn add vue-property-decorator

変更前

index.vue

<template>
  <section class="container">
    <div>
      <logo />
      <h1 class="title">test</h1>
      <h2 class="subtitle">My awesome Nuxt.js project</h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green">Documentation</a>
        <a href="https://github.com/nuxt/nuxt.js" target="_blank" class="button--grey">GitHub</a>
      </div>
    </div>
  </section>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo
  }
}
</script>

↓↓↓↓↓　変更　↓↓↓↓↓

index.vue

<template>
  <section class="container">
    <div>
      <logo />
      <h1 class="title">test</h1>
      <h2 class="subtitle">My awesome Nuxt.js project</h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green"
          >Documentation</a
        >
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
          >GitHub</a
        >
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  components: {
    Logo: () => import("~/components/Logo.vue")
  }
})
export default class Index extends Vue {}
</script>

ここまで動作を確認します。

localhost:3000
無事動作していれば導入までは完了です。

eslintの導入

TypeScriptを書く際にもやはりlinter入れておきたいですよね。
ということでeslintを入れていきます。
これもNuxtTypeScriptの公式に記載があります。

All you need is to install @nuxtjs/eslint-config-typescript:

とのことなので、これを入れていきます。

yarn add -D @nuxtjs/eslint-config-typescript

※20191019 以下ご指摘いただき修正いたしました！

.eslintrc.jsの作成

eslintの設定ファイル(.eslintrc.js)を作成します。

touch .eslintrc.js

下記を.eslintrc.jsに記載します。

.eslintrc.js

module.exports = {
  extends: [
    '@nuxtjs/eslint-config-typescript'
  ]
}

package.jsonのscriptに以下を追加します。

package.json

"lint": "eslint --ext .ts,.js,.vue ."

ここでlintが通るか試して見たいと思います。

yarn lint

もしeslint: command not foundのエラーが出た場合は、
yarn add eslintでインストールしてから試して見てください。

$ eslint --ext .ts,.js,.vue .
✨  Done in 1.75s.

コンソールに上記のように出れば問題なく動作しています。

linter with Webpack

この時点だと単にeslintをコマンド経由で叩かないといけないので、
保存時に都度チェックがかかるようにしていきます。

nuxt.config.jsのbuildに以下を追加します。

nuxt.config.js

  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
    }
  },

ここで以下のようなエラーが発生することがあります。

ERROR in multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
Module not found: Error: Can't resolve 'eslint-loader' in '/Users/nakama/Documents/workspace/private/test'

これはeslint-loaderをインストールしていなかったためにおきている状態なので、eslint-loaderとeslintそのものをinstallします。

yarn add eslint-loader eslint --save-dev

.eslintrcの変更

eslintの設定ファイル(.eslintrc)を変更します。

設定を作成する前に先ほどextendsに追加した、@nuxtjs/eslint-config-typescriptの中身を確認しておきます。

@nuxtjs/eslint-config-typescript/index.js


module.exports = {
  extends: [
    '@nuxtjs'
  ],
  plugins: ['@typescript-eslint'],
  parserOptions: {
    parser: '@typescript-eslint/parser'
  },
  rules: {
    '@typescript-eslint/no-unused-vars': ['error', { args: 'all', argsIgnorePattern: '^_' }]
  }
}

中を見て見ると、予想以上に中身は少ない印象です。
今までparserOptionsやpluginsに入れていたものが入っています。
この辺りに記載があるものに関しては、あえて.eslintrcで再度記載する必要はなさそうです。

上記の内容とNuxtの公式を参考にして最終的に以下の通りとしました。

Nuxt-開発ツール

.eslintrc.js

module.exports = {
    root: true,
    env: {
        browser: true,
        node: true
    },
    extends: [
        '@nuxtjs/eslint-config-typescript',
        'plugin:prettier/recommended',
        'prettier',
        'prettier/vue'
    ],
    plugins: [
        'vue'
    ],
    rules: {
        'vue/html-closing-bracket-newline': 'off',
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'space-before-function-paren': 0
    }
};

ちなみに'plugin:nuxt/recommended'を入れるとエラーで止まるので、外しています。

Module build failed (from ./node_modules/eslint-loader/dist/cjs.js):
TypeError: Cannot read property 'forEach' of undefined
    at Linter.parseResults (/Users/nakama/Documents/workspace/private/test3/node_modules/eslint-loader/dist/Linter.js:121:13)
    at Linter.printOutput (/Users/nakama/Documents/workspace/private/test3/node_modules/eslint-loader/dist/Linter.js:85:26)
    at Object.loader (/Users/nakama/Documents/workspace/private/test3/node_modules/eslint-loader/dist/index.js:26:10)

解決次第追記します。

20190921追記
上記に関しては単にeslint-plugin-nuxtが入っていない事に起因していました。
ですので、以下のコマンドで該当のプラグインを入れればエラーは解消します。

yarn add eslint-plugin-nuxt --save-dev

変更時にlintが走るかどうか確認

ここでindex.vueを一部変更して、lintが走るか確認して見ます。

index.vue

<template>
  <section class="container">
    <div>
      <logo />
      <h1 class="title">test</h1>
      <h2 class="subtitle">My awesome Nuxt.js project</h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green"
          >Documentation</a
        >
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
          >GitHub</a
        >
      </div>
    </div>
  </section>
</template>

↓↓↓↓↓変更↓↓↓↓↓

index.vue

<template>
  <section class="container">
    <div>
      <logo />
      <h1 class="title">test</h1>
      <h2 class="subtitle">My awesome Nuxt.js project</h2>
      <div class="links">
        <a href="https://nuxtjs.org/" target="_blank" class="button--green"
          >Documentation</a
        >


        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey"
          >GitHub</a
        >
      </div>
    </div>
  </section>
</template>

以下のようなエラーがコンソール上に出れば問題なく動作しています。

/test/pages/index.vue
  12:9  error  Delete `⏎········`  prettier/prettier

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

linter + Prettier with VSCode

個人的にTypeScript書くならVSCodeで書くのが一番楽だと感じています。
そこでVSCodeでlinterとPrettierによる自動整形まで行いたいと思います。

ちなみにPrettierに限らずフォーマットをするためにeditor.formatOnSaveをtrueにしている人もいるかと思いますが、今回の構成だとVSCodeデフォのフォーマッタが邪魔をすることがあるのでeditor.formatOnSaveはfalseに設定しておきます。
もちろんこのプロジェクトのワークスペース内だけで構いません。

VSCodeのプラグインの導入

あらかじめプラグインとしてeslintとveturを入れておきます。
インストールの方法や詳細は割愛します。

settings.jsonの設定

VSCcodeのsettings.jsonに以下の設定を追加します。

settings.json

{
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "javascript",
      "autoFix": true
    },
    {
      "language": "javascriptreact",
      "autoFix": true
    }
  ],
  "eslint.autoFixOnSave": true,
  "editor.formatOnSave": false,
  "vetur.validation.template": false
}

先ほどと同じようにして、index.vueを変更してみて今度は自動整形されて、エラーが出なければ正常に動作しています。

tailwind.cssの導入(20190921追記)

tailwindのmodule版のインストールを行います。

1.インストール

yarn add @nuxtjs/tailwindcss --save-dev

2.nuxt.config.jsに追記

nuxt.config.js

devModules: [
  '@nuxtjs/tailwindcss'
]

3.yarn devを実行して、tailwind.config.jsとassets/css/tailwind.cssが生成されることを確認

4.index.vueにボタンを追加

<button
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full"
>
  tailwind Button
</button>

(おまけ)Veturのバグか?うまく変換されないことがある。

なぜかうまく変換されない事象が発生することがある、、、。

後述するISSUEから抜粋するとこんな感じ

これが

    <li>
      <a href="https://vuejs.org"
target="_blank">Core Docs</a>
    </li>

こうなって

    <li>
      <a href="https://vuejs.org" target="_blank">Core Docs</a>
    </li>

こうなる

    <li>
      <a href="https://vuejs.org"
target="_blank">Core Docs</a>
    </li>

初めどこが原因かよくわからなかったんですが、veturの公式に似たようなISSUEが上がってました。

The right way to setup vscode vetur eslint prettier

最後のレスを見ると以下のような言及が。

But then how do you do 'auto fix on save' if you turn it off.
しかし、それをオフにした場合、「保存時に自動修正」を行うにはどうすればよいですか。

Feel free to turn it on for wrong autofixes, which I'm not responsible for.
間違った自動修正については、お気軽に有効にしてください。私は責任を負いません。

ちなみにこのやり取りの前に以下のようなやりとりがあった。

eslint.autoFixOnSaveをオフにすると、フォーマットの問題はなくなります。これらの「自動修正」のソースはeslint-plugin-vueに由来し、ほとんどの場合間違っています。

特定のパターンでしか発生しないので一旦放置しています。
解決策をご存知の方がいましたらぜひご教授できますと幸いです。

最後に

最後まで読んでくださりありがとうございました。

フロントエンドだとプロダクト作成前に環境を整えるのが一番つらいのはよくある気もしますが、今回は久々にハマりました。
何しろNuxtのTypeScript環境に関しては、バージョンが変わるたびにインストール方法が変わるのこと、eslintとprettierの登場人物が多すぎることに起因している気がします。
ネット上の記事に関しても、公式でもバージョンや作成日時によって内容がガラッと変わっていたりします。

本来もう少し楽なやり方もあるかもしれませんが、とりあえず現段階ではこれで進めていきたいと思います。