ESlint, Prettier 기본 설정하기

팀 단위로 개발 시 팀원들과 코드 컨벤션을 맞추거나 코드의 문법적 오류를 막기 위해 Eslint, Prettier를 사용하고 있습니다. TypeScript 환경의 초기 프로젝트 구축 시 또는 프로젝트 도중에 ESlint, Prettier가 필요하다면 어떻게 설정할지 알아보겠습니다.

 

ESlint 설정하기

ESlint?

ESlint는 ECMAScript Lint로 ECMAScript/자바스크립트 환경에서 문법적 오류와 안티 패턴을 에러로 잡아주는 Linter입니다. 그뿐만 아니라 Tab, 줄바꿈 처리 등의 코드 스타일도 지정할 수 있습니다.

 

ESlint 설치 및 설정

ESlint를 설치 후 ESlint config 파일을 생성합니다.

# ESLint는 전역 설치를 권장하지 않음
npm install eslint --dev
# or
yarn add eslint --dev

# .eslintrc or .eslintrc.{js,yml,json} configuration 파일 생성
touch .eslintrc.js

 

추가로 TypeScript 환경에서 필요한 라이브러리와 Prettier와의 설정 충돌을 막기 위해 추가로 라이브러리를 설치합니다.

• @typescript-eslint/parser
  ⇒ 기본적으로는 Espree 파서를 사용하는데, TypeScirpt 구문 분석을 위해 사용
• @typescript-eslint/eslint-plugin
  ⇒ TypeScirpt 관련 rule 제공
• eslint-config-prettier
  ⇒ Eslint의 포맷팅 기능 때문에 Prettier와의 설정 충돌을 막기 위해 사용

npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier --dev
# or
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier --dev

 

생성해둔 .eslintrc.js 파일에서 lint 설정을 합니다.

// example .eslintrc.js 
module.exports = {
  // config 파일을 해당 package의 상위로 더 이상 찾지 않고 해당 config 파일을 적용
  root: true,
  // 전역 객체 접근을 위한 설정
  env: {
    browser: true,
    node: true,
  },
  // 사용하는 ESLint 관련 플러그인을 명시
  // 실제로 extends나 rule에 플러그인 내용을 명시해야 동작함
  plugins: ['@typescript-eslint'],
  // recommended을 사용할 경우 해당 플러그인에서 기본적으로 셋팅된 rule 적용
  // all 사용할 경우 해당 플러그인의 모든 rule 적용
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    // eslint-config-prettier 사용을 위해 추가
    'prettier',
  ],
  // ESLint에 사용할 parser 지정
  parser: '@typescript-eslint/parser',
  // ESLint 사용 지원을 하려는 자바스크립트 옵션 추가
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  // Lint 규칙 설정
  rules: {
    // 
    // example. no-unused-vars 사용하지 않는 변수가 있을 경우 error 표출
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/strict-boolean-expressions': [
      2,
      {
        allowString: false,
        allowNumber: false,
      },
    ],
  },
  // Lint 적용이 필요 없는 파일
  ignorePatterns: ['src/**/*.test.ts', 'src/**/*.d.ts'],
};

 

추가로 필요한 규칙과 설정이 있을 경우 ESLint 관련 플러그인을 설치하여 추가하면 되겠습니다.

 

파일을 직접 생성하지 않고 명령어로 ESLint 설정과 파일을 추가할 수도 있습니다.

npm init @eslint/config
# or
yarn init @eslint/config
# 이후 사용자 환경에 따라 맞게 선택하여 ESLint 설정 진행

 

Prettier 설정하기

Prettier?

Prettier는 정해진 규칙에 따라 코드 스타일을 정리해 주는 Formatter입니다. 정해둔 코딩 컨벤션에 따라 규칙을 설정하여 팀 내의 코드 스타일을 일정하게 유지하여 가독성을 높여줍니다.

 

Prettier 설치 및 설정

Prettier를 설치 후 Prettier config 파일을 생성합니다.

