[JS/library] Prettier 환경설정 방법

해당 글은 자바스크립트 라이브러리 'Prettier'에 대해서 이해하고 환경설정을 하기 위한 목적으로 작성된 글입니다.

 

 

1) Prettier 이해하기

---

💡 Prettier는 코드를 읽어 들여서 사용자가 지정한 '옵션'에 따라 코드를 다시 포맷팅(정렬)하는 "코드 포맷터"입니다. 코드 스타일에 초점을 맞추고 있기 때문에, 코드 품질을 위해 사용하는 ESLint와는 성격이 다릅니다

 

 

Prettier 지원 언어들

* JavaScript (including experimental features)
* JSX
* Angular
* Vue
* Flow
* TypeScript
* CSS, Less, and SCSS
* HTML
* JSON
* GraphQL
* Markdown, including GFM and MDX
* YAML

 

참고) Prttier 공식 사이트 - Prettier 지원하는 언어들

Prettier · Opinionated Code Formatter

 

💡 왜 Prettier를 사용해야 할까?
- 개발자마다 코드 스타일이 다르다. 이를 하나의 스타일로 공통화된 코드 스타일로 바꾸게 되면 소스코드에 대한 유지보수를 하기도 편하고 다른 사용자의 소스코드 스타일을 공통화시킬 수 있기에 협업을 할 때에 추천을 합니다.

 

 

 

2) Prettier 세팅 방법

---

💡 해당 세팅은 'Visual Studio Code' 툴을 기반으로 React 프로젝트에 대해서 적용하기 위한 예시로 작성하였습니다.

 

1. 확장 프로그램 설치

---

1.1. [VSCode] VSCode에서 ‘Extensions’에 해당하는 탭을 선택합니다

---

 

1.2. [VSCode] ‘Prettier’를 검색하여 하단의 ‘Prettier - Code formatter'를 설치를 합니다.

---

 

2. 프로젝트 내 모듈 설치

---

💡 해당 모듈은 'npm' 혹은 'yarn' 패키지 매니저를 통해서 라이브러리를 설치를 합니다.

 

 

2.1. 프로젝트 모듈 설치 

---

# [npm] 개발 모드로 prttier를 설치합니다.
$ npm install --save-dev --save-exact prettier

# [yarn] 개발 모드로 prttier를 설치합니다.
$ yarn add --dev --exact prettier

💡 설치를 하게 되면 package.json 파일에 아래와 같이 추가가 됩니다.

{
	...	
	// 생성 부분
	"devDependencies": {
		"prettier": "2.5.1"
	}
}

 

 

2.2. '. prettierrc' 및 '. prettierignore' 파일 생성

---

💡 '. prettierrc' 파일은 prettier의 코드 옵션을 가지고 있는 파일이고
💡 '. prettierignore' 파일은 prettier 코드 옵션에 제외할 내용을 담을 파일 정보를 가지고 있는 파일입니다.

# .prttierrc.js 파일을 생헝합니다.
$ touch .prettierrc.js

# .prttierignore 파일을 생성합니다.
$ touch .prettierignore

 

 

2.3. '. prettierrc' 파일 구성하기

---

💡 해당 파일은 '. json' 혹은 '. js' 확장자 형태로 구성이 가능합니다.
💡 해당 작성글에서는 '. js' 형태로 구성을 하였습니다.

