Prettier

일관적인 코드 스타일을 유지할수 있도록 도와주는 툴

• ESLint의 역할 중 포맷팅과 겹치는 부분이 있지만 좀더 일관적인 스타일로 코드를 다듬는다.
• ESLint가 고쳐주지 못하는 부분까지 Prettier가 교정해줌

설치

$ npm i -D prettier

실행

$ npx prettier app.js

// --write 옵션으로 파일 수정
$ npx prettier app.js --write

.prettierrc.js

• prettier는 기본적으로 프로젝트의 root 경로에 있는 .prettierrc.js파일에 적힌 규칙을 기반으로 동작
• 이 파일이 없으면 기본값으로 셋팅됨

module.exports = {
  "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 방식 사용
};

ESLint와 통합

• 프리티어는 코드 포맷팅만 관리해주는 도구로 코드 품질과 관련된 검사를 해주는 ESLint도 필요하다.
• ESLint와 Prettier를 둘다 사용하는 경우 규칙이 충돌한다.
  • eslint-config-prettier: Prettier와 충돌하는 ESLint 규칙을 끄는 역할을 한다.
• 매번 prettier와 eslint를 개별로 실행하는것도 귀찮은 작업
  • eslint-plugin-prettier: Prettier의 규칙을 ESLint 규칙으로 추가하는 플러그인

설치

$ npm i -D eslint-config-prettier // 충돌하는 규칙 Off
$ npm i -D eslint-plugin-prettier // Prettier규칙을 ESLint로 통합

eslintrc.js

• eslint 설정파일

module.exports = {
  "env": {
    "browser": true,
    "es2021": true
  },
    // extends 배열에 eslint-config-prettier 추가
  "extends": ["eslint:recommended", "eslint-config-prettier"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  // eslint-plugin-prettier는 플러그인 형태로 제공되기에 플러그인 속성에 추가
  "plugins": [
    "prettier"
  ],
  // prettier 규칙 추가
  "rules": {
    "prettier/prettier": "error"
  }
};

또 다른 방법

// .eslintrc.js
{
  "extends": [
      "eslint:recommended",
      "plugin:prettier/recommended"
    ]
}

실행

$ npx eslint src --fix // src 하위경로 js파일들