ESLint 및 Prettier 설정 관련

[hovelopin]

📚 개념

Prettier와 ESLint의 간단한 개념부터 살펴보자면

Prettier란 자신이 작성한 코드를 정해진 코딩 스타일에 맞게 변환하는 것이고 ESLint란 작성한 코드 품질이 괜찮은지 검사하는 것 이라고 설명할 수 있습니다.
이 두 가지를 같이 사용하게 된다면 잠재적인 오류까지 발견할 수 있습니다. 또한 다른 사람들이 짠 코드를 볼 때 마치 내가 짠 코드와 같이 이해하기 쉽기 때문에 사용됩니다.

⚒️ 사용법

순서는 간략하게 아래와 같습니다.

1. ESLInt 적용을 위한 패키지 설치
2. Prettier 설정을 위한 패키지 설치
3. ESLint , Prettier를 자동화하기 위해 extension 설치

ESLint 모듈 설치

npm i -D eslint typescript eslint-plugin-react @typescript-eslint/parser @typescript-eslint/eslint-plugin

ESLint는 기본적으로 노드 모듈을 이용합니다.

• eslint-plugin-react는 React 문법 규칙을 사용
• typescript-eslint/parser는 타입스크립트 파서를 사용
• typescript-eslint/eslint-plugin는 typescript-eslint의 규칙들을 사용

저희는 프론트와 백엔드의 eslint와 prettier 설정을 달리하기 때문에 client 폴더로 들어가서 .eslintrc.json 파일을 생성후에 아래와 같은 설정을 진행합니다.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

ESLint에서는 자주 사용하는 규칙들을 확장 모듈로 제공합니다.
ESLInt recommended 규칙
추가적으로 추가할 규칙 사항들은 rules 밑에 적용시켜줍니다.

Prettier 모듈 설치

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

ESLint와 Prettier는 코드를 포맷팅해주는 도구로써 서로 충돌할 수 있기 때문에 서로 충돌하는 옵션이 있으면 Prettier를 사용하게 설정해주는것이 바로 eslint-config-prettier입니다.

따라서 위와 같이 모듈 설치를 진행한 후에 eslintrc.json에 가서 plugin과 extends에 아래와 같이 추가해줍니다.

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["react", "@typescript-eslint", "prettier"],
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "@typescript-eslint/explicit-module-boundary-types": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

마지막으로 .prettierrc 파일을 생성한 후에 아래와 같이 설정해줍니다.

{
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "useTabs": false,
  "semi": true
}

prettier에 대한 구체적인 설정도 공식문서에 자세하게 나와있으니까 참고해보시면 좋을 것 같습니다.

자동화 설정

마지막으로 prettier와 eslint를 매번 적용하기 위해서는 터미널에 아래와 같이 입력해줘야하는 번거로움이 있습니다.

• prettier
  npx prettier --write 파일 이름
• eslint
  npx eslint 파일 이름

이를 vscode 내에 있는 확장도구를 이용하면 매우 쉽게 코드를 작성하면서 오류를 확인 할 수 있습니다.

위와 같이 설정후에는 설정 => settings.json 파일에 가셔서 아래와 같이 추가해주면 우리는 오류를 바로 확인하면서 코드를 작성할 수 있습니다. 또한 저장함과 동시에 오류로 작성된 코드를 변경할 수 있습니다.

"eslint.enable": true
"editor.codeActionsOnSave": {
    "source.fixAll.eslint":true 
  }

끝까지 읽어주셔서 감사합니다.😁
추후 모르는 부분이나 궁금한 점이 있으시면 꼭❗️❗️❗️❗️❗️ 물어봐주세요!