Option 명	API Override	default	Option 설명
printWidth	printWidth: <int>	80	- 코드 한줄의 개수
tabWidth	tabWidth: <int>	2	- 들여쓰기 너비 수(탭을 사용할 경우 몇칸을 띄워줄지)
useTabs	useTabs: <bool>	false	- 탭 사용 여부 (미사용 시 스페이스바로 간격조정을 해야함.)
semi	semi: <bool>	true	- 명령문의 끝에 세미콜론(;)을 인쇄합니다. - true: (;)를 추가함 / false : (;)를 지움
singleQuote	singleQuote: <bool>	false	- 큰따옴표("") 대신 작은따옴표('')를 사용여부 - true: 홀따옴표로 사용 / false : 큰따옴표로 사용
quoteProps	quoteProps: "<as-needed|consistent|preserve>"	as-needed	- 개체의 속성이 인용될 때 변경합니다. - "as-needed" - 필요한 경우에만 개체 속성 주위에 따옴표를 추가합니다. - "consistent" - 개체의 속성 중 하나 이상에 따옴표가 필요한 경우 모든 속성을 따옴표로 묶습니다. - "preserve" - 개체 속성에서 따옴표의 입력 사용을 존중합니다.
jsxSingleQuote	jsxSingleQuote: <bool>	false	- JSX내에서 큰따옴표("") 대신 작은따옴표('')를 사용여부 - true: 홀따옴표로 사용 / false : 큰따옴표로 사용
trailingComma	trailingComma: "<es5|none|all>”	es5	- 객체나 배열을 작성하여 데이터를 넣을때, 마지막에 후행쉼표를 넣을지 여부 - es5: 후행쉼표 제외 / none: 후행쉼표 없음 / all: 후행쉼표 포함
jsxBracketSameLine	jsxBracketSameLine: <bool>	true	- ">" 다음 줄에 혼자 있는 대신 여러 줄 JSX 요소를 마지막 줄 끝에 넣습니다 - true: 줄넘김하지 않음 / false: 줄넘김을 수행
bracketSpacing	bracketSpacing: <bool>	true	- 화살표 함수가 하나의 매개변수를 받을 때 괄호 사용여부 - "always"- 항상 괄호를 포함합니다 - "avoid"- 가능하면 괄호를 생략합니다.
bracketSameLine	bracketSameLine: <bool>	false	- 혼자 있는 대신 여러 줄 HTML(HTML, JSX >, Vue, Angular) 요소를 마지막 줄 끝에 넣습니다(자체 닫는 요소에는 적용되지 않음).
arrowParens	arrowParens: "<always|avoid>"	always	- 단독 화살표 기능 매개변수 주위에 괄호를 포함합니다.

 

참고) 공식 사이트 - Prettier 옵션 상세 설명

Prettier · Opinionated Code Formatter

 

💡 참고) 해당 js 파일은 제가 선택한 옵션에 따라서 적용되는 포맷팅을 적용하였습니다.

 

/**
 * @name: .pretteierrc.js
 * @description: Prettier는 코드를 읽어들여서 사용자 옵션에 따라 코드를 다시 포맷팅하는 "코드 포맷터" 입니다.
 * @version: 2.0
 */
module.exports = {
	/**
	 * @template: printWidth: <int>
	 * @description: 코드 한줄의 개수
	 * 추천) 가독성을 위해 80자 이상을 사용하지 않는 것이 좋습니다.
	 * 추천) 코드 스타일 가이드에서 최대 줄 길이 규칙은 종종 100 또는 120으로 설정됩니다.
	 */
	printWidth: 80,

	/**
	 * @template: tabWidth: <int>
	 * @description: 들여쓰기 너비 수(탭을 사용할 경우 몇칸을 띄워줄지)
	 */
	tabWidth: 1,

	/**
	 * @template: useTabs: <bool>
	 * @description: 탭 사용 여부 (미사용 시 스페이스바로 간격조정을 해야함.)
	 */
	useTabs: true,

	/**
	 * @template: semi: <bool>
	 * @description: 명령문의 끝에 세미콜론(;)을 인쇄합니다.
	 * true: (;)를 추가함
	 * false: (;)를 지움
	 */
	semi: true,

	/**
	 * @template: singleQuote: <bool>
	 * @description: 큰따옴표("") 대신 작은따옴표('')를 사용여부
	 * true: 홀따옴표로 사용
	 * false: 큰따옴표로 사용
	 */
	singleQuote: true,

	/**
	 * @template: jsxSingleQuote: <bool>
	 * @description: JSX내에서 큰따옴표("") 대신 작은따옴표('')를 사용여부
	 * true: 홀따옴표로 사용
	 * false: 큰따옴표로 사용
	 */
	jsxSingleQuote: true,

	/**
	 * @template: trailingComma: "<es5|none|all>"
	 * @description: 객체나 배열을 작성하여 데이터를 넣을때, 마지막에 후행쉼표를 넣을지 여부
	 * es5: 후행쉼표 제외
	 * none: 후행쉼표 없음
	 * all: 후행쉼표 포함
	 */
	trailingComma: 'all',

	/**
	 * @template: jsxBracketSameLine: <bool>
	 * @description: ">" 다음 줄에 혼자 있는 대신 여러 줄 JSX 요소를 마지막 줄 끝에 넣습니다
	 * true: 줄넘김하지 않음
	 * false: 줄넘김을 수행
	 */
	jsxBracketSameLine: true,

	/**
	 * @template: bracketSpacing: <bool>
	 * @description: 개체 리터럴에서 대괄호 사이의 공백을 넣을지 여부
	 * true: 공백을 넣음 { foo: bar }
	 * false: 공백을 제외 {foo: bar}
	 */
	bracketSpacing: true,

	/**
	 * @template: bracketSpacing: <'always'| 'avoid'>
	 * 화살표 함수가 하나의 매개변수를 받을 때 괄호 사용여부
	 * always : 괄호 사용
	 * avoid : 괄호 제거
	 */
	// arrowParens: 'avoid',

	// endOfLine: 'auto', // EoF 방식, OS별로 처리 방식이 다름
	// htmlWhitespaceSensitivity: 'css', // HTML 공백 감도 설정
};

 

