eslint 설정해보기

eslint 설정을 제대로 살펴본 적이 없어서 프로젝트를 시작하기 전에 파악해보려고 한다. 

 

먼저, eslint를 테스트 할 next.js 프로젝트를 생성한다.

npx create-next-app@latest eslint-test-app --typescript
cd eslint-test-app

 

typescript에 대한 커스텀 규칙을 적용하기 위해 다음을 설치해야 한다.

npm install --save-dev @eslint/eslintrc @typescript-eslint/eslint-plugin @typescript-eslint/parser

 

eslint.config.js를 아래와 같이 수정한다.

// eslint.config.js
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
  baseDirectory: __dirname,
});

export default [
  ...compat.extends("next/core-web-vitals", "next/typescript"),

  {
    files: ["**/*.ts", "**/*.tsx"],
    plugins: ["@typescript-eslint"],
    rules: {
      "@typescript-eslint/no-explicit-any": "error", // any 사용 금지
    },
  },
];

 

테스트 코드를 추가해보자.

export default function Home() {
    const data: any = { hello: 'world' }; // eslint 규칙 위반: any 사용
    return <pre>{JSON.stringify(data)}</pre>;
}

 

eslint를 실행해보자.

  npx eslint . // 루트 전체를 대상으로 린트를 돌리면 .next가 포함되어 에러가 수천개가 발생해버렸다.
  
  2:17  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any  
  ...
  ✖ 4371 problems (4322 errors, 49 warnings)
  0 errors and 49 warnings potentially fixable with the `--fix` option.

 

eslint.config.js에 ignores를 추가한다.

import { dirname } from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';

import tsPlugin from '@typescript-eslint/eslint-plugin';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const compat = new FlatCompat({
    baseDirectory: __dirname,
});

const eslintConfig = [
    ...compat.extends('next/core-web-vitals', 'next/typescript'),
    {
        files: ['**/*.ts', '**/*.tsx'],
        plugins: tsPlugin,
        rules: {
            '@typescript-eslint/no-explicit-any': 'error', // any 사용 금지
        },
    },

    {
        ignores: [
            '**/.next/**', // 빌드 디렉토리 무시
            '**/node_modules/**', // 의존성도 무시 (기본적으로 무시되지만 명시해도 OK)
            '**/dist/**', // 혹시 다른 빌드 폴더도 있다면
        ],
    },
];

export default eslintConfig;

 

정상적으로 내가 일부러 설정한 1개의 eslint 에러만 발생했다.

$ npx eslint .

C:\\Users\\USER\\suyeon\\eslint-test-app\\src\\app\\page.tsx
  2:17  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any

✖ 1 problem (1 error, 0 warnings)

 

또한, 배포를 위해 build를 하면 eslint 에러가 발생했었는데, 해당 상황도 재연해볼 수 있었다.

$ npm run build

> eslint-test-app@0.1.0 build
> next build

   ▲ Next.js 15.3.5

   Creating an optimized production build ...
 ✓ Compiled successfully in 8.0s

Failed to compile.

./src/app/page.tsx
2:17  Error: Unexpected any. Specify a different type.  @typescript-eslint/no-explicit-any      

info  - Need to disable some ESLint rules? Learn more here: <https://nextjs.org/docs/app/api-reference/config/eslint#disabling-rules>

 

next.config.js에서 eslint 에러를 무시하고 빌드할 수 있지만, 실제로는 권장되지 않는 방식이기 때문에 eslint도 코드의 품질과 안정성을 위해서 잘 파악하고 개발해야겠다고 생각했다.