[NodeJS] Typescript EsLint 및 Prettier 적용하기

오늘은 토이 프로젝트 하면서 알아본 EsLint및 Prettier를 적용할 것이다.
알아보기전 EsLint와 Prettier에 대한 기본적인 개념을 알아보자.

EsLint란?

ES : ECMA Script로서 Javascript를 표준화하기 위해 만들어진 규격이다.
Lint : 소스 코드를 분석하여 오류, 버그, 코딩 스타일 등까지 에러를 표시 해주는 것을 의미한다.

따라서, EsLint는 소스코드를 분석하여 문법적으로 오류, 버그가 있다면 에러를 표시해줄 뿐더러 코딩 스타일까지 지정하여 사용할 수 있다.
 

Prettier란?

작성된 소스코드를 지정한 코딩 스타일에 맞게 변환 및 검사 해주는 도구이다.
javascript처럼 사용자층이 넓은 언어일수록 사용자마다 다른 코딩 스타일을 갖게되는데 협업을 할 때에는 이러한 부분이 마이너스적인 요소이기 때문에 강제적으로 코딩 스타일을 맞추는데 많이 사용한다.
 

EsLint와 Prettier를 적용해보자

우선 NPM 또는 Yarn을 사용하여 EsLint와 Prettier를 설치해야한다.
본글은 NPM을 사용하여 설치한다.

npm install --save --dev eslint prettier eslint-config-prettier 
eslint-plugin-import eslint-plugin-prettier @typescript-eslint/eslint-plugin 
@typescript-eslint/parser

NPM Package명	설명
eslint	기본적인 EsLint를 사용하기 위한 플러그인
prettier	기본적인 Prettier를 사용하기 위한 플러그인
eslint-config-prettier	EsLint의 Formatting 규칙을 off 하기 위한 플러그인
eslint-plugin-import	import와 export의 구문의 Lint를 지원하기 위한 플러그인
eslint-plugin-prettier	prettier의 formatting을 사용하기 위한 플러그인
@typescript-eslint/eslint-plugin	typescript관련 규칙을 처리하는 플러그인
@typescript-eslint/parser	typescript에서 eslint를 사용하기 위한 paresr 플러그인

 
NPM을 설치했다면 프로젝트 최상단에다가 .eslintrc.json을 생성한다.

.eslintrc.json

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["import", "@typescript-eslint", "prettier"],
    "extends": [
        "airbnb-base",
        "plugin:import/errors",
        "plugin:import/warnings",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended",
        "eslint:recommended",
    ],
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module"
    },
    "env": {
        "browser": true,
        "node": true
    },
    "ignorePatterns": ["node_modules/", "tsconfig.json"],
    "rules": {
        /**
            console을 사용할 수 있게 해주는 기능
            error => error로 간주
            warn => warning으로 간주
            배포할 때는 error로 바꿔 console.log를 없애주자
        */
        "no-console": "off",
        "prettier/prettier": [
            "error",
            {
                /*
                    각 운영체제 별로 줄 바꿈을 표현하는 방식이 상이하기 때문에 발생한 문제
                    endOfLine이라는 에러가 발생했을 때 운영체제 별로 설정된 값을 사용하라는 의미
                */
                "endOfLine": "auto"
            }
        ],
        "import/extensions": [
            "error",
            "ignorePackages",
            {
                "js": "never",
                "jsx": "never",
                "ts": "never",
                "tsx": "never"
            }
        ],
        /*
            class member(변수, 함수)는 무조건 한 줄 씩 띄워져야 한다.
            exceptAfterSingleLine => 한 줄은 허용 (memeber variable 때문에)
        */
        "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
        "no-explicit-any": false
    },
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    }
}

설정 이름	설명
parser	eslint는 javascript 코드만 이해할 수 있기 때문에 typescript는 parser를 지정해 Lint 할 수 있게 설정한다.
plugins	기본적으로 제공되는 규칙 외에 추가적인 규칙을 사용할 수 있도록 한다.
parserOptions	parser 할 때의 옵션
env	실행환경에서 기본적으로 제공되는 전역 객체에 대해서 설정한다. ESLint로 린트(lint)를 할 자바스크립트 코드가 브라우저에서 실행될 수도 있고, NodeJS에서도 실행될 수 있다면 두 가지 실행 환경에서 접근 가능한 모든 전역 객체를 설정해준 것이다.
ignorePatterns	eslint를 적용시키지 않을 위치를 나타낸다.
rules	eslint에 적용할 규칙을 설정한다.
settings	eslint 플러그인의 추가적인 설정을 하는 곳이다.

eslint를 좀 더 자세하게 설정하고 싶다면 공식 문서로 이동하여 추가해보자.

 
EsLint 설정이 끝났다면 프로젝트 최상단에 .prettierrc.json을 추가해주자.

.prettierrc.json

{
    "tabWidth": 4,
    "trailingComma": "none",
    "semi": true
}

설정 이름	설명
tabWidth	한 번의 탭에 몇 개의 공간(Space bar 한 번당 1개)을 정할지에 대한 설정
trailingComma	List, Json, 함수 등 마지막 item 뒤에 Comma(,)를 붙일지 말지의 여부
semi	자바스크립트 문법 끝에 세미 콜론을 붙일지 말지의 여부

Prettier를 좀 더 자세하게 설정하고 싶다면 공식 문서로 이동하여 추가해보자.

 
EsLint와 Prettier 설정이 끝났다면 VSCode Extensions에 가서 ESLint, Prettier - code formatter를 설치해주자.
그리고 최상단에 .vscode 폴더와 그 안에 settings.json을 추가해주자.

.vscode/settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

 
이러한 설정이 다 끝났다면 이제 ts 파일을 만들어 문법을 사용 후 저장을 하면 prettier 규칙에 맞게 Auto Formatting이 될 것이다!