ESLint/Prettier 설정

ESLint?

• 사용자가 직접 정의한 것처럼 코드를 점검하며, 에러가 있으면 표시해준다. 문법 에러 뿐만 아니라 코딩 스타일까지 정할 수 있어서 마치 한사람이 코드를 작성한 것처럼 보이게 하기 대문에 협업할 때 매우 좋다!
  • 예를 들어 함수를 사용할 때 arrow function으로 사용할 것인지 그냥 사용할 것인지 등등..
  • 반복문을 사용할 때, for문이나 forEach, map등 내장함수 사용 등등..
• 코드와 코딩 컨벤션을 점검해주는 툴은 여러가지가 있지만 ESLint가 다양한 플러그인을 사용할 수 있기 때문에 확장성이 매우 높다!
• 코드 포맷터의 역할도 하지만 주로 에러 코드를 잡아내고 코드 문법을 강제하면서 코드 품질 개선에 중점을 둔다!

Prettier?

• Prettier는 코드 포맷터이다. EsLint처럼 코드 구현 방식이 아니라 줄 바꿈, 인덴트 간격, 공백, string에 따옴표를 하나 쓸 것인지 두개 쓸 것인지 등 텍스트를 일관성있게 작성하도록 도와주는 것이다!

ESLint / Prettier 사용하기

• 여기에 자세한 사용법이 나타나있다. 참고하면 좋을듯?

ESLint / Prettier 설치

• 만약 CRA를 사용해서 리액트 프로젝트를 구축하면 따로 ESLint를 설치하지 않아도 된다!
  • 즉, webpack으로 프로젝트를 빌드하면 아래처럼 ESLint를 설치하자

yarn add -D eslint

• prettier: prettier
• eslint-plugin-prettier: ESLint의 Formatting 규칙이 아닌 Prettier의 포맷 기능을 사용하게 해준다. Prettier에서 인식하는포맷 오류를 ESLint 오류로 나타낸다!
•  eslint-config-prettier:  Prettier의 설정 중 ESLint의 설정과 충돌이 나는 설정을 비활성화 해준다

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

ESLint 설정하기

• 루트 경로에 .eslintrc.js 파일을 생성해서 설정할 수 있다!
• 여기를 참고하여 ESLint 설정 할때 사용하는 plugin과 extends의 차이점을 알아두자!
• 여기를 참고하여 ESLint의 Rules에 대해 알아보자!
• rules 같은 경우는 off, warn, error를 줄 수 있는데 아래 같은 경우는 console을 사용하면 경고를 하겠다는 의미이다!

.eslintrc.js

module.exports = {
  // plugin:prettier/recommended  
  // root 디렉토리의 .prettierrc 파일이 있는지를 찾고, 해당 파일의 rule을 이용
  "extends": ["react-app", "plugin:prettier/recommended"],
  "env": {
    "browser": true
  },
  "ignorePatterns": ["node_modules/"],
  "rules": {
    // console을 사용하면 경고하기
    "no-console": "warn"
  }
}

Prettier 설정하기

• 루트 경로에 .prettierrc.js 파일을 생성해서 설정할 수 있다!
• 여기를 참고하여 Prettier의 다양한 설정에 대해 알아보자!
• 줄 바꿈, 인덴트 간격, 공백, string에 따옴표를 하나 쓸 것인지 두개 쓸 것인지 등을 설정해 줄 수 있다
• 아래는 간단한 예시만 만들었지만 원하면 설정을 더 추가할 수 있다!

.prettierrc.js

module.exports = {
  tabWidth: 2, // 들여쓰기 간격
  semi: true, // 문장 끝 세미콜론 사용
  singleQuote: true, // 쌍따옴표 대신 홑따옴표 사용 여부
  jsxSingleQuote: true // jsx파일에서 쌍따옴표 대신 홑따옴표 사용 여부
}

• 위처럼 설정을 한 후 프로젝트를 실행하면 세미콜론이 없는 부분에 사용하라고 에러가 나타날 것이고 따옴표를 두개 쓴 부분에 에러가 나타날 것이다!