[프로젝트][개발환경 세팅] ESLint & Prettier

두 기능 모두 두번째 프로젝트 때 처음 사용해봤는데, 두 기능 다 정말 유용했다.

이번 프로젝트에도 두 기능을 모두 적용해보려한다.

ESLint와 Prettier

EsLint는 Linter이고 Prettier는 Formatter이다

EsLint는 소스 코드에 문제가 있는지 검사하여 문제가 있는 부분에 flag를 달아주는 소프트웨어 도구
Prettier는 소스 코드를 일관된 스타일로 작성할 수 있게 코드를 변환해주는 소프트웨어 도구

EsLint규칙은 크게 '코드 스타일 규칙'과 '코드 퀄리티 규칙'으로 나누어짐.
이 중 코드 스타일 규칙은 코드 포매팅을 수행하는 Prettier와 역할이 겹치고 충돌이 일어나기도 함
(두번째 프로젝트때도 실제로 이런 일이 있었다.)

Prettier 측에서 제공한 해결 방법 중 가장 추천하는 방법은 충돌하는 Eslint 규칙을 꺼주는 eslint-config-prettier 방법이다.

ESLint 설정

Eslint 설치

yarn add eslint --dev

그리고

init @eslint/config를 하게 되면 ESLint 설정을 어떻게 할지 질문지가 터미널창에 나오게되는데 그에 대해 차례대로 답변을 해서 선택을 하게 되면 .eslintrc파일이 선택한 형식에 따라 json이나 js파일로 생성될 것이다.

질문지 예시 : 링크텍스트 참고 블로그!

이렇게 설정을 마쳤지만, 필자의 프로젝트는 Next.js 환경에서 개발을 해야했고 개발 환경을 처음부터 다시 세팅하게 되었다....

ESLInt 설정(with Next.js)

Next.js로 프로젝트를 시작할 경우 ESLint를 사용할지 초기 설정 때 터미널창에서 물어본다.

npx create-next-app . ~~ 명령어를 치게 되면 아래로 쭉 선택 질문이 나온다. 그 질문 중 ESLint를 사용할것이냐는 질문이 나온다.

그렇게 선택을 하면 자동으로 .eslintrc.json 파일이 생성된다.

이제 내가 적용하고 싶은 EsLint 규칙들을 직접 찾으면서 추가해주는 과정을 거쳐야한다.

ESLint 규칙
.eslintrc.json 파일 구성

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript",
    "plugin:prettier/recommended",
    "prettier"
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": ["tsconfig.json"]
  },
  "plugins": ["react", "@typescript-eslint"],
  "rules": {
    "react/react-in-jsx-scope": "off",
    "react/jsx-props-no-spreading": "off",
    "import/extensions": "off",
    "prettier/prettier": ["error", { "endOfLine": "auto" }],
    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
    "react/require-default-props": "off",
    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
    "react/jsx-filename-extension": [
      2,
      { "extensions": [".js", ".ts", ".tsx"] }
    ]
  }
}

이것저것 뭐가 많은데 여러 블로그를 찾아보며 추가를 해서 그렇다.
네이버와 우테코에서도 쓰고 많이들 쓰는 airbnb 관련 규칙들, typescript 관련 규칙, next.js 관련 규칙, prettier와 충돌하는 경우 강제로 prettier 규칙에 따르게 하는 등등 필요한 것들을 찾아서 추가했다.

Prettier 설정

prettier 설치

yarn add --dev --exact prettier

.prettierrc 파일 구성

module.exports = {
    printWidth: 80, // 한 줄 최대 문자 수
    tabWidth: 2, // 들여쓰기 시, 탭 너비
    useTabs: false, // 스페이스 대신 탭 사용
    semi: true, // 문장 끝 세미콜론 사용
    singleQuote: false, // 작은 따옴표 사용
    trailingComma: 'all', // 꼬리 콤마 사용
    bracketSpacing: true, // 중괄호 내에 공백 사용
    arrowParens: 'avoid', // 화살표 함수 단일 인자 시, 괄호 생략
    proseWrap: 'never', // 마크다운 포매팅 제외
    endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
};

comand+s로 단축키 설정하기

(인텔리제이 환경)

Setting -> Languages & Frameworks -> JavaScript -> Prettier

Prettier package: 프로젝트 내의 Prettier 폴더 선택

체크박스 두개다 체크하기

끝!