Prettier 설정

프리티어란?

정해진 코딩 스타일을 따르도록 변환해주는 도구, ESLint랑 같이 쓴다.

설치

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

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

.prettierrc.js / .prettierignore 파일 생성

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

실제 프로젝트에서는 Prettier는 단독 CLI 도구가 아닌 일반적으로 ESLint와 같은 린터(Linter)와 통합(itegration)해서 사용하는 경우가 많습니다.

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](https://eslint.org/docs/latest/user-guide/integrations)와 [[Prettier](https://prettier.io/docs/en/editors.html)](https://prettier.io/docs/en/editors.html)를 참고하시면 됩니다.

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