Skip to main content

Prettier + ESLint + Airbnb Style Guide

시작하기#

설치#

  1. eslint, prettier 패키지 설치
npm install -D eslint prettier
  1. airbnb eslint 설정 패키지 설치
npx install-peerdeps --dev eslint-config-airbnb
  1. prettier eslint 플러그인 및 설정 패키지 설치
npm install -D eslint-config-prettier eslint-plugin-prettier
  • eslint-plugin-prettier: prettier 규칙을 생성하는 eslint 플러그인
  • eslint-config-prettier: eslint와 prettier간 충돌나는 규칙을 비활성화해주는 eslint 설정

설정 파일 작성#

.eslintrc#

{
"extends": ["airbnb", "plugin:prettier/recommended"],
"rules": {
"prettier/prettier": ["error"]
}
}

.prettierrc.js#

/**
* Prettier 옵션
* - https://prettier.io/docs/en/options.html
*/
module.exports = {
printWidth: 80, // 한 줄 최대 문자 수
tabWidth: 2, // 들여쓰기 시, 탭 너비
useTabs: false, // 스페이스 대신 탭 사용
semi: true, // 문장 끝 세미콜론 사용
singleQuote: true, // 작은 따옴표 사용
trailingComma: 'all', // 꼬리 콤마 사용
bracketSpacing: true, // 중괄호 내에 공백 사용
arrowParens: 'avoid', // 화살표 함수 단일 인자 시, 괄호 생략
proseWrap: 'never', // 마크다운 포매팅 제외
endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
};
  • 위치: 현재 작업 디렉터리부터 설정파일을 찾고, 못 찾았을 경우 상위 폴더를 한 단계씩 검색한다.
  • prettier 설정 옵션

.prettierignore#

node_modules/
  • 위치: 멀티 프로젝트 구조에서는 최상위 프로젝트의 루트에 해당 파일을 위치시켜야한다.

VS Code 설정#

{
"[javascript]": {
"editor.formatOnSave": true
}
}

Prettier 옵션#

printWidth#

  • 한 줄당 최대 길이 (단위: 문자 수)
  • 기본값: 80
  • 마크다운 파일을 제외하려면 Pros Wrap 설정

tabWidth#

  • 들여쓰기 시 탭 간격
  • 기본값: 2

useTabs#

  • 스페이스 대신 탭을 사용하는지 여부
  • 기본값: false

semi#

  • 문장 끝에 세미콜론(;)을 붙이는지 여부
  • 기본값: true

singleQuote#

  • 쌍따옴표(") 대신 홑따옴표(')를 사용하는지 여부
  • 기본값: false
  • jsx는 이 설정을 무시한다. (jsxSingleQuote 사용)

jsxSingleQuote#

  • jsx파일에서 쌍따옴표(") 대신 홑따옴표(')를 사용하는지 여부
  • 기본값: false

trailingComma#

  • 멀티라인 시, 꼬리에 붙는 콤마(,)를 사용하는지 여부
  • 기본값: none
    • none - 사용안함
    • es5 - es5 object, array등에 사용
    • all - 함수 인자등에 사용 (node8 또는 transform 필요)

bracketSpacing#

  • 객체 리터럴의 중괄호 내부에 공백을 포함할 것인지 여부
  • 기본값: true
    • true - 예시: { foo: bar }
    • false - 예시: {foo: bar}

jsxBracketSameLine#

  • JSX의 닫는 괄호를 줄바꿈을 하지않을 것인지 여부
  • 기본값: false

arrowParens#

  • 화살표 함수의 인자가 하나일 때, 괄호를 포함할 것인지 여부
  • 기본값: avoid
    • avoid - 예시: x => x
    • always - 예시: (x) => x

range#

  • 파일의 특정 부분만 자동 포매팅 설정
  • 기본값
    • rangeStart: 0
    • rangeEnd: Infinity

parser#

  • 사용할 파서 지정

filePath#

  • 자동포매팅을 적용할 파일 지정

requirePragma#

  • 자동포매팅을 적용할 파일을 선별하기 위한 특정 주석(pragma)을 활성화할 것인지 여부
  • 기본값: false
  • 주석:
/**
* @prettier
*/

또는

/**
* @prettier
*/

insertPragma#

  • 자동포매팅이 된 파일의 상단에 @format 마커를 삽입할 것인지 여부
  • requirePragma 옵션이 활성화되어 있을 때만 유효
  • 기본값: false

proseWrap#

  • 마크다운 문서를 포매팅할 것인지 여부
  • 기본값: preserve
    • always - 포매팅 적용하기
    • never - 포매팅 적용하지 않기
    • preserve - 현재 상태로 포매팅 적용하기 (?)

htmlWhitespaceSensitivity#

  • 전역 공백 민감도 설정
  • 기본값: css
    • css - CSS display의 기본값을 고려
    • strict - 공백을 sensitive로 간주
    • ignore - 공백을 insensitive로 간주
  • 참고

endOfLine#

  • 개행문자 설정
  • 기본값: auto
    • auto - 파일의 현재 개행문자를 유지 (단, 혼합일 경우 첫 번째 줄의 개행문자로 통일)
    • lf - 라인피드(\n) 사용 (리눅스와 맥 방식)
    • crlf - 캐리지리턴과 라인피드(\r\n) 사용 (윈도우 방식)
    • cr - 캐리지리턴(\r) 사용

참고#