npm install prettier --dev
# or
yarn add prettier --dev

# .prettierrc or .prettierrc.{js,yml,json} configuration 파일 생성
touch .prettierrc

 

생성해둔 .prettierrc 파일에서 코드 포맷팅 설정을 합니다.

// example .prettierrc
{
  // 줄바꿈 할 length
  "printWidth": 80,
  // 들여쓰기 간격
  "tabWidth": 2,
  // 공백 대신 Tab 사용 여부
  "useTabs": false,
  // statement 끝에 세미콜론 사용 여부
  "semi": true,
  // 문자열 single Quote 옵션
  "singleQuote": true,
  // 객체 속성 Quote 옵션
  "quoteProps": "as-needed"
  // JSX single Quote 옵션
  "jsxSingleQuote": false,
  // 여러 줄의 쉼표로 구분된 구문에서 후행 콤마 사용 방식
  "trailingComma": "all",
  // 객체 brackets 사이에 공백 여부
  "bracketSpacing": true,
  // multi-line HTML (HTML, JSX, Vue, Angular)의 마지막 > 내릴지 여부
  "bracketSameLine": false,
  // 화살표 함수 괄호 사용 여부
  "arrowParens": "always",
  // 포맷팅할 파일의 시작과 끝 지정 
  "rangeStart": 0,
  "rangeEnd": Infinity,
  // 사용할 parser 지정
  "parser": "typescript",
  // parser를 유추할 파일을 명시
  "filepath": "",
  // 파일 상단에 Pragma 특수한 주석이 포함된 파일만 포맷팅할지 여부
  "requirePragma": false,
  // markdown 텍스트의 줄 바꿈 방식
  "proseWrap": "preserve",
  // HTML, Vue, Angular, Handlebars 전역 공백 감도
  "htmlWhitespaceSensitivity": "css",
  // Vue 파일의 script와 style 구문 들여쓰기 여부
  "vueIndentScriptAndStyle": false,
  // EOL 방식 설정
  "endOfLine": "auto",
  // 인용 코드의 형식 지원 여부 제어
  "embeddedLanguageFormatting": "auto",
  // HTML, Vue, JSX에서 attribute or properties를 한줄에 하나씩 표기할지 여부
  "singleAttributePerLine": false
}

 

필요한 코드 포맷 옵션으로 구성하여 사용하면 되겠습니다.

 

VSCode 설정하기

개발을 하면서 사용 중인 editor가 VSCode라면 설정을 통해 ESlint, Prettier를 좀 더 편하게 사용할 수 있습니다. VSCode에서 Extensions에서 ESLint와 Prettier을 설치합니다. 그리고 setting.json을 다음과 같이 설정하면 코드 저장 시 자동으로 규칙에 맞게 코드가 수정됩니다.

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

 

마무리

Eslint와 Prettier 설정을 간단하게 알아봤습니다. 팀의 코드 컨벤션과 스타일에 맞게 ESlint, Prettier를 설정하여 가독성 뿐만 아니라 코드 퀄리티까지 일정하게 유지하여 개발하는 것이 좋겠습니다.

 

회고

이전에 Vue.js에서 React로 포팅 하는 작업을 진행하면서 팀원들과 React 코드 작성 시 코드 컨벤션에 대한 필요성을 많이 느끼게 되었습니다. 그래서 충분한 논의 후 코드 컨벤션을 지정하여 ESlint, Prettier 설정을 했었습니다. 기존 Vue.js 프로젝트에서도 ESlint, Prettier를 사용했었지만 개인적으로 느끼기에 Vue.js보다 React 환경이 코드 작성이 자유로워서 세세한 컨벤션 지정이 더 필요했던 것 같습니다. 팀 단위로 일을 한다면 ESlint, Prettier 사용은 선택이 아니라 필수임을 느끼게 되었습니다.

 

---

참고 자료

https://eslint.org/docs/latest/

https://prettier.io/docs/en/