사이트: https://github.com/prettier/prettier
Prettier는 코드 포맷터입니다. 아래와 같은 것들을 지원합니다.
npm install prettier --save-dev
npm install prettier -g
prettier [opts] [filename ...]
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"
--write파일이 재작성되어 저장됩니다.
줄바꿈 길이을 지정
| Default | CLI Override |
|---|---|
120 | --print-width <int> |
들여쓰기할 공백수 지정
| Default | CLI Override |
|---|---|
4 | --tab-width <int> |
스페이스 대신 탭으로 들여쓰기
| Default | CLI Override |
|---|---|
false | --use-tabs |
명령문의 끝에 세미콜론을 추가
true: 모든 문장의 끝에 세미콜론을 추가한다.false: 오직 꼭 필요한 부분의 라인의 처음에 추가한다.| Default | CLI Override |
|---|---|
true | --no-semi |
큰 따옴표 대신 작음 따옴표를 사용
| Default | CLI Override |
|---|---|
false | --single-quote |
가능하면 여러 줄을 입력 할 때마다 후행 쉼표를 추가
"none": 후행쉼표를 추가하지 않는다."es5": ES5에서의 유효한 쉼표를 추가"all": 가능한 곳에는 후행쉼표를 추가| Default | CLI Override | ||
|---|---|---|---|
"none" | `--trailing-comma <none | es5 | all>` |
객체 리터럴의 괄호 사이에 공백을 출력
true: 예 { foo: bar }false: 예 {foo: bar}| Default | CLI Override |
|---|---|
true | --no-bracket-spacing |
.prettierrc.json를 기본적으로 사용
{
"printWidth": 100,
"parser": "flow"
}
eslint의 overrides에서 차용
{
"semi": false,
"overrides": [{
"files": "*.test.js",
"options": {
"semi": true
}
}]
}
.prettierrc.json이 루트디렉터리에 존재
{
"printWidth": 120,
"trailingComma": "all",
"tabWidth": 4,
"singleQuote": true,
"semi": true,
"useTabs": false,
"bracketSpacing": true
}
Preperences -> Tools -> External Tools+ 클릭하여 새로운 exteral tool 생성 \
parameters 에 --write --trailing-comma=all --tab-width 4 --print-width 120 --single-quote $FilePathRelativeToProjectRoot$ 를 추가
Preperences -> Keymap위에는 단축키 command + shift + p에 prettier 를 등록한 모습
Prettier - JavaScript formatter 플러그인 설치 \
사이트: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode \
링크
settings.json에 "editor.formatOnSave": true로 활성화
prettier를 pre-commit 툴과 함께 사용할수 있다. git에 커밋하기전에 git add 통해 staged로 표시된 파일을 재포맷하여 저장한다.
husky 모듈과 lint-staged 모듈을 이용
npm install --save-dev lint-staged husky
package.json에 설정{
"scripts": {
"precommit": "lint-staged"
},
"lint-staged": {
"*.{js,json,css}": [
"prettier --write",
"git add"
]
}
}