Nuxt.jsでTypeScriptが使いたいので、ESLintをいじる

f:id:ysmn_deus:20190820122936p:plain

靖宗です。
前回ESLintを設定したんですが、できればコレからはTypeScript（以下TS）を積極的に利用していきたいと考えています。
なので、TSにあった.eslintrcにしていきます。

Nuxt.jsのプロジェクトのセットアップ

別の記事を参照されたし。

パッケージの導入

TSを利用するのに必要な様々なパッケージを導入します。

yarn add ts-node @nuxt/typescript

もしTSを使うのが初めての人はyarn add typescriptも追加です。グローバルインストールかどうかはお任せしますが、多分グローバルで良いと思います。

tsconfig.jsonの作成

TSの設定ファイル（tsconfig.json）を作成します。
一応コマンドから新規作成します。

tsc --init

内容は実践TypeScriptのものを参考に作成します。

nuxt.config.js → nuxt.config.ts

TSを利用していくのでnuxt.config.jsだけ特別扱いはよくありません。
nuxt.config.tsに名前を変更し、内容を少々変更します。

NuxtConfigurationという型を適応するために一度定数として宣言し、最後にexportしています。
基本的にこれで問題無く動く・・・と思います。

.eslintrc.js

パッケージの追加

nuxt.configはjsからtsにしたんですが、.eslintrc.jsやjest.config.jsはtsに対応してないっぽい（そもそも読み込まない？）みたいなので、しかたなくjsのまま行きます。
（特にロジックを書いていく訳でも無いのでまぁいいでしょう）
まずはパッケージを追加していきます。yarnでインストールしていってもいいですが、色々多いのでpackage.jsonに追記してyarn addするのが良いと思います。

...
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.ts,.vue --ignore-path .gitignore .",
    "fix": "eslint --fix --ext .js,.ts,.vue --ignore-path .gitignore .",
    "test": "jest"
  },
  "dependencies": {
    "@nuxt/typescript": "^2.8.1",
    "@nuxtjs/axios": "^5.3.6",
    "nuxt": "^2.0.0",
    "nuxt-buefy": "^0.3.2",
    "ts-node": "^8.3.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "@typescript-eslint/eslint-plugin": "^2.0.0",
    "@typescript-eslint/parser": "^2.0.0",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-jest": "^24.1.0",
    "eslint": "^6.1.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-loader": "^2.2.1",
    "eslint-plugin-nuxt": ">=0.4.2",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-vue": "^5.2.3",
    "jest": "^24.1.0",
    "node-sass": "^4.12.0",
    "prettier": "^1.16.4",
    "sass-loader": "^7.2.0",
    "vue-eslint-parser": "^6.0.4",
    "vue-jest": "^4.0.0-0"
  }
...