JS Algorithm
database
HTML/CSS
Javascript
Next
React
Terminal
Typescript
Vue
Etc
Git
목록 열기
December 17, 2022
프로젝트별 프리티어(prettier) 설정하기
프리티어는 코드를 깔끔하게 자동적으로 정리하기 위해 사용하는 VSCode 확장 프로그램이다. VSCode 내에서 모든 프로젝트에 대하여 일괄적으로 적용할 수 있으나, 프로젝트 별로 다른 설정을 하고 싶다면, 따로 설정이 필요하다.
.prettierignore 파일
.prettierignore 파일은 prettier를 적용하지 않을 파일들을 지정하고 루트 경로에 생성한다.
다음과 같이 작성할 수 있다. 이는 node_modules 폴더 내의 파일들과 public 폴더 내의 파일들을 정렬하지 않는다는 의미이다.
node_modules
public
.prettierrc 파일
.prettierrc 파일은 프리티어 옵션을 설정하는 json 형태의 파일이다.
다음과 같이 작성할 수 있다.
{
"semi": true,
"singleQuote": true,
"tabWidth": 2
}
semi
- 세미콜론(;) 사용여부 설정singleQuote
- 쌍따옴표 대신 작은 따옴표 사용tabWidth
- 탭의 간격 설정
이 외의 다양한 옵션들이 있으니 직접 찾아보도록 하자.
명령어로 프리티어 포맷팅하기
- package.json 파일내 scripts를 추가한다.
"scripts": {
...
"prettier-fix": "prettier --write ."
}
-—write
옵션은 지정된 파일의 내용이 포맷팅된다..
대상 파일을 닷(.)으로 설정하면 모든 .prettierignoㄴe 에서 설정한 파일을 제외하고 모든 파일의 내용을 포맷팅한다.
- 터미널에서 다음 명령어로 prettier 패키지를 설치한다.
yarn add -D prettier
- prettier 실행하기
1번에서 작성한 스크립트를 실행하여 간편하게 포맷팅할 수 있다.
prettier-fix
Top