Nuxt.js 2.x + TypeScript 4.x その0002 ファイルを保存したときに自動整形する

参考にさせていただいたページ

Nuxtのeslintについて

• GitHub - nuxt-community/eslint-module: ESLint module for Nuxt.js

TSのランタイムlintについて

• Lint - Nuxt TypeScript

今日の開発環境

• Nuxt 2.14.12
• TypeScript 4.2.3

前提

npx create-nuxt-appしたときに、「Linting tools:」の項目から「ESLint, Prettier」を選択しました。

使用するモジュール

JSの場合もTSの場合も @nuxtjs/eslint-module を使用します。

JSで開発している場合のSetup

「GitHub - nuxt-community/eslint-module: ESLint module for Nuxt.js」の Setup を見ました。

nuxt.config.jsの

  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
  ],

となっている箇所を

  buildModules: [
    // https://go.nuxtjs.dev/eslint
    ['@nuxtjs/eslint-module', { fix: true }],
  ],

にしました。

公式ページの最新情報を見ていただくのが一番良いと思います。

TSで開発している場合のSetup

「GitHub - nuxt-community/eslint-module: ESLint module for Nuxt.js」の Setup を見ました。

nuxt.config.jsに以下のようにtypescript.typeCheck.eslintの設定を追記します。

export default {
  〜略〜
  typescript: {
    typeCheck: {
      eslint: {
        files: './**/*.{ts,js,vue}',
      },
    },
  },
  〜略〜
}

同じくnuxt.config.jsの

  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
  ],

となっている箇所を

  buildModules: [
    // https://go.nuxtjs.dev/typescript
    '@nuxt/typescript-build',
    ['@nuxtjs/eslint-module', { fix: true }],
  ],

にしました。

公式ページの最新情報を見ていただくのが一番良いと思います。