少し書いてみて、constの再代入や再定義で警告が出なかったり、インデントのズレやconsole.logに警告が出なかったりしたので、Nuxt.js(Vue)で実装した時と同じになるように調整してみました。
Nuxt BridgeをNuxt3に移行。ESlintを導入

公式によると、デフォルトではこれ(next/core-web-vitals)しか入ってないのですが、この中に色々入っています。
Configuring: ESLint | Next.js

@typescript-eslint/recommended追加

まずは、constの再代入や再定義で警告が出るようにします。
installして、extendsにplugin:@typescript-eslint/recommendedを追加するだけでOKなのですが、序でにjsonをjsに変えます。
これはTypeScriptのなので、jsの場合はeslint:recommendedが必要かなと思いましたが、対象になったので省略しました。
また、parserやparserOptionsも設定しなくても効きました。

% npm install -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintrc.json → 削除

{
  "extends": "next/core-web-vitals"
}

.eslintrc.js

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'next/core-web-vitals',
    'plugin:@typescript-eslint/recommended'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {
  }
}

rootとenvは、Nuxt.jsで設定してたので、なんとなく追加。
https://dev.azure.com/nightonly/_git/nuxt-app-origin?path=/.eslintrc.js

rules追加

Prettierでも実現できそうですが、今の所、必要なさそうなので、ESLintだけで実現します。
rulesは好みの問題ではありますが、今回はNuxt.jsで作成したものに揃えます。

.eslintrc.js

※+のルールを追加しました。

  rules: {
    '@typescript-eslint/no-explicit-any': 'off',
    'indent': ['error', 2],
    'quotes': ['error', 'single'],
    'object-curly-spacing': ['error', 'always'],
+    'comma-spacing': 'error',
    'semi': ['error', 'never'],
    'comma-dangle': 'error',
+    'camelcase': 'error',
+    'curly': 'error',
    'no-extra-parens': 'error',
+    'object-shorthand': 'error',
+    'no-trailing-spaces': 'error',
+    'no-unused-vars': 'off', // Note: you must disable the base rule as it can report incorrect errors
+    '@typescript-eslint/no-unused-vars': ['error', { 'argsIgnorePattern': '^_', 'destructuredArrayIgnorePattern': '^_' }],
    'no-console': 'warn',
    'no-throw-literal': 'error',
    'spaced-comment': 'error',
    'no-lonely-if': 'off'
  }

・no-explicit-any: APIから取得した値等、anyで逃げたい場合があるのでoff
・indent: インデントがズレても通っちゃったので、スペース2つにする
・quotes: '"が混在したくないので、singleで統一
・object-curly-spacing: alwaysで{ a: 1 }のように前後にスペースを入れる
・comma-spacing: カンマの前にスペース入れない。後にスペースを入れる
・semi: neverで;を省略する
・comma-dangle: 好みですが、最後の,を入れると修正時に差分が減るけど、個人的には気持ち悪い
・camelcase: キャメルケースに統一する
・curly: ifの後等、{}で囲む。;を省略した場合あった方が分かり易い
・no-extra-parens: 不要な()を教えてくれる
・object-shorthand: 短縮構文を教えてくれる
・no-trailing-spaces: 末尾の空白を教えてくれる
・no-unused-vars, @typescript-eslint/no-unused-vars: 未使用の変数をを教えてくれる
・no-console: 一時的に入れたconsole.logの消し忘れ防止に役立つ
・no-throw-literal: throwも同様
・spaced-comment: //の後ろにスペース入れた方が綺麗
・no-lonely-if: else if使わずに、elseで改行してifにした方が読みやすい場合もあるのでoff

自動修正

package.json

--fix付けて実行すればいいので、定義しなくても良いですが、追加しておきます。

    "lint": "next lint",
+    "lint:fix": "next lint --fix"
% npm run lint:fix

手動修正

VSCodeで下記の警告が出てたので対応しました。

‘React’ は UMD グローバルを参照していますが、現在のファイルはモジュールです。代わりにインポートを追加することを考慮してください。ts(2686)

クイック修正で下記が追加されます。

src/app/[locale]/layout.tsx, page.tsxなど

+ import React from 'react'

型 ‘unknown’ を型 ‘ReactNode’ に割り当てることはできません。ts(2322)

ここは定義しても良さそうだけど、お手軽にanyで逃げました。

src/components/LocaleSwitcher.tsx

-      {localeObject.map((item) => 
+      {localeObject.map((item: any) => 
         <option key={item[0]} value={item[0]}>
           {item[1]}

型 ‘() => Promise<{ title: string; }>‘ には型 ‘Metadata’ と共通のプロパティがありません。ts(2559)

型定義を入れてみましたがダメでした。

src/app/[locale]/layout.tsx, page.tsxなど

+ import type { Metadata } from 'next'

- export const metadata = async () => {
+ export const metadata: Metadata = async () => {

i18n対応で、returnで返すようにしたのが原因。
動作は問題ないし、ここの型が大事な訳ではないので、anyで逃げる事にしました。

- export const metadata = async () => {
+ export const metadata: any = async () => {

モジュール ‘@/theme’ またはそれに対応する型宣言が見つかりません。ts(2307)

VSCodeを再起動したら解消しました。

ファイルは CommonJS モジュールです。ES モジュールに変換される可能性があります。ts(80001)

クイック修正のDisable @typescript-eslint/no-var-requires for this lineで下記が追加されます。

next.config.js

+ // eslint-disable-next-line @typescript-eslint/no-var-requires
const withNextIntl = require('next-intl/plugin')()

序でに、reactStrictModeに変更

- const nextConfig = {}
+ const nextConfig = {
+   reactStrictMode: true
+ }

module.exports = withNextIntl(nextConfig)

今回のコミット内容

ESLint設定変更、lint修正

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です