Prettier, ESLint 이해하고 사용하기

kukjunLEE·2023년 3월 19일

개발자 팁

목록 보기

1/1

본 글은 Node 기반 환경에서 설정을 위한 파일을 작성하던 도중 겪은 경험을 토대로 작성하게 되었습니다. ESLint, Prettier에 대해서 정확하게 모르는 상태로 작성하다보면, 저와 같은 경험을 하실 수 있을겁니다. 🙏🏻
본 글을 통해서 ESLint, Prettier는 어떤 것인지 알 수 있고, ESLint와 Prettier를 같이 사용하기 위한 방법에 대해 알 수 있습니다.

발단😫

Nest.js로 처음으로 프로젝트를 만들고 적용시켜보려고 했습니다. 일단 강의에도 하라는대로 쭉 따라서 하다보니, 줄바꿈과 탭, 그리고 그 외 여러가지 잡다한 것들에 대해 에러로 표기되었습니다.

~~이런느낌?~~

이런 문제가 생겼는데, 강의에서는 별 이야기가 없고 인터넷을 뒤져봐도 간단하게 해결한다는 방법으로 해봐도 왜 그렇게 되는지 이해도 되지 않고, 나중에 분명 발목을 잡을 것 이라는 생각이 들어 조금 더 자세하게 알아야 겠다는 생각이 들었습니다.

해결하기🧐

순서는 ESLint, Prettier는 각각 무엇인지, 그리고 강의에서는 ESLint와 Prettier를 같이 사용한다고 했는데, 정확하게 무엇을 의미하는지 다루도록 하겠습니다.

ESLint ?

ESLint는 코드 퀄리티를 보장하도록 도와주는 도구입니다.

ESLint를 사용하면 프로젝트에서 코드를 작성하는 방식을 일관성이 있는 방식으로 구현할 수 있도록 도와줍니다.

예를 들면, 함수를 정의할 때, function 키워드를 사용할지, arrow를 사용할지, 아니면 타입을 무조건 지정해줘야하는지 코드의 탭, 한줄 당 최대 길이는 얼마인지 등등 일관성이 있는 코드를 작성하도록 도와줍니다.

Install

ESLint는 프로젝트 코드 단에서 사용하는게 아니라, VSCode, WebStorm과 같은 Editor(IDEA)에서 적용해서 사용합니다.

VS Code Evironment

프로젝트 내에서 개발 환경에서 ESLint를 의존 추가합니다.

npm install -D eslint # npm
yarn add -D eslint # yarn

이제는 Editor에서도 사용할 수 있도록 ESLint Extention을 설치해야 합니다.

이제는 프로젝트 루트 경로의 .eslintrc.js 파일의 설정을 통해서 프로젝트의 규칙을 명시할 수 있습니다.

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint/eslint-plugin'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    // 내가 작성한 prettier 적용하기
    'plugin:prettier/recommended',
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  ignorePatterns: ['.eslintrc.js'],
  rules: {
    '@typescript-eslint/interface-name-prefix': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

파일의 구조는 json, javascript 둘다 적용할 수 있습니다.
- .eslintrc.js, .eslintrc.json, .eslintrc

각 옵션들을 살펴보면,

parser - 각 코드 파일을 검사할 parser를 설정합니다. 지금과 같은 경우 typescript-eslint/parser를 사용하겠다고 명시하고 있습니다.
parserOptions - parser의 추가 정보를 등록합니다.
extends - eslint role 설정이 되어있는 외부 file을 extends 하는 부분입니다.
- 'plugin:@typescript-eslint/recommended': typescript에서 제공하는 기본적인 eslint 설정을 불러옵니다.
- 'plugin:prettier/recommended': prettier로 설정한 eslint 설정을 불러옵니다.
rules - 직접 lint rule을 적용하는 부분으로, extends로 자동 설정된 rules를 끄거나, error를 warning으로 변경하는 등 설정을 바꿀 수 있습니다.

Prettier ?

코드 구현과는 관련없는, 일관된 텍스트 작성을 도와주는 도구입니다.

Prettier를 사용하면, 프로젝트 내에서 일관된 텍스트 형식을 가질 수 있습니다.

탭의 줄 간격이나, 줄바꿈 정도 등 텍스트 작성에 대한 많은 부분을 사용자가 원하는 대로 설정할 수 있습니다.

Install

Prettier는 설치하는 방법이 두가지입니다.

VSCode Enviornment

플러그인 없이 Extention 설치 - 플러그인 없이 Extention을 설치하게 되면 내 환경의 VSCode 에디터 자체에 prettier rule을 셋팅하게 됩니다.

이 경우, VSCode Extention에서 적용된 prettier 설정을 사용해서 프로젝트에 적용됩니다.
플러그인 설치 - 프로젝트 자체 내에서 prettier rule을 세팅한 것으로 해당 프로젝트를 다른 환경에서 돌려도 동일한 prettier rule을 적용해서 사용할 수 있습니다.
```
npm install -D prettier
```
프로젝트 내 .prettier 파일을 작성할 수 있습니다.
```
{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true, 
  "singleQuote": true, 
  "trailingComma": "all", 
  "bracketSpacing": true, 
  "arrowParens": "avoid", 
  "proseWrap": "never", 
  "endOfLine": "auto"
}
```
해당 설정을 통해서 일관된 프로젝트 구성을 가질 수 있도록 할 수 있습니다.
옵션의 자세한 정보는 공식 홈페이지에 나와있습니다.

⚠️주의사항⚠️

Extention을 설치했고, Plugin도 설정해서, 프로젝트 root에 prettierrc.json file이 있다면 프로젝트 내 설정을 우선시합니다.

ESLint, Prettier 동시에 사용하기

ESLint에서 일관된 텍스트 작성을 도와주는 기능을 가지고 있습니다.
그래서, Prettier와 ESLint를 같이 사용하게 되면 두 설정이 다 적용되어 충돌이 발생합니다.

이러한 문제를 해결하기 위해서 ESLint 내부에서 Prettier를 이용할 수 있도록 설정을 변경해야 합니다.

먼저 Prettier, ESLint를 모두 실행할 수 있는 환경을 만듭니다.
(앞 설정 참고)

추가적인 플러그인이 필요합니다.

eslint-config-prettier - elint와 중복되는 규칙을, prettier 쪽에서 알아서 꺼주는 역할을 합니다. 공식 홈페이지에 설명이 잘 나와있습니다.
eslint-plugin-prettier - prettier에 걸린 부분들을 eslint error로 걸리도록 하는 역할을 합니다. 공식 홈페이지에 설명이 잘 나와있습니다.

이 두 가지 플러그인을 등록하고 나서는 해당 내용으로 .eslintrc 파일을 수정해주어야 합니다.

{
  ...
  "extends": ["plugin:prettier/recommended"]
  ...
}

해당 내용은, 내가 설정한 .prettierrc 을 기반으로 eslint에서 해당 형식에 어긋나면 에러 처리를 해주겠다는 의미입니다.

권장 구성의 플러그인 다음 내용을 축소한 것과 같습니다.

{
  ...
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
  ...
}