ESLint 와 Prettier 가 무엇이며 설정은 어떻게 해야할까?

프로젝트 개발환경을 세팅하면서 가장 먼저 설정하는 것이 ESLint와 Prettier이다.

다수의 프로젝트를 진행하면서 본인 역시 ESLint와 prettier를 설정하는 경험을 했지만, 제대로 된 이해 없이 구글링으로 나오는 코드들을 복붙하여 사용하였다. 본 포스팅은 ESLint와 Prettier 를 좀 더 깊이 있게 이해하여 활용능력을 높이고 Custom하여 사용할 수 있는 방법을 익히고자 작성하였다.

ESLint와 Prettier은 무엇인가?

ESLint는 linter로써 문법 상의 오류를 방지하고 일관된 코드 스타일로 코드가 작성될 수 있도록 도와주며 Prettier는 formatter로써 코드 스타일을 통일하고 교정하기 위해 사용한다. 다시 말해 "ESLint는 코드 퀄리티를 보장해주는 도구이며, Prettier는 코드 스타일을 깔끔하게 만들어주는 도구"이다. 

 2가지 모두 코드 스타일과 연관된 부분들이 있어 두 설정이 충돌하는 경우가 존재하며 이에 대해서도 대응을 해줘야만 한다. 

ESLint 설정

ESLint 설치 방법이나 초기 설정에 대해서는 다른 글에서도 많이 소개되어 있으므로, 여기서는 ESLint 설정에 대해서만 살펴보고자 한다.

ESLint 를 설정하는 방법에는 2가지 방법이 존재한다.

1. Cofiguration Comments

주석을 사용하여 코드에 직접 ESLint 설정에 관한 정보를 끼워넣는 방법이다.

아래와 같이 /* eslint-disable-next-line no-unused-vars*/ 주석을 삽입함으로써 사용하지 않는 변수에 대한 ESLint 기능을 끌 수 있다.

const test = () => {
    /* eslint-disable-next-line no-unused-vars*/
    const string = 'test string';
    const num = 1;
    return string;
}

주관적인 생각이지만 이 방법은 일관된 코드를 위한 ESLint의 올바른 사용방법과는 다소 거리가 있다. 주석을 추가하여 특정 코드에서만 별도의 ESLint 설정을 사용하게되므로 ESLint 사용 목적에서 벗어나며 전체 파일에 적용되도록 설정한다고 해도, 개별 파일에서 전체 파일에 영향을 줄 수 있는 것들을 관리하는 것은 유지보수 측면에서 좋지 않다. 따라서 이유로 불가피한 상황이 아니라면 두 번째 Configuration File을 활용하는 방법을 추천한다.  

2. Configuration File

eslintrc 파일 혹은 package.json 파일의 eslintConfig 필드에 ESLint 옵션을 추가하는 방법이다.

// .eslintrc
{
    "env": {
        "browser": true,
        "node": true
    }
}

// package.json
{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

ESLint의 설정 옵션에 대해서 조금 더 살펴보자.

• env : 코드가 동작하게될 환경, 옵션에 명시된 각 environment 는 사전에 정의된 global 변수들을 사용할 수 있도록 한다.
• plugin : ESLint 에 다양한 extension들을 추가할 수 있는 npm package 이다. 
• rules : lint 규칙을 개별적으로 제어하기 위해 사용되는데, plugin에 추가된 패키지의 규칙을 사용하기 위해 명시하거나 extends 옵션을 통해 설정된 규칙들을 덮어쓰고 싶을 때 사용한다. 
• extends : 공개된 lint 설정을 그대로 가져와 기반 설정(base)로 활용할 수 있다. 
• parser : ESLint는 기본적으로 순수 자바스크립트 코드만 이해할 수 있는데, 타입스크립트나 JSX와 같은 자바스크립트 확장 문법으로 작성한 코드를 lint 하기 위해 그에 맞는 parser를 설정해줘야 한다. 
• parserOptions: ESLint를 사용하기 위해 지원하고자 하는 Javascript 언어 옵션을 지정할 수 있다. 

Prettier 설정 ( .prettierrc )

{
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "tabWidth": 2, // 탭 너비 
  "useTabs": false, // 탭 사용 여부
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "jsxSingleQuote": false, // JSX에 single quote 사용 여부  
  "trailingComma": "all", // 여러 줄을 사용할 때 마지막에 오는 comma의 여부
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부   
  "bracketLine": true, // 여러 줄의 코드에서 마지막 오는 > 의 위치 
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
  "rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정
  "parser": '', // 사용할 parser를 지정, 자동으로 지정됨  
  "filepath": '', // parser를 유추할 수 있는 파일을 지정
  "requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
  "insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식  
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "overrides": [ 
    {
      "files": "*.json",
      "options": {
        "printWidth": 200
      }
    }
  ], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}

참고

• ESLint 공식문서
• Prettier 공식문서
• https://www.daleseo.com/eslint-config/, "ESLint 상세 설정 가이드"
• 카카오 Tech, "ESLint 조금 더 잘 활용하기"