少し書いてみて、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
最新のコードはこちら → .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', { properties: 'never' }],
+ '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: キャメルケースに統一する。never: オブジェクトの中身は除く
・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)
