TypeScript 맛보기 4 - ESLint 사용하기

0. 서론

 

TypeScipt를 사용할 때 흔히 prettier와 함께 ESLint(TSLint)가 사용된다. 최근까지 TSLint가 TypeScript 전용으로 사용되는 경향이 있었으나 deprecated 작업, ESLint로 migration 작업 중에 있다고 한다. 즉, ESlint가 TypeScript를 지원하도록 작업 중이라고 보면 될 것 같다. 이것에 대해 관심이 있다면 아래 링크를 보도록 하자.

The future of TypeScript on ESLint

TSLint in 2019

Roadmap: TSLint -> ESLint · Issue #4534 · palantir/tslint

 

그러므로 앞으로 TSLit보다 ESLint가 더 선호될 경향이 커 보인다. 그래서 typescript와 함께 ESLint를 설정하는 법을 알아두면 좋을 것 같아서 이 글을 남긴다.

 

1. ESLint 란

아래는 https://eslint.org/docs/about/의 내용을 참고해서 작성한 것이다. 더 자세한 내용을 보려면 링크 내용을 읽어듯 하다. 

About

 

ESLint는 JavaScrip linting 도구, 오픈 소스로써 2013년 6월에 Nicholas C. Zakas에 의해 만들어 졌다. Code linting은 정적 분석의 한 종류로써, 어떤 코딩 스타일 가이드라인을 따르지 않은 패턴을 찾아서 사후에 발생할 수 있는 잠재적 문제점을 사전 발견할 수 있도록 하기 위해 사용된다. 대부분의 프로그래밍 언어에는 Code linter가 있고, 컴파일러가 linter를 포함해 컴파일 과정에 lint를 수행하는 경우도 있다.

 

Javascript는 동적인 언어이고 느슨한 타입을 가진 언어이기 때문에 상대적으로 다른 언어(특히 Java)와 비교했을 때, 개발자가 의도치 않은 에러를 발생시키기 쉬운 경향이 있다. 또한 Javascript는 컴파일 과정이 없기 때문에 syntax 에러나 다른 문제점을 찾기 위해서는 코드를 수행하기 전까지는 알 수 없다. 그래서 Javascript 코드를 실행하기 전에 발생할 수 있는 여러 문제점을 사전에 찾기위해 ESLint 와 같이 linting 도구를 사용해야 한다.

 

ESLint를 사용함으로써 어떤 개발 조직 혹은 개발자 스스로가 정한 linting 규칙을 따르도록 해, 코드 스타일에 유연한 규칙을 가지면서도 통일감 있고, 위에서 언급한 런타임 에러를 사전에 발견함으로써 런타임에 발생할 수 있는 에러를 최소화 할 수 있다.

 

하지만, 서론에서 언급했듯이 2019년에 들어서 ESLint가 JavaScript뿐만 아니라 TypeScript도 지원하도록 작업 중이고 TSLint는 deprecated 될 것이라고 발표한 바가 있다. 이로써 ESLint의 입지가 넓어지고 중요성이 더 커졌다고 볼 수 있을 것이다. 

 

2. ESLint 설정하기

a. TypeScript 개발 환경 설정

node.js 프로젝트 디렉토리를 초기화 한다.

$ npm init -y

 

node.js에 TypeScript 환경을 사용하도록 설정한다. 

$ npm i -D ts-node typescript  

 

더 자세한 내용을 보려면 아래 링크를 참고해도 좋을 것 같다.

 

Typescript 맛보기 1 - Javascript로 compile 해보자

Typescript 맛보기 2 - 백엔드 Koa 개발환경 설정

 

b. eslint 설치

$ npm i -D eslint

 

c. .eslintrc.js 설정

아래와 같이 터미널에서 '$npx eslint --init'를 입력하게 되면 eslint를 어떻게 설정할지 스무고개(?)를 시작한다. 여기서는 아래와 같이 설정했지만 필요하다면 조금씩 바꿔도 된다. 설정이 끝나면, 프로젝트 디렉토리에 .eslintrc.js 파일이 생기고, @typescript-eslint/eslint-plugin, @typescript-eslint/parser가 설치된다.  

