[#1] Code Convention setting with ESLint & Prettier

[hanbin9775]

ESLint 와 Prettier 플러그인을 통해 본 프로젝트의 문법적인 오류나 안티 패턴을 방지하고 일관된 코드 스타일로 작성되도록 할 것이다.

[hanbin9775]

ESLint

ESLint는 JavaScript, JSX의 정적 분석 도구로 오픈 소스 프로젝트이다. JSLint, JSHint와 같이 다른 JavaScript 정적 분석 도구들도 있지만, ESLint가 커스터마이징이 쉽고 확장성이 뛰어나 많이 쓰이고 있는 추세이다. 따라서 본 프로젝트에서도 ESLint를 사용하고자 한다.

설정 공유

ESLint는 Shareable Configs라는 기능을 제공하고 있다. 이는 누군가 만들어 놓은 ESLint 설정을 npm을 이용해 쉽게 설치, 확장해서 사용할 수 있는 기능이다. 그래서 본 프로젝트에선 직접 설정을 만들고 규칙을 추가하기보다 잘 정립된 설정을 가져다 쓸 것이다.

설치

최근 6개월간 설치된 eslint package 비교이다. airbnb가 압도적이다. 따라서 본 플젝에서도 airbnb 설정을 사용할 것이다.
eslint-config-airbnb 패키지는 기본적으로 ECMAScript 6+와 (자바스크립트란 소리) 리액트를 포함하는 airbnb ESLint 규칙을 제공하고 아래 5개의 패키지들을 필수로 한다.
eslint eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y

위 패키지를 한번에 설치하는 커맨드는 다음과 같다.
npx install-peerdeps --dev eslint-config-airbnb

또 본 플젝에서는 typescript도 함께 사용하기 때문에 다음과 같은 패키지들도 추가로 install 해주자.
@typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc 설정

이제 eslint에 대한 세부 설정을 해줄 것인데 이러한 작업을 명시해주는 파일이 .eslintrc이다.
.eslintrc로 json 파일 형태로 또는, .eslintrc.js로 js module 방식으로 작성할 수 있다.

eslintrc 파일의 핵심 구성 정보는 env, globals, rules 로 구성되어있다.

• Env : 스크립트 실행환경에 대한 설정, 사전 전역 변수 설정.
• Globals : 사용자가 추가하는 전역 변수 설정.
• Rules : 활성화 규칙 및 오류 수준을 설정할 수 있는 영역.

이 외에도 extends, plugins 를 키로 사용하여 규칙들을 원하는대로 적용을 할 수 있는데
이는 설치한 플러그인들의 적용과 설정에 관한 것들이다.

참고 및 출처

https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/
https://velog.io/@_jouz_ryul/ESLint-Prettier-Airbnb-Style-Guide%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0
https://www.npmtrends.com/eslint-config-airbnb-vs-eslint-config-google-vs-standard

[hanbin9775]

Prettier

Prettier는 코드를 정해진 규칙에 따라 자동으로 정리해주는 기능을 제공한다.

설치

npm install --save-dev --save-exact prettier

.prettierrc 설정

prettier도 마찬가지로 세부설정에 대한 명세를 .prettierrc 파일에 작성한다.

{
  "singleQuote": false,
  "parser": "typescript",
  "semi": true,
  "useTabs": false,
  "printWidth": 80,
  "endOfLine": "auto"
}

참고 및 출처

https://www.npmtrends.com/eslint-config-airbnb-vs-eslint-config-google-vs-standard

[gigibean]

에러: https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21

https://velog.io/@mokyoungg/TS-CRA-TypeScript-Eslint-Prettier-VSC
타입스트크립트 리액트 설정(CRA+ TypeScript + Eslint + Prettier, VSC) 위 링크 참고용 첨부합니다 :)