ddaeunbblog

우아한 테크코스에서 요구한 바와같이 eslint와 prettier를 설정했던 내용들을 기록하기 위해 포스팅합니다.

ESLint & Prettier ?

사실 지금까지 여러 프로젝트나, 코드를 치면서 eslint나 prettier를 많이 사용해왔었습니다. 주로 사용하는 이유는 사실상 협업이 많이 컸던 것 같아요. 그리고 실제로 코드를 치면서도 가독성이 높아지는 것도 실감한적이 많습니다.
그럼 이 둘의 차이는 뭘까요?

결론부터 말하자면 ESLint 는 Linter 이고 Prettier 는 Formatter 입니다.

ESLint와 같은 Linter 는 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구입니다.
Prettier와 같은 Formatter는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구입니다.

ESLint 규칙은 크게 코드 스타일 규칙과 코드 퀼리티 규칙으로 나누어집니다. 이 중 코드 스타일 규칙이 코드 포매팅을 수행하는 Prettier와 역할이 겹치고 심지어 Prettier와 충돌이 일어날 수 있습니다.

Prettier 측에서도 이런 문제점을 모르지 않기 떄문에 3가지 해결 방법을 제공합니다.

Prettier와 충돌하는 ESLint 규칙들을 꺼주는 eslint-config-prettier
Prettier를 ESLint 규칙으로 실행시켜주는 eslint-plugin-prettier
Prettier를 실행한 직후 ESLint를 실행시켜주는 prettier-eslint
이 중 eslint-plugin-prettier와 prettier-eslint는 여러 단점들이 있어 Prettier 측에서는 eslint-config-prettier를 가장 추천한다고 합니다.

이 글에서도 eslint-config-prettier를 이용하여 Prettier와 ESLint의 충돌을 해결해 보겠습니다.

Eslint 설정

프로젝트 루트 폴더 위치에서 터미널에 npm init @eslint/config 명령어를 입력하여 ESLint 설정을 시작합니다. (이때, package.json 파일이 미리 생성되어 있어야합니다.)

기본적인 ESLint 설정을 어떻게 할지 질문을 여러 가지 할 텐데 답변은 아래를 참고하셔서 선택해 주시면 됩니다.

How would you like to use ESLint?
- To check syntax, find problems, and enforce code style
What type of modules does your project use?
- 우아한테크코스 미션들이 import로 불러오고있어 import/export 방식을 선택하였습니다.
Which framework does your project use?
- 프로젝트가 사용하고 있는 프레임워크를 선택 (None)
Does your project use TypeScript?
- 프로젝트가 TypeScript를 사용하는지 여부를 선택 (No)
Where does your code run?
- Browser와 Node 중 코드가 실행되는 환경을 선택 (우아한테크코스 미션들의 실행 환경은 Node, 중복 선택도 가능)
How would you like to define a style for your project?
- Use a popular style guide (air-bnb를 설정해주었습니다.)
- 그리고 필요한 peerDependencies를 모두 설치하겠다고 YES로 설정해주었습니다.
What format do you want your config file to be in?
- JavaScript, YAML, JSON 중 선호하는 설정 파일의 포맷을 선택
Which package manager do you want to use?
- npm, yarn, pnpm 중 선호하는 패키지 매니저를 선택 (저는 npm)

몇 가지 패키지들이 설치되고 프로젝트 루트 폴더에 .eslintrc.js (설정 파일 포맷을 JavaScript로 하였을 때) 파일이 생성됩니다.

여기까지 기본적인 ESLint 설정을 완료했습니다.
추가적으로 저는 아래 파일들을 설치해주었습니다.

npm i -D eslint-config-prettier eslint-plugin-prettier

그 다음, 아래와 같이 eslint를 설정해주었습니다.
root > .eslint.cjs

module.exports = {
  env: {
    es2021: true,
    node: true,
    browser: true,
    jest: true,
  },
  extends: ['eslint:recommended', 'airbnb-base', 'prettier'],
  plugins: ['prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    // 들여쓰기를 2까지만 허용한다.
    'max-depth': ['error', 2],
    // 안쓰는 변수 에러 발생
    "no-unused-vars": "error",
    // Console.log 사용불가
    "no-console": "error",
    // 표현식을 구분하는 연산자 옆에 줄 바꿈을 삽입
    'operator-linebreak': ['error', 'before'],
    // 함수의 길이 제한 
    'max-lines-per-function': ['error', { max: 15 }],
  },
};

Prettier 설정

먼저 prettier를 깔아주었습니다.

npm i -D prettier

아래와 같이 Prettier 설정을 해주었습니다.
root > .prettierrc

{
  // 쌍따옴표 대신 홑따옴표 사용
  "singleQuote": true,
  // 모든 구문 끝에 세미콜론 출력
  "semi": true,
  // 탭 대신 공백으로 들여쓰기
  "useTabs": false,
  // 들여쓰기 공백 수
  "tabWidth": 2,
  // 가능하면 후행 쉼표 사용
  "trailingComma": "all",
  // 줄 바꿈할 길이
  "printWidth": 80,
  // 객체 괄호에 공백 삽입
  "bracketSpacing": true,
  // 항상 화살표 함수의 매개 변수를 괄호로 감쌈
  "arrowParens": "always",
  // OS에 따른 코드라인 끝 처리 방식 사용
  "endOfLine": "auto"
}

vscode 설정

루트에 .vscode 폴더를 만들어주고, 그 안에 settings.json파일을 만들어줍니다.
root > .vscode > settings.json

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

그럼 설정 끝 !!

우테코 Eslint, Prettier 설정하기

ESLint & Prettier ?

Eslint 설정

Prettier 설정

vscode 설정

Reference Doc