NestJS 기본 설치 시 .eslintrc.js 옵션 알아보기

NestJS를 설치하면 프로젝트 루트에 .eslintrc.js 파일이 생성됩니다. 이 파일은 ESLint의 설정을 정의하며, 코드의 품질과 일관성을 유지하는 데 중요한 역할을 합니다.

.eslintrc.js 파일이란?

ESLint는 JavaScript와 TypeScript 코드에서 잠재적인 문제를 찾아내고 코드 스타일을 강제하는 도구입니다. .eslintrc.js 파일은 ESLint의 설정을 지정하는 파일로, 프로젝트 내에서 코드 규칙을 정의하고 적용할 수 있습니다.

기본 .eslintrc.js 내용

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

각 옵션의 의미

1. parser

• parser: '@typescript-eslint/parser'
  • TypeScript 코드를 분석하기 위해 @typescript-eslint/parser를 사용합니다.

2. parserOptions

• project: 'tsconfig.json'
  • TypeScript 프로젝트의 설정 파일을 지정합니다.
• tsconfigRootDir: __dirname
  • tsconfig.json의 루트 디렉토리를 현재 디렉토리로 설정합니다.
• sourceType: 'module'
  • ECMAScript 모듈을 사용하도록 설정합니다.

3. plugins

• plugins: ['@typescript-eslint/eslint-plugin']
  • ESLint에서 사용할 플러그인 목록입니다. TypeScript 관련 규칙을 사용하기 위해 @typescript-eslint/eslint-plugin을 추가합니다.

4. extends

• 'plugin:@typescript-eslint/recommended'
  • TypeScript ESLint 플러그인의 권장 설정을 적용합니다.
• 'plugin:prettier/recommended'
  • Prettier와 ESLint를 통합하여 코드 포맷팅을 관리합니다.

5. root

• root: true
  • 현재 디렉토리를 ESLint 설정의 루트로 지정합니다.

6. env

• node: true
  • Node.js 전역 변수와 스코프를 허용합니다.
• jest: true
  • Jest 테스트 환경을 지원합니다.

7. ignorePatterns

• ignorePatterns: ['.eslintrc.js']
  • .eslintrc.js 파일은 ESLint의 검사 대상에서 제외합니다.

8. rules

• '@typescript-eslint/interface-name-prefix': 'off'
  • 인터페이스 이름에 접두사(I 등)를 강제하지 않습니다.
• '@typescript-eslint/explicit-function-return-type': 'off'
  • 함수의 반환 타입을 명시적으로 선언하지 않아도 됩니다.
• '@typescript-eslint/explicit-module-boundary-types': 'off'
  • 모듈의 경계에서 타입을 명시적으로 선언하지 않아도 됩니다.
• '@typescript-eslint/no-explicit-any': 'off'
  • any 타입의 사용을 허용합니다.

추가로 알아두면 좋은 옵션들

1. additional plugins

• 'eslint-plugin-import'
  • ES6 import/export 구문을 위한 규칙을 제공합니다.
• 'eslint-plugin-jsx-a11y'
  • JSX에서 접근성 관련 규칙을 제공합니다.

2. additional extends

• 'eslint:recommended'
  • ESLint의 권장 설정을 적용합니다.
• 'plugin:react/recommended'
  • React 프로젝트에서 권장되는 규칙을 적용합니다.

3. custom rules

• 'semi': ['error', 'always']
  • 세미콜론 사용을 강제합니다.
• 'quotes': ['error', 'single']
  • 문자열에 단일 인용부호를 사용하도록 강제합니다.

4. overrides

• 특정 파일이나 디렉토리에 대해 다른 규칙을 적용할 수 있습니다.

overrides: [
  {
    files: ['*.test.ts'],
    rules: {
      '@typescript-eslint/no-unused-expressions': 'off',
    },
  },
],