Prettier, Stylelint, ESLint 시작하기

싸피 팀 프로젝트에서부터 사용했던 Pritter, ESLint. 회사에서 추가로 사용하는 Stylelint.
사용하면 자동으로 스타일을 맞출 수 있고, 문법 오류도 잡아줘서 편리하다. 하지만 잘못하면 엄청 귀찮아진다 ㅠ 코드 전부 빨간 줄이 생기고..ㅠㅠ

 

오늘도 그런 일이 있었다. 분명히 ESLint, Prettier, vscode setting에서 모두 작은따옴표를 사용하게 했는데(single quote), 파일을 저장하면 자동으로 큰 따옴표로 바뀌는 것이었다. 그리고 규칙에 안 맞는다고 코드에 전부 빨간 줄을 쳐서 보여줬다 ㅠㅠ

 

이건 vscode setting에서 Editor: Default Formatter를 잘못 설정해서 생긴 문제였다. 아래와 같이 'Prettier ESLint'로 해야 하는데, 'Prettier - Code formatter esbenp.prettier-vscode' 로 되어 있었다 ㅠㅠ

 

 

 

이 문제를 찾기 까지 여러 익스텐션을 깔고 지우고, 관련 파일의 코드를 작성하고 지웠다.. 이 김에 제대로 ESLint, Prettier, Stylelint에 대해 알고 싶어서 글을 쓴다~
각각이 무엇인지 알아보고, 개인 프로젝트에 적용하는 것까지가 목표이다!

 

먼저 chatGPT 선생님에게 여쭈어보았다!

출처: https://chat.openai.com/

 

 

 

각각 공식 홈페이지에서 쓱 보기~

https://eslint.org/

출처:https://eslint.org/

딱 소개에 큰 글씨로 자바스크립트 코드의 문제를 찾고, 고쳐준다고 쓰여있다! ㅎㅎ

 

https://stylelint.io/

출처:https://stylelint.io/

CSS linter라고 써있네~

 

https://prettier.io/

https://prettier.io/

 

여러 언어를 지원하는 code formatter라고 한다!

 

 

 

그러면 linter와 code formatter가 뭐가 다른 걸까?

https://chat.openai.com

 

Pretty-printing is the application of any of various stylistic formatting conventions to text files, such as source code, markup, and similar kinds of content.

Pretty-printers for source code are sometimes called code formatters or beautifiers.

소스 코드, 마크업 및 유사한 종류의 콘텐츠와 같은 텍스트 파일에 대한 다양한 문체 서식 규칙을 적용합니다.

소스 코드를 위한 Pretty-printers는 code formatters, beautifiers라고도 합니다.

-위키피디아 https://en.wikipedia.org/wiki/Prettyprint

 

Lint, or a linter, is a static code analysis tool used to flag programming errors, bugs, stylistic errors and suspicious constructs.

린트 또는 린터는 프로그래밍 오류, 버그, 스타일 오류 및 의심스러운 구조를 표시하는 데 사용되는 정적 코드 분석 도구입니다.

- 위키피디아 https://en.wikipedia.org/wiki/Lint_(software)

 

 

 

 

이제 개인 프로젝트에 적용해 보기!!!

기존 상황을 설명하겠다! CRA로 생성한 React + TypeScript 이다.

이 블로그를 참고해서 ESLint, Prettier를 세팅했다.  ㅎㅎ 그래도 좀 더 궁금한 점 찾아보고, 내 방식으로 정리했다.

1. CRA에서 기본적으로 세팅한 package.json의 관련 코드 삭제하기 (eslintConfig 안의 코드들)

2. eslint 설치 후 세팅

npm install eslint --save-dev

or 

yarn add eslint --dev

=> npx eslint --init

아래 코드를 커맨드에 입력하면 설치하고 세팅을 해준다고 한다.

npm init @eslint/config

세팅할 때 아래와 같이 여러 질문이 나온다. 각각 해당하는 걸 선택하면 된다. 

3. .eslintrc.json 파일이 생성된다!

4. 아래 명령어를 실행한다. Eslint로 src 폴더 전체 파일을 검사하고, 문제점을 터미널에 출력해준다.

npx eslint src/* --fix

이때 나는 에러가 발생했다 ㅠ

🐛 Error: Error while loading rule '@typescript-eslint/dot-notation'

🔮 위 에러 메시지를 보면 parserOptions의 project에 뭔가 추가해주라는 것 같다.  이 블로그  참고해서 해결했다. 무슨 의미인지는 잘 몰라서 더 찾아봤다. parserOptions은 구문 분석 옵션을 제어한다. parserOptions.project에는 TypeScript 프로젝트 구성 파일 (즉, tsconfig.json)의 경로를 지정해야 한다. 이를 통해 TypeScript 파일의 코드를 파싱, 분석할 때 옵션을 정한다. 

5. prettier 설치

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

or

yarn add --dev --exact prettier

6. .prettierrc.json 파일 생성하고 채우기

탭 간격, 코드 뒤에 세미콜론을 붙일 것인지, 큰 따옴표를 사용할 건지 작은 따옴표를 사용할건지 등등 여러 규칙을 설정할 수 있다.

// 공식 홈페이지 예시 (https://prettier.io/docs/en/configuration.html) 
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

https://prettier.io/docs/en/options.html

7. .prettierignore 파일하고 pritter로 체크하지 않을 것들 채우기

// 공식 홈페이지의 예시
build
coverage

8. 모든 파일 format 맞추기

npx prettier --write .

or

yarn prettier --write .

+  vs code에서 파일 저장할 때마다 prettier, ESLint 동작하게 하기 / vscode extension...