[JS] ESLint와 TypeScript 설정에서 ES 버전 차이

 

프로젝트에서 tsconfig.json과 ESLint 설정 파일(.eslintrc.js 또는 index.js)을 설정하다 보면, ES 버전이 서로 다르게 설정된 것을 발견할 수 있다. 예를 들어, TypeScript의 tsconfig.json에서 target을 ES2020으로 설정했지만, ESLint에서는 env 옵션이 es6로 설정되어 있을 수 있다.

TypeScript와 ESLint는 각각 다른 목적을 위해 ES 버전을 설정하지만, 프로젝트의 일관성을 위해 이 둘을 맞춰주는 것이 좋다. TypeScript의 target과 ESLint의 parserOptions.ecmaVersion을 동일한 ECMAScript 버전으로 설정하면, 최신 자바스크립트 기능을 사용하면서도 일관된 코드 스타일을 유지할 수 있다.

 

TypeScript와 ESLint의 역할

먼저, TypeScript와 ESLint가 각각 어떤 역할을 하는지 이해하는 것이 중요하다.

• TypeScript (tsconfig.json)
  • tsconfig.json의 compilerOptions에서 설정된 target은 TypeScript 컴파일러가 코드를 컴파일할 때 어떤 ECMAScript(ES) 버전으로 컴파일된 JavaScript 코드를 생성할지를 결정한다.
  • target: "ES2020"로 설정하면, TypeScript는 ES2020 기능을 포함하는 JavaScript 코드를 생성한다.
• ESLint (.eslintrc.js 또는 index.js)
  • ESLint는 코드의 문법과 스타일을 검사하는 도구이다. env 옵션은 ESLint가 코드가 실행될 환경을 인식하도록 돕는다.
  • env: { es6: true }로 설정하면, ESLint는 ES6 기능(예: let, const, arrow functions)을 허용하지만, ES2020의 최신 기능을 인식하지 못할 수 있다.

 

왜 ES 버전이 다르게 설정될까?

이런 차이는 주로 두 가지 이유로 발생한다:

1. 기본 설정: ESLint의 env: { es6: true }는 기본적으로 설정되어 있는 경우가 많다. ES6(ES2015)은 대부분의 자바스크립트 프로젝트에서 표준으로 사용되기 때문에, 이 설정은 흔히 사용된다.
2. 기능 인식 범위 차이: TypeScript는 코드의 컴파일 출력을 제어하고, ESLint는 코드의 구문을 검사한다. TypeScript는 최신 ECMAScript 기능을 사용할 수 있게 하는 반면, ESLint는 기본적으로 ES6만을 대상으로 할 수 있다.

 

어떻게 개선할 수 있을까?

ESLint가 ES2020 문법과 기능을 완전히 이해하도록 설정을 변경할 수 있다. 이를 위해 parserOptions에서 ECMAScript 버전을 명시적으로 설정해 주는 것이 좋다. 아래는 이를 개선한 ESLint 설정 예시이다.

• ecmaVersion: 2020: ESLint가 ES2020의 최신 기능을 이해하고, 이를 바탕으로 코드 스타일을 검사할 수 있다.
• sourceType: "module": 모듈 시스템을 지원하여, import와 export 구문을 사용할 수 있게 한다.

module.exports = {
  root: true,
  extends: [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  env: {
    node: true,
    es6: true, // 여전히 ES6 환경 설정, 필요에 따라 유지
  },
  parserOptions: {
    ecmaVersion: 2020, // ESLint가 ES2020 기능을 이해하도록 설정
    sourceType: "module" // ECMAScript 모듈을 지원
  },
  rules: {
    // 프로젝트에 맞게 규칙을 추가하세요.
  },
};