Web 系 Nuxt.js

Nuxt 2.10↑ + TypeScirpt + ESLint + Prettier + VSCode 環境構築(2020/01/17)

09/22/2019
Nuxt 2.10↑ + TypeScirpt + ESLint + Prettier + VSCode 環境構築(2020/01/17)-thumbnail-thumbnail Nuxt 2.10↑ + TypeScirpt + ESLint + Prettier + VSCode 環境構築(2020/01/17)-thumbnail-thumbnail

はじめに

2019/09/20 執筆

Nuxt + TypeScript の環境構築記事です。

  • Nuxt
    • v2.10.0 ~ v2.14.0 あたりが対象です(v2.15.0 は未確認です)
  • 筆者の環境
    • Windows
    • VisualStudioCode (VSCode)

Nuxt TypeScript 公式 も参照して、比較しながら読んで頂けると幸いです

やることまとめ

1. 下記コマンド実行

yarn create nuxt-app # ESLint, Prettier を選択(その他のオプションは自由です)

yarn add -D @nuxt/typescript-build @nuxtjs/eslint-config-typescript
yarn add nuxt @nuxt/typescript-runtime
yarn remove @nuxtjs/eslint-config
npm init create nuxt-app # ESLint, Prettier を選択(その他のオプションは自由です)

npm install --sav-dev @nuxt/typescript-build @nuxtjs/eslint-config-typescript
npm install --save nuxt @nuxt/typescript-runtime
npm remove @nuxtjs/eslint-config

2. nuxt.config.jsnuxt.config.ts にリネーム

3. nuxt.config.ts の内容を以下の通りに設定

- export default {
+ import { Configuration } from '@nuxt/types'
+ const config: Configuration = {

  // ...(中略)

  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
-   '@nuxtjs/eslint-module'
+   '@nuxtjs/eslint-module',
+   '@nuxt/typescript-build'
  ],

  // ...(中略)
  build: {
-   /*
-    ** You can extend webpack config here
-    */
-   extend(config, ctx){} // extend オプションが必要であれば残してください
  }
}

+ export default config
import { Configuration } from '@nuxt/types'
const config: Configuration = {
  // ...(中略)

  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxt/typescript-build',
  ],

  // ...(中略)

  build: {},
}

export default config

4. tsconfig.json作成(内容は以下)

tsconfig.json
{
  "compilerOptions": {
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["esnext", "esnext.asynciterable", "dom"],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "typeRoots": ["/types"],
    "types": ["@types/node", "@nuxt/types"] // Axios を使うのであれば、"@nuxtjs/axios" も追加
  },
  "exclude": ["node_modules"]
}

5. package.jsonscripts を以下の通りに修正

// ...(略)
  "scripts": {
-   "dev": "nuxt",
-   "build": "nuxt build",
-   "start": "nuxt start",
-   "generate": "nuxt generate",
-   "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
+   "dev": "nuxt-ts",
+   "build": "nuxt-ts build",
+   "start": "nuxt-ts start",
+   "generate": "nuxt-ts generate",
+   "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
  },
// ...(略)
// ...(略)
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
  },
// ...(略)

6. .eslintrc.js に一文追加

// ...(略)
  extends: [
    '@nuxtjs',
+   '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
// ...(略)
// ...(略)
  extends: [
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
// ...(略)

7. VSCode のワークスペース設定を以下の通りに設定

.vscode/settings.json
{
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.enable": true,
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    }
  ],
  "eslint.run": "onType",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.validation.style": true,
  "vetur.validation.template": true
}

手順解説

Create Nuxt App