$ npx eslint --init

  ? How would you like to use ESLint? (Use arrow keys)
    To check syntax only 
  ❯ To check syntax and find problems // 선택
    To check syntax, find problems, and enforce code style 
    
  ? What type of modules does your project use? (Use arrow keys)
  ❯ JavaScript modules (import/export) // 선택
    CommonJS (require/exports) 
    None of these 
    
  ? Which framework does your project use? 
    React 
    Vue.js 
  ❯ None of these // 선택
  
  ? Does your project use TypeScript? (y/N) y // y 입력
  
  ? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)
    ◉ Browser
  ❯ ◯ Node // 선택
  
  ? What format do you want your config file to be in? (Use arrow keys)
  ❯ JavaScript // 선택
    YAML 
    JSON 
    
  The config that you've selected requires the following dependencies:

  @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
  ? Would you like to install them now with npm? (Y/n) Y // Y 입력
  // Y를 입력하면 최신버전의 @typescript-eslint/eslint-plugin, @typescript-eslint/parser 가 설치된다.
  

 

자동으로 생성된 .eslintrc.js의 rules속성에 semi, quotes 내용을 아래와 같이 추가하자. lint에러가 나는 것을 보여주기 위해 일부러 추가했고, 원한다면 이런식으로 rules를 추가할 수 있다. rules에 대해 더 자세히 알고 싶다면 https://eslint.org/docs/user-guide/configuring를 참고하면 될 것 같다.

 

// .eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "semi": ["error", "always"],   // 세미콜론을 반드시 붙일 것
        "quotes": ["error", "double"]  // 문자열을 반드시 쌍따옴표로 감쌀 것
    }
};

 

3. ESLint 실행하기

package.json scripts에 lint를 실행하는 스크립트를 등록하자. "eslint 'src/**/*.{js,ts}'"는 src 밑에 있는 모든 .js 또는 .ts 파일에 대해 eslint를 실행하겠다는 뜻이다.

"scripts": {
    "lint": "eslint 'src/**/*.{js,ts}'"
    ...
},

 

src/index.ts에 다음과 같이 1줄 코딩해보자. 

// src/index.ts

let a = '3'

문제가 전혀 없어 보이는 이 코드에 lint를 실행시키면 다음과 같은 lint 에러를 확인할 수 있다. 굳이 내용을 해석하지 않아도 그 의미를 잘 알 것이다. 1:7에 발생한 에러는 lint가 기본적으로 발생시키는 에러이고, 1:11, 1:14는 위에서 정한 rules에 의해 발생하는 lint 에러이다. 

$ npm run lint

  1:7   error  'a' is assigned a value but never used  no-unused-vars
  1:11  error  Strings must use doublequote            quotes
  1:14  error  Missing semicolon 

 

4. 결론

이런식으로 코딩을 하고 난 후 ESLint를 통해 내가 작성한 코드가 코딩 스타일을 준수하고 있는지, 잠재적 에러를 발시킬 것인지 등을 확인할 수 있게 된다. 이에 대한 이점은 위에서 언급했으므로 이만 줄이도록 하겠다. 

 

다른 이야기지만, JavaScript라는 언어는 그 자체로 사용하기에는 매우 불편하고 모자란 부분이 많아 군더더기(TypeScript, ESLint, Prettier 등을 언급한 것인데, 이것을 사용하는 것에 대해 부정적이라고는 생각하지 않는다)가 많음에도 웹 생태계에서 잘 살아남고 있는 것이 신기할 뿐이다. 하지만 Javascript도 영원할 수는 없을 것이도 아마 차세대 웹 프로그래밍 언어는 JavaScript 만큼 쉬우면서도 일관성있고, 모든 플랫폼에서 사용가능하도록 이식성이 좋으며, CI/CD가 쉬운 언어가 나타난다면 JavaScript도 언젠가는 순위에서 밀려나지 않을까 한다. 망상일 수 있지만 그 언어가 현재 Flutter(https://flutter.dev/)에 사용 중인 Dart(https://dart.dev/)가 될 것이라 예상한다.