[#1] Code Convention setting with ESLint & Prettier

hanbin9775 commented 3 years ago

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

hanbin9775 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

에러: 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) 위 링크 참고용 첨부합니다 :)

OPGG-HACKTHON / web-e-front