[테스트 자동화] Lint

Code Lint  란?

정적 분석의 한 종류로써, 코딩 스타일 가이드라인을 따르지 않은 패턴을 검출하여
사후에 발생할 수 있는 잠재적 문제점을 사전에 발견할 수 있도록 하기 위해 사용된다.

장점

- 동적인 언어 및 느슨한 타입을 가진 언어인 JS/TS의 경우, 상대적으로 개발자가 의도치 않은 에러를 발생시킬 수 있으므로, Lint 도구 사용 시 코드 실행 전에 발생할 수 있는 여러가지 문제점에 대응할 수 있다.

- 여러 사람이 작업하므로 달라질 수 있는 코드 스타일을 일관성 있게 수정해주어, Code 품질을 높은 수준으로 유지할 수 있다.

특징

- 대부분의 프로그래밍 언어에는 Code Linter가 존재한다.

  (컴파일러가 Linter를 포함하여, 컴파일 과정에 Lint를 수행하는 경우도 있다.)

  (프로그래밍 언어별로 주로 사용되는 Lint 라이브러리 및 도구가 상이하다.)

- Lint 도구의 기능에는 검출 기능과 자동 수정 기능이 존재한다.
  (자동으로 수정할 수 없는 Lint 오류의 경우, 개발자가 에러를 보고 직접 조치해주어야 한다.)

- 보통 CI/CD 파이프라인 상에 초기 Step으로, Lint 검사를 수행하는 Step이 존재한다. 

- 개발자는 develop 브랜치에 merge 전에 항상 Linting을 수행하여야 한다.

- 기존 언어(Java)와 다르게 동적이고 느슨한 타입인 JS /TS은 Linting을 수행하여 관련 Lint 에러를 수정해주어야 잠재적 문제를 예방할 수 있으므로 Lint 적용이 필수적이다.

 

언어별 대표 Lint 라이브러리

언어	Lint 라이브러리 도구	설명
JS/TS	- ESLint - SonarLint - Prettier	- TSLint : Typescript 전용 Lint였는 TSLint는 Deprecate되었음 - ESLint : ESLint에 Typescript 룰을 ESLint Plugin 형태로 추가하는 형태로 변경   (ESLint가 JS/TS Lint를 모두 커버할 수 있음) -
Java	- SonarLint

F&A

Q. JS/TS 상에서, ESLint와 Prettier 둘 다 코드 컨벤션을 잡아주는 녀석인데 그럼 하나만 쓰면 되지 왜 둘을 같이 사용하는 걸까?

- ESLint는 코드 퀄리티를 보장하도록 도와주고, Prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와준다.

- 코드 스타일이 깔끔하게 통일되면 반드시 코드 퀄리티를 보장해 주는 것을 의미하는 것은 아니다.

- 특정 기능을 구현하기 위해 여러 방식의 코드 작성법(for 문도 2~3가지의 종류가 존재)이 있는데, 이러한 구현 방식을 일관성 있는 방식으로 구현할 수 있도록 잡아주는 것이 eslint가 하는 역할이다.(안티 패턴 검출)

- Prettier는 ESLint처럼 '코드 구현 방식'이 아닌, 줄 바꿈, 공백, 들여 쓰기 등 에디터에서 '텍스트'를 일관되게 작성되도록 도와주는 것이다.

 

ESLint 설치 및 환경설정하기

1. Node.js[Typescript] 프로젝트 생성

$ npm init -y # package.json가 프로젝트 폴더 내 생성됨
$ tsc -init   # tsconfig.json가 프로젝트 폴더 내 생성됨

2. ESLint 패키지 설치

$ npm install -D eslint
// or
$ yarn add -D eslint