Lint에 대해서 잠깐 알아보기

Lint란?

Lint는 소스코드를 분석하여 문법적인 오류나 스타일적인 오류, 적절하지 않은 구조 등에 표시를 달아주는 행위이며, Linter란 Lint의 동작을 도와주는 도구를 말한다.

Linter를 왜 쓸까?

다른 사람과의 협업을 해야하는 상황이면 코드의 형식을 맞추기가 아주 어렵기 때문이다.

대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되는 Linter가 기본적으로 내장되어 있지만, 자바스크립트는 컴파일 과정이 없는 인터프리터 언어이기 때문에 Linter가 내장되어 있지 않다. 그래서 코드가 실행되는 런타임 환경에서 에러가 발생할 수 있다.

Linter

JavaScript의 린터로는 JSLint, JSHint, ESLint,
Typescript의 린터로는 TSLint이 있다.

최근은 주로 ESLint를 사용하는 추세이다. 🙆🏻‍♀️

ESLint 설치 🛠

먼저, 프로젝트에 typescript기반으로 eslint를 설치한다.

npm i -D eslint eslint-config-airbnb-base eslint-plugin-import
npm install -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser

설치가 완료되면, 루트 디렉토리에 .eslintrc.js 파일을 생성한다.

module.exports = {
    parser: "@typescript-eslint/parser",
    plugins: ["@typescript-eslint"],
    extends: [
        // Airbnb style 적용
        "airbnb-base",
        // TypeScript ESLint recommanded style 적용
        "plugin:@typescript-eslint/eslint-recommended"
    ]
};

package.json의 scripts에 eslint를 사용하기 위한 명령어를 추가한다.

"lint": "eslint src/**/*.ts",
"lint--fix": "eslint --fix src/**/*.ts"

이제 npm run lint 로 린트를 실행할 수 있다.
소스 코드의 수정을 받고싶다면, npm run lint--fix 을 하면된다.

🧸💗 참고 블로그