반응형
Prettier
Prettier는 코드를 정해놓은 규칙에 따라 자동으로 정렬하여 가독성을 높이고 스타일을 통일시켜 정리해주는 도구(Code Formatter)다. 코드 작성 시 들여 쓰기를 2칸을 할지, 4칸을 할지 등을 정하여 설정해두면, Prettier가 코드 내용은 건드리지 않고 구조적 뷰만 변경하여 새로 작성하는 것이다. 코딩 컨벤션을 갖고 팀 프로젝트를 할 때 유용한 도구다.
ESLint vs. Prettier
ESLint: 코드 포맷터의 역할도 하지만, 주로 코드 에러를 잡아내고 문법을 강제하는 등 코드 품질 개선에 중점을 둠.
Prettier: 코드가 예쁘게 보이도록 하는 것에 중점을 두며, 코드 에러를 잡아내지는 못함.
Prettier가 지원하는 언어
- JavaScript, including ES2017
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- JSON
- GraphQL
- Markdown, including GFM and MDX
- YAML
사용 방법
1. 설치
VSCode를 사용한다면 Extension에서 손쉽게 설치할 수 있다. 터미널에서는 아래처럼.
// npm
npm i prettier
// yarn
yarn add prettier
2. 설정
.prettierrc.json 파일에서 아래 예시대로 원하는 옵션을 설정하면 된다.
{
"arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
"bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부
"endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
"htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
"jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
"jsxSingleQuote": false, // JSX에 singe 쿼테이션 사용 여부
"printWidth": 80, // 줄 바꿈 할 폭 길이
"proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
"quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
"semi": true, // 세미콜론 사용 여부
"singleQuote": true, // single 쿼테이션 사용 여부
"tabWidth": 2, // 탭 너비
"trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
"useTabs": false, // 탭 사용 여부
"vueIndentScriptAndStyle": true, // Vue 파일의 script와 style 태그의 들여쓰기 여부 (v1.19.0)
"parser": '', // 사용할 parser를 지정, 자동으로 지정됨
"filepath": '', // parser를 유추할 수 있는 파일을 지정
"rangeStart": 0, // 포맷팅을 부분 적용할 파일의 시작 라인 지정
"rangeEnd": Infinity, // 포맷팅 부분 적용할 파일의 끝 라인 지정,
"requirePragma": false, // 파일 상단에 미리 정의된 주석을 작성하고 Pragma로 포맷팅 사용 여부 지정 (v1.8.0)
"insertPragma": false, // 미리 정의된 @format marker의 사용 여부 (v1.8.0)
"overrides": [
{
"files": "*.json",
"options": {
"printWidth": 200
}
}
], // 특정 파일별로 옵션을 다르게 지정함, ESLint 방식 사용
}
3. 적용
prettier test.js --write
참고할 자료
https://prettier.io/docs/en/options.html
Prettier · Opinionated Code Formatter
Opinionated Code Formatter
prettier.io
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
프레임워크 - React.js 리액트란? (0) | 2022.02.08 |
---|---|
빌드 도구 - Linter, ESLint (0) | 2022.02.07 |
빌드 도구 - 모듈 번들러, Parcel (0) | 2022.02.03 |
빌드 도구 - 모듈 번들러, Rollup (0) | 2022.01.28 |
빌드 도구 - 모듈 번들러, webpack (0) | 2022.01.26 |