Prettier 란?

01. 코드 서식

• 코드 서식이란?
  ==> 코드의 형식, 다시 쉽게 말하면 우리가 코드를 작성하는 방식을 말한다.
  ==> Space, Tab, line break, semicolon 등을 개인마다 다르게 사용한다.
  ==> 한줄에 작성하는 코드 작성 길이도 포함된다.
  • 좋은 코드는 가독성이 좋은 간결한 코드도 좋은 코드라 불리기에 코드 서식은 개발자에게는 중요한 부분
• Prettier
  ==> 이런 부분을 Prettier로 해결할 수 있다. Prettier는 코드 서식 관리 도구다.

1. npm i prettier 설치

2. app.js가 있는 폴더에 .prettierrc.js 파일 생성

3. 생성한  파일에 기본 설정 추가하기

module.exports = {
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "tabWidth": 2, // 탭 너비 
  "singleQuote": true, // single 쿼테이션 사용 여부
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
}

4. package.json 파일에 스크립트 추가하기

{
    "name": "여러분의 프로젝트 이름일거예요",
    "version": "1.0.0",
    "scripts": {
        "start": "node app.js",
        "prettify": "prettier --write *.js **/*.js"
    },
... 생략
}

5. 터미널에서 npm run prettify 실행 (적용된 것 확인하기)

6. (매번 스크립트를 직접 실행하는 것이 귀찮을 때!!) VS code에서 확장 플러그인을 통해 사용

     prettier 플러그인 설치

7. 설치 후에 Window는 정렬하는 Shif + Alt + F를 누르면 Configure Default Formatter 창이 나온다.

8.  Configure 항목을 선택한다. "Select a default formatter ..."라고 뜬다. 여기서 "Prettier - Code formatter"를 선택한다.

9. 다시 변경 사항을 확인하면 된다.

 

==> 위와 같은 방법으로 코드 서식을 쉽게 설정할 수 있다.