[ESLint, Prettier] Typescript 프로젝트에 적용 방법

오늘은 ESLint, Prettier를 typescript에 적용한는 방법을 포스팅 할려고 합니다. 

여러 블로그, 정보들을 찾아 보면서 해봤는데 자꾸 막히다가 공부를 하면서 정리 하다보니

방법을 알게되어서 포스팅하게 되었습니다.

ESLint

ESLint란 

동적 언어인 javascript 에서는 코드 error가 자주 발생 합니다.

 

ESLint는 Ecma Script + Lint 로써 여기서 Ecma Script는 표준 javascript를 의미합니다.

Lint는 에러가 발생한 부분에 표시를 달아놓는 것을 의미합니다.

 

따라서 ESLint는 우리가 javascript 코드를 작성하면서 발생하는 오류들을 알려주는 도구 입니다.

그리고 코드 작성의 전반적인 스타일을 지정할 수 있습니다.

 

ESLint를 사용하면 에러 발생을 줄일 수 있고, 코드 작성의 전반적인 스타일을 정할 수 있기

때문에 협업을 할 때 유용합니다. 

 

Prettier

prettier란

코드스타일을 일정하게 유지할 수 있게 도와주는 툴 입니다.

줄 바꿈, 공백, 들여쓰기 등 과 같은 스타일을 선택 할 수 있습니다.

prettier를 사용하면 코드를 작성 시 깔끔하고 일정할 수 있도록 유지가 가능합니다.

 

정리하면

• ESLint는 코드의 퀄리티를 일정하게 유지 해준다.
• prettier는 코드 스타일을 일정하게 유지 해준다.

적용방법

1. ESLint를  vscode extension 에서 설치

ESLint

2. ESLint 설치

npm install -D eslint

---

-D 로 설치하는 이유

ESLint는 개발 시에만 필요하고 애플리케이션 실행에 필요하지 않기 때문에

개발 중에만 필요한 종속성을 설치해야 할 경우에는 -D를 사용해서 설치 합니다.

참고로 npm install -D와 npm install --save-dev 는 동일한 명령 입니다.

---

3. .eslintrc 파일 설정

각종 lint 룰 설정을 위해서는 프로젝트 루트 디렉토리에 .eslintrc 파일을 만들어서 작성해줘야 합니다..
.eslintrc 파일의 확장자는 js, json, yml로 다양하게 설정할 수 있는데 저는 json으로 만들었습니다.

{   
    "root" : true,
    "parser": "@typescript-eslint/parser",
    "extends": [
      "plugin:@typescript-eslint/recommended",
      "plugin:prettier/recommended"
    ],
    "plugins": [
      "@typescript-eslint",
      "prettier"
    ],
    "ignorePatterns": [
      "node_modules/"
    ],
    "env": {
      "browser": true,
      "node": true
    },
    "rules": {
      "prettier/prettier": [
        "error",
        {
          "endOfLine": "auto"
        }
      ]
    }
  }

• root: root는 우선 default 값이 true로 되어있습니다. 만약 .eslintrc 파일을 찾을 경우 default 값이 false로 되어있다면. 파일이 위치한 폴더부터 순차적으로 위로 올라가면서 설정 파일을 찾게 됩니다.
•  extend: Google, Facebook, Airbnb 등 수많은 세계적인 기업들이 ESLint로 자바스크립트 코드를 린트(lint)합니다. 설정 파일의 extends 옵션을 통해서 이러한 기업들이 공개해놓은 설정을 그대로 가져와 기반(base) 설정으로 활용할 수 있습니다.
• plugin: ESLint에는 기본으로 제공되는 규칙(rule) 외에도 추가적인 규칙(rule)을 사용할 수 있도록 만들어주는 다양한 플러그인(plugin)이 존재하여 사용할 수 있습니다. 플러그인을 설정할 경우 이 플러그인이에 대한 규칙을 끌지, 오류가 발생하면 경고를 낼지 에 대한 설정을 해줘야합니다. 이러한 설정들은 extend, rules 옵션에서 추가로 설정을 해주어야 합니다.
• rules: rules 옵션은 규칙 하나 하나를 세세하게 제어하기 위해서 사용됩니다. 보통은 extends의 옵션의 규칙들을 덮어쓰고 싶은 겅우 유용하게 사용이 가능합니다. 
• env: 프로젝트에서 사용되는 환경을 설정합니다.
• ignorePatterns: ESLint에서 무시할 패턴을 설정합니다.

4. Plugin, Parser 설치

npm install -D @typescript-eslint/parser: 타입스크립트에서 ESLint를 사용할 수 있게 하는 파서
npm install -D  eslint-plugin-prettier : 린터인 것처럼 prettier를 실행하는 플러그인
npm install -D  eslint-config-prettier :  prettier 의 설정 중 eslint 의 설정과 충돌이 나는 설정들을 비활성화 해주는 라이브러리

5. Prettier를  vscode extension 에서 설치

6. .Prettier 설치

npm install -D prettier

7. .Prettierrc 파일 설정

{
    "printWidth": 80,
    "tabWidth": 2,
    "singleQuote": true,
    "trailingComma": "all",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "semi": true
  }

• singleQuete: prettier는 쌍따옴표가 기본인데, singleQuote 사용 시 홀따옴표 로 사용이 가능합니다.
• Prettier: Prettier 은 기본적으로 한 줄에 글자수를 최대 80자로 제한하고 있습니다.  한 줄에 최대 글자수를 늘리고 싶다면 printWidth 옵션을 사용하면 됩니다. 
• semi: prettier는 각문장 끝에  ; 기호(세미클론)을 자동으로 달아주는데 "semi": false 사용 시 생략이 가능합니다.
• trailingComma: 여러 줄에서 걸쳐서 배열이나 객체, 매개변수가 작성된 경우 Prettier는 마지막 요소 뒤에도 , 기호(쉼표)를 붙여주는데요. 이 쉼표를 제거하고 싶다면 trailingComma 옵션을 "none"으로 주면 됩니다.
• tabWidth : 탭 너비를 설정 할 수 있습니다. 기본적으로 2 칸이 기본입니다.
• bracketSpacing: 객체리터럴 의 중괄호 주위에 공백을 추가하거나 추가하지 않는 옵션 입니다. " bracketSpacing" : flase로 설정하면 공백을 추가하지 않습니다. 기본은 true 입니다.
• jsxBracketSameLine: 옵션은 JSX 요소가 여러 줄에 걸쳐 있는 경우 마지막 속성 또는 닫는 꺽쇠 괄호(>)를 다음 줄로 내릴지 여부를 결정합니다. 옵션 값으로 true를 설정하면 마지막 속성 또는 닫는 꺽쇠 괄호를 JSX 요소와 동일한 줄에 위치시킵니다. 반대로, false로 설정하면 마지막 속성 또는 닫는 꺽쇠 괄호를 새로운 줄에 위치시킵니다.

8. 나머지 설정

• vscode settion.json 파일 열어서 format on save 파일 체크.
• .eslintrc, .prettierrc 파일 위치 : 최상위 폴더에 만들어야합니다.
• setting.json에 아래 코드 추가

{
  "editor.formatOnSave": false,     
  "editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,
  },
    // Enable per-language
  "[typescript]": {
    // "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    // "editor.formatOnSave": true,
  },  
  "workbench.settings.useSplitJSON": true 
}