まずは Create Nuxt App します(詳しくは学びたい方は → インストール - Nuxt.js

yarn create nuxt-app env-nuxt-typescript
npm init nuxt-app env-nuxt-typescript
? Project name env-nuxt-typescript
? Project description My excellent Nuxt.js project
? Author name 自由
? Choose the package manager 自由(Yarn がおすすめ)
? Choose UI framework 自由
? Choose custom server framework 自由
? Choose Nuxt.js modules 自由
? Choose linting tools
 (*) ESLint ← チェック付けます
 (*) Prettier ← チェック付けます
 ( ) Lint staged files ← これは自由
? Choose test framework 自由
? Choose rendering mode 自由
? Choose development tools 自由

インストールオプションでは、 ESLint, Prettier を選択してください(後に VSCode + ESLint + Prettier の設定紹介があります;不要な方はスルーしてください)。

その他のオプションは自由です。

TypeScript の設定

パッケージインストール

yarn add -D @nuxt/typescript-build @nuxtjs/eslint-config-typescript
yarn add @nuxt/typescript-runtime
npm install --sav-dev @nuxt/typescript-build @nuxtjs/eslint-config-typescript
npm install --save @nuxt/typescript-runtime

@nuxt/typescript-build および @nuxt/typescript-runtime は、Nuxt 2.9 以上でのみ使用できます

nuxt.config.ts

nuxt.config.jsnuxt.config.ts に拡張子変更し、以下ように内容を修正します。

- export default {
+ import { Configuration } from '@nuxt/types'
+ const config: Configuration = {

  // ...(中略)

  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
-   '@nuxtjs/eslint-module'
+   '@nuxtjs/eslint-module',
+   '@nuxt/typescript-build'
  ],

  // ...(中略)

}

+ export default config
import { Configuration } from '@nuxt/types'
const config: Configuration = {
  // ...(中略)

  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    '@nuxt/typescript-build',
  ],

  // ...(中略)
}

export default config

tsconfig.json

以下のとおり、tsconfig.jsonを作成します。

(設定内容について詳しく知りたい方は → tsconfig 日本語訳

tsconfig.json
{
  "compilerOptions": {
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["esnext", "esnext.asynciterable", "dom"],
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": false,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "typeRoots": ["/types"],
    "types": ["@types/node", "@nuxt/types"] // Axios を使うのであれば、"@nuxtjs/axios" も追加
  },
  "exclude": ["node_modules"]
}

package.json

package.jsonscripts を、Nuxt TypeScript 用に修正します。

  • nuxtnuxt-ts に変更
  • "lint" で指定する拡張子に、.ts を追加
// ...(略)
  "scripts": {
-   "dev": "nuxt",
-   "build": "nuxt build",
-   "start": "nuxt start",
-   "generate": "nuxt generate",
-   "lint": "eslint --ext .js,.vue --ignore-path .gitignore ."
+   "dev": "nuxt-ts",
+   "build": "nuxt-ts build",
+   "start": "nuxt-ts start",
+   "generate": "nuxt-ts generate",
+   "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
  },
// ...(略)
// ...(略)
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore ."
  },
// ...(略)

ESLint の設定

パッケージインストール

yarn add -D @nuxtjs/eslint-config-typescript
yarn remove @nuxtjs/eslint-config
npm install --save-dev @nuxtjs/eslint-config-typescript
npm remove @nuxtjs/eslint-config

Nuxt TypeScript ドキュメントによると、@nuxtjs/eslint-config@nuxtjs/eslint-config-typescript に含まれているため、不要だとのことです。

.eslintrc.js

.eslintrc.js に一文追加します。

// ...(略)
  extends: [
    '@nuxtjs',
+   '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
// ...(略)
// ...(略)
  extends: [
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'prettier',
    'prettier/vue',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
// ...(略)

nuxt.config.ts

nuxt.config.tsbuild の中身を空にします。 extend(config, ctx){} という記述が、@typescript-eslint/no-unused-vars でエラーとなるためです。

nuxt.config.ts
  // ...(略)
  build: {
-   /*
-    ** You can extend webpack config here
-    */
-   extend(config, ctx){}
  }
  // ...(略)

VSCode の設定

VSCode にて、保存時に Prettier によるフォーマットが走るように設定します。

.vscode フォルダを作成し、その中に setting.json を作成します。

setting.json
{
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
  "eslint.enable": true,
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "vue",
      "autoFix": true
    },
    {
      "language": "vue-html",
      "autoFix": true
    }
  ],
  "eslint.run": "onType",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.ts": "prettier",
  "vetur.validation.style": true,
  "vetur.validation.template": true
}

参考記事

Nuxt + TypeScript

TypeScript