ESLint 와 Prettier 적용

Kyu·2020년 3월 2일
39

ESLint

목록 보기
4/6
post-thumbnail

이 문서에서 사용하는 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 방식 사용
}

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/

0개의 댓글