Prettier, Eslint

초기세팅

✅ Prettier

: 코드 구현과는 관련없는, 일관된 텍스트 작성을 도와주는 도구. prettier를 사용하면, 프로젝트 내에서 일관된 텍스트 형식을 유지할 수 있다. 탭의 줄 간격이나, 줄바꿈 정도 등 텍스트 작성에 대한 많은 부분을 사용자가 원하는대로 설정할 수 있다.

💬 저의 경우, 1주차 과제때는 들여쓰기도 제대로 하지 못했었는데요, 황금잔디 조원들 덕분에 해당 익스텐션을 2주차부터 사용할 수 있었습니다.

스크린샷 2024-05-08 오전 10.31.38.png

✅ Prettier 설치 방법

→ 플러그인 없이 Vs code내에서 설치하는 방법

스크린샷 2024-05-08 오전 10.41.48.png

VSCode를 열어 ‘확장’을 클릭해 ‘prettier’ 검색하면 간편하게 설치가능!

✅ ESLint

: EcmaScript(Ecma라는 기구에서 만든 Script, 즉 표준 javascript를 의미) + Lint(에러가 있는 코드에 표시를 달아놓은 것)

: 자바스크립트 문법에서 에러가 발생하면 표시해주는 도구

: 에러표시에 대한 커스텀이 가능하다

✅ ESLint 설치방법

→ Prettier와 동일하다,,

✅ ESLint 설정

파서 옵션
: Javascript 언어 옵션을 지정할 수 있다.
- ecmaVersion: 사용할 ECMAScript 버전을 설정
- sourceType: parser의 export 형태를 설정
- ecmaFeatures: ECMAScript의 언어 확장 기능을 설정
프로세서
: processor는 다른 형식의 파일로 부터 Javascript 코드를 추출해내고, 추출한 코드를 대상으로 Lint를 수행하는 전처리기(preprocessor)와 후처리기(postprocessor)를 작성하는 용도로 사용할 수 있다.
환경(env)
: env는 사전 정의된 전역 변수 사용을 정의한다.
: 자주 사용되는 설정으로는 browser, node가 있다.
플러그인
: ESLint는 서드파티 플러그인 사용을 지원한다.
: 플러그인 패키지를 설치하고, 해당 플러그린을 plugins에 추가하여 사용 가능하다.
확장
: extends는 추가한 플러그인에서 사용할 규칙을 설정한다. 플러그인은 일련의 규칙 집합이며, 플러그인을 추가하여도 규칙은 적용되지 않는다.
규칙을 적용하기 위해서는 추가한 플러그인 중, 사용할 규칙을 추가해주어야한다.

✅ Prettier, ESLint 동시에 사용하는 방법

→ 둘 다 일관된 텍스트 작성을 도와주는 기능을 가지고 있으므로, Prettier, ESLint를 같이 사용하게 되면 두 설정이 다 적용되어 충돌이 발생한다.

eslint-config-prettier
: ESLint의 코드 포맷과 관련한 rule 중에서, prettier와 충돌하는 부분을 비활성화하기
```
yarn add -D eslint-config-prettier
```
위 명령어로 설치 후, extends의 가장 마지막에 추가
```
// .eslintrc.json
{
    "extends": [
      ...,
      "prettier"
    ]
}
```
eslint-plugin-prettier
: prettier가 인식하는 코드 포맷 오류를 **ESLint 오류로 출력하도록 해주는 플러그인**
yarn add -D eslint-plugin-prettier
// .eslintrc.json { "plugins": ["prettier"], "rules": { "prettier/prettier": "error" } }

최신 아티클