靖宗です。
前回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" } ...
babel-eslint
は敢えて取り除きました。
.eslintrc.jsの編集
基本は以前の記事のeslintrcを踏襲します。
vuetifyを入れる際にはpluginとかが必要になってくると思います。
以上で基本的には動く筈。