Prettier란?

"정해진 코딩 스타일을 따르도록 변환해주는 도구"
실제 프로젝트에서는 Prettier는 단독 CLI 도구가 아닌 일반적으로 ESLint와 같은 린터(Linter)와 통합(itegration)해서 사용하는 경우가 많다.

설치

npm install --save-dev --save-exact prettier

--save-exact는 버전이 달라지면서 생기는 스타일의 변화를 막기 위해 사용

.prettierrc.js / .prettierignore 파일 생성

touch .prettierrc.js  
touch .prettierignore
// 여기에 커스텀 옵션 추가하면 된다.

---

ESLint와 통합 및 충돌방지를 위한 설정_1

먼저 자신의 자바스크립트 프로젝트에 prettier NPM 패키지를 개발 의존성으로 설치

npm i -D prettier

그 다음 ESLint와 통합을 위해서 2개의 NPM 패키지를 추가로 설치

$ npm i -D eslint-config-prettier eslint-plugin-prettier
		   // 충돌할 설정을 비활성화   //코드를 포맷할 때 prettier를 사용하게 만든다

ESLint와 통합 및 충돌방지를 위한 설정_2

마지막으로 해당 프로젝트의 .eslintrc.js나 .eslintrc.json과 같은 ESLint의 설정 파일을 열어서 다음 설정을 추가.

{
  "extends": ["plugin:prettier/recommended"]
}

기존에 extends 옵션에 다른 값들이 있는 경우, 기존 설정보다 우선하려면 배열 내에 맨 뒤에 위치시키야 함을 주의!

---

ESLint Prettier 적용 확인하기

eslint lintTest.js --fix    // 린트에 프리티어 확장을 설치한 경우
prettier --check .          // 프리티어로 체크했을때 문제가 있는 파일 목록 출력
prettier --write  test.js   // test.js파일을 포맷팅해서 덮어쓴다

vscode전역에서 사용하기

VSCode의 Setting.json으로 들어가 다음과 같은 항목이 있는지 확인( 없으면 추가)

{
.
.
.
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
.
.
.
}

VSCode에서 ESLint, Prettier 설정하기

기본적인 ESLint와 Prettier 설정을 마쳤지만 VSCode에서 ESLint와 Prettier를 온전히 사용하기 위해서는 VSCode에서 추가적인 설정들을 해주어야 한다.

다른 에디터를 사용하시는 분들은 ESLint와 Prettier를 참고.

1. VSCode의 Extensions 탭에서 ESLint와 Prettier 확장 프로그램을 설치
2. VSCode의 setting.json 파일에 아래 내용을 작성

// 파일을 저장할 때마다 `eslint` 규칙에 따라 자동으로 코드를 수정
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },

// `prettier`를 기본 포맷터로 지정
"editor.defaultFormatter": "esbenp.prettier-vscode",

// 파일을 저장할 때마다 포매팅 실행
"editor.formatOnSave": true,

이제 파일을 저장할 때마다 ESLint 규칙에 따라 자동으로 코드가 수정되고 Prettier 설정에 따라 자동으로 파일이 포매팅 된다. 🎉

Prettier 설정목록

구글링과 강의내용을 발췌한 부분이니 참고바람.

{
  "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 방식 사용
}

셋팅하는법

JSON:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

JS:

// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};