ESLint 와 Prettier 적용

이 문서에서 사용하는 Prettier 버전은 1.19.1 입니다. (2020.03.02)

---

Prettier

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

왜 사용할까요?

Prettier를 사용하는 가장 큰 이유는 공통된 코딩 스타일 가이드를 통해 스타일에 대한 토론을 중단하여 시간과 비용을 아끼기 위함입니다.
Why Prettier?

전체 옵션 (v1.19.1)

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

• whitespace-sensitive formatting
• Parser
• override

Prettier를 적용하는 방법

Prettier를 프로젝트에 적용하는 방법은 세가지가 있습니다.
자주 사용되는 VSCode 전역 설정 방식과 프로젝트별 .prettierrc 파일을 이용하는 방법에 대해서 알아보겠습니다.

• .prettierrc 설정 파일 사용
• VSCode 전역 설정 파일 사용
• Prettier 패키지 설치 후 CLI 사용

VSCode Prettier 확장 설치

Prettier 적용하기 - .prettierrc 파일

$ touch .prettierrc

/* .prettierrc file */
{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false,
  "vueIndentScriptAndStyle": false
}

포맷팅 전

function HelloWorld({greeting = "hello", greeted = '"World"', silent = false, onMouseOver,}) {

  if(!greeting){return null};

     // TODO: Don't use random in render
  let num = Math.floor (Math.random() * 1E+7).toString().replace(/\.\d+/ig, "")

  return <div className='HelloWorld' title={`You are visitor number ${ num }`} onMouseOver={onMouseOver}>

    <strong>{ greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() }</strong>
    {greeting.endsWith(",") ? " " : <span style={{color: '\grey'}}>", "</span> }
    <em>
	{ greeted }
	</em>
    { (silent)
      ? "."
      : "!"}

    </div>;

}

포맷팅 후

function HelloWorld({
  greeting = "hello",
  greeted = '"World"',
  silent = false,
  onMouseOver
}) {
  if (!greeting) {
    return null;
  }

  // TODO: Don't use random in render
  let num = Math.floor(Math.random() * 1e7)
    .toString()
    .replace(/\.\d+/gi, "");

  return (
    <div
      className="HelloWorld"
      title={`You are visitor number ${num}`}
      onMouseOver={onMouseOver}
    >
      <strong>
        {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()}
      </strong>
      {greeting.endsWith(",") ? (
        " "
      ) : (
        <span style={{ color: "grey" }}>", "</span>
      )}
      <em>{greeted}</em>
      {silent ? "." : "!"}
    </div>
  );
}

VSCode의 전역 설정 사용하기

VSCode의 formatOnSave 기능을 사용하면 파일 저장시에 자동으로 포맷팅 되도록할 수 있습니다.

• 메뉴 - 기본설정 - 사용자 설정 변경하기

setting.json

// 기본 포맷터를 prettier-vscode로 사용
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
  "editor.formatOnSave": true
  
  /* 설정 가능한 항목들
  prettier.arrowParens
  prettier.bracketSpacing
  prettier.endOfLine
  prettier.htmlWhitespaceSensitivity
  prettier.insertPragma
  prettier.jsxBracketSameLine
  prettier.jsxSingleQuote
  prettier.printWidth
  prettier.proseWrap
  prettier.quoteProps
  prettier.requirePragma
  prettier.semi
  prettier.singleQuote
  prettier.tabWidth
  prettier.trailingComma
  prettier.useTabs
  prettier.vueIndentScriptAndStyle
  */
}

참고

https://github.com/prettier/prettier-vscode
https://glebbahmutov.com/blog/configure-prettier-in-vscode/