2.4.prettier 적용하기 

---

💡 하단의 명령어를 커멘드에서 입력하면 Prettier를 지정한 옵션에 따라 적용하도록 처리가 됩니다.

# prettier 적용하기 
$ yarn prettier --write .

 

2.5. prettier 적용 체크하기 

---

하단의 명령어를 커맨드에 입력하면 지정한 옵션에 따라 잘 적용이 되었는지 체크를 하는 명령어입니다.

# prettier 적용 체크
$ yarn prettier --check .

 

 

 

3) VSCode 세팅 

---

💡 'Visual Studio Code'에서 저장 단축키를 눌렀을 경우, '자동으로 Formatting을 적용해주는 설정'에 대해서 세팅을 합니다.

1.  [VSCode] Go 탭 - ‘Go to File...’ 버튼을 누른다

---

 

 

2. [VSCode] ‘> Open settings’를 입력합니다

---

 

 

3. [VSCode] 해당 부분을 추가해줍니다.

---

// 기본 포멧팅 설정
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
// 해당 부분이 true 일 경우 저장할 경우 formatting 수행이 됨.
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

 

 

4. [VSCode] '저장'을 할 경우 자동으로 formatting을 수행이 됨을 확인하였습니다.

---

 

+ 꿀팁

---

1. 특정 코드에만 Prettier 문법을 제외하는 방법

---

💡 위에 Prttier를 적용하여 자동 정렬을 하게 되면 아래와 같이 정렬이 됩니다.

const prettierIgnore = () => {
    const str = 'hello';
    const chgStr = str
        .toLowerCase()
        .split('')
        .map((sItem) => {
            if (sItem.length >= 10) console.log('10자리 이하입니다.');
        });
};

 

💡 이를 제외하는 방법은 아래와 같습니다.
💡 주석으로 // prettier-ignore을 입력하면 해당 줄 구문이 prettier 문법이 적용되지 않은 상태로 출력이 됩니다.
💡 단, Prettier가 적용되기 이전으로 돌린 뒤 주석을 적어야 적용이 됩니다.

const prettierIgnore = () => {
    const str = 'hello';
    // prettier-ignore
    const chgStr = str.toLowerCase().split('').map((sItem) => {if (sItem.length >= 10) console.log('10자리 이하입니다.');});
};

 

[참고] 공식 사이트

 

Prettier · Opinionated Code Formatter

 

오늘의 결론

---

프로젝트에서 Prettier를 적용하여서 좀 더 체계적이고 공통화된 소스코드로 작업을 하자.

 

 

오늘도 감사합니다😀