prettier, eslint에 대해
목차
prettier
eslint
React + TypeScript에 Prettier, ESLint 적용하기
Prettier
코드 포맷팅을 위한 vscode extension
사용자가 직접 코드 포맷팅 형식 지정 가능
협업 프로젝트에서의 코드 통일성과 개발 생산성 향상 가능
prettier 옵션 설정 방법
package.json 파일에 prettier 설정
//package.json
{
...
"devDependencies": {
"@types/react": "^18.2.66",
...
"prettier": "3.2.5",
"vite": "^5.2.0"
},
"prettier": {
"singleQuote": true,
"printWidth": 100,
"arrowParens": "avoid",
"tabWidth": 8
}
}
별도의 설정 파일 생성
별도의 파일을 생성해서 옵션을 설정할 수도 있다!
Prettier 속성 파헤치기
홀따옴표
default: 문자열에 쌍따옴표(””)
홀따옴표(’)를 사용하고 싶다면
{
"singleQuote": true
}
한 줄 최대 글자수
default: 한 줄에 최대 80자
최대 글자수를 늘리고 싶다면
{
"printWidth": 100
}
세미콜론
default: 각 문장 뒤에 세미콜론 붙임
세미콜론을 생략하고 싶다면
{
"semi": false
}
후행 쉼표
default: 여러 줄에 걸친 배열이나 객체, 매개변수의 마지막 요소에도 쉼표를 붙임
쉼표를 제거하고 싶다면
{
"trailingComma": "none"
}
탭 사용
default: 들여쓰기할 때 탭 문자 대신 여러 개의 공백 문자 사용
탭 문자로 들여쓰기하고 싶다면
{
"useTabs": true
}
탭 너비
default: 탭 너비 공백 2칸 사용
탭 너비를 조정하고 싶다면
{
"tabWidth": 4
}
포맷팅을 원치 않는 파일
Git과 같은 버전 컨트롤 시스템에서 사용하는 디렉토리와 npm 패키지가 저장되어 있는 디렉토리는 포맷팅 수행하지 않음
이 외에 포맷팅을 하지 말아야 한다면
.prettierignore파일을 생성하고 그 안에 경로 나열!
설정 옵션과 관련하여
Prettier의 기본 설정은 자바스크립트 커뮤니티에서 오랫동안 합의된 관행과 모범 사례를 기반으로 결정되었고 사용자의 피드백을 수렴하고 최신 트랜드를 반영하기도 한다고..
⇒ 설정 옵션 변경을 최소화하는 것을 추천 //인용 출처: https://www.daleseo.com/js-prettier-config/
ESLint
자바스크립트 문법의 에러를 표시해주는 자바스크립트 linter
linter
소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(flag)를 달아놓기 위한 도구
ESLint 설정 옵션
설정 파일
다양한 형식의 설정 파일 지원 (ex, JSON, YAML, JavaScript)
설정 파일 이름 =
.eslintrc.확장자⇒ (ex..eslintrc.json,.eslintrc.yml)설정 파일을 사용하지 않고
package.json파일의eslintConfig속성으로 ESLint 설정도 가능but 규모가 커질수록 유지보수와 가독성을 위해 설정파일에 관리하는 것 추천
root
ESLint 설정을 위한 여러 개의 파일 생성 가능
root 속성의 값이 true로 되어있는 설정 파일까지만 적용됨
상위 폴더에 있는 설정 파일에 영향 받지 않으려면 root를 true로 설정!
env
env는 environment의 줄임말로, 설정 환경에 대한 값
프로젝트가 어떤 “환경”에서 실행되는 코드인지 말해주는 부분
//package.json
{
"name": "package",
...
"env": {
"brower": true
},
}
plugins
기본 규칙 외의 추가적인 규칙을 사용 가능하게 함
단지 사용 가능하게 하는 도구라 extends나 rules를 통해 추가적인 설정을 해야 실제로 작동함
extends
공개되어 있는 설정을 가져와 base로 설정 가능
Google, Facebook, Airbnb와 같은 기업에서 공개
{
"extends": ["airbnb"]
}
실제 적용해보기
react + typescript, vite, yarn 환경입니다!
먼저, 리액트 프로젝트를 생성!
yarn create vite
위의 코드로 설치를 시작하면 여러가지 질문들에 답을 하고
vite로 프로젝트를 생성해보면 자동으로 .eslintrc파일이 생성!
짜잔~~ 요렇게! 이 아래는 저의 초기 eslintrc파일입니다
이제 이 파일에 원하는 설정 옵션을 설정해주면 됩니다.!
그러면 코드를 작성하다가 에러가 뜨는데 에러창을 보면 eslint가 만들어주는 에러라고 뜨게됩니다. 그때는 괜히 했나 생각이들기도했지만 에러를 참 잘 잡아주는 것 같더라구요 ^ __ ^
Prettier
프리티어 설치는 터미널에서 yarn (또는 npm) 명령어로 합니다
yarn add prettier --dev
설치 중인 모습…
여기서 프리티어랑 eslint 모두 스타일을 건들 수 있으니 충돌을 방지하기 위해 plugin을 설치해줍니다
yarn add eslint-plugin-prettier --dev
그 후 .prettierrc 파일을 만들고 원하는 규칙을 생성해줍니다~~
위에서 다뤘던 규칙들을 사용해봅시다 😊
이렇게 순조롭게 진행되는 줄 알았지만.. 규칙을 바꿔봐도 적용이 안되는 것을 발견했다….!
트러블 슈팅
생긴 문제
프리티어를 설치만 하고 실제로 적용이 되는지는 확인해보지 않았었다…
되고 있는 줄알았다 ㅎㅎ이번에 프리티어 옵션 설정을 실제로 해보려고 했는데 변함이 없는것이다!??!
그래서 눈에 띄는 탭사이즈를 8로 했는데도 여전히 2로 되어 있었다…..!
..적용 안됨
혹시 몰라서 프리티어를 다시 설치도 해봤지만 여전히 똑같음..
그러던 중 프리티어 적용에 대한 아티클을 하나 찾았다
이 아티클처럼 따라가 보았다..
Fomat on Save을 체크해주고..
default Formatter도 Prettier로 바꿔주었다
(default Formatter 찾기 힘드시면 검색으로 해보세요!)
위의 두개를 설정하고 파일 돌아와서 수정한 것을 저장하면
== 된다!!!! 😊
이번 트러블 슈팅을 통해 알게 되었는데
vscode 하단에 있는 Prettier가 체크 표시가 되면 해당 파일에 적용이 된 것이고,
위처럼 체크표시가 두 번 겹쳐져 있으면 적용이 안되었다는 뜻이었다..!!
이 당연한걸 몰랐냐고 하시면.. 넵 몰랐습니당ㅎㅎ
Prettier와 ESLint 적용과 트러블 슈팅까지 끝!
감사합니다~~
