eslint, prettier, eslint-config-airbnb #2

그럼 node.js 개발환경에서 위의 3가지를 활용해서 패키지를 구성하는 방법을 알아보자.

 

먼저 프로젝트 생성 및 npm init

mkdir test-app
cd test-app
npm init -y

 

npm 패키지들을 설치한다. (eslint + prettier)

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node

 

airbnb code style을 위하여 관련 npm 패키지도 설치한다.

npx install-peerdeps --dev eslint-config-airbnb

 

그 다음에는 prettier의 세팅을 위하여 .prettierrc 파일을 만든다.

touch .prettierrc
code .prettierrc

 

마지막으로는 eslint 세팅을 위하여 .eslintrc.json를 만들어준다.

이 때 eslint 모듈이 global로 설치되어 있으면 eslint --init으로도 파일이 생성 된다.

touch .eslintrc.json

// eslint가 global로 설치 되어 있을시
eslint --init

 

그럼 각각 세팅 파일에 기본세팅을 넣어준다.

 

.eslintrc.json

{
    "extends": ["airbnb", "prettier", "plugin:node/recommended"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": "error",
        "no-unused-vars": "warn",
        "no-console": "off",
        "func-names": "off",
        "no-process-exit": "off",
        "object-shorthand": "off",
        "class-methods-use-this": "off"
    }
}

 

.prettierrc

{
  "arrowParens": "avoid", // 화살표 함수 괄호 사용 방식
  "bracketSpacing": false, // 객체 리터럴에서 괄호에 공백 삽입 여부 
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름 
  "htmlWhitespaceSensitivity": "css", // HTML 공백 감도 설정
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "quoteProps": "as-needed" // 객체 속성에 쿼테이션 적용 방식
  "semi": true, // 세미콜론 사용 여부
  "singleQuote": true, // single 쿼테이션 사용 여부
  "tabWidth": 2, // 탭 너비 
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "useTabs": false, // 탭 사용 여부
  "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에는 js 자체문법에 대한 세팅이

prettier에는 코딩 스타일 자체의 문법 검사가 되어있다.

또한 eslint 플러그인에 airbnb 플러그인을 넣어줌으로써 airbnb의 코딩스타일로 코딩 할 수 있게된다.

 

---

 

eslint 세팅과 prettier 세팅의 대한 내용은 하나하나 따지기는 어렵고 상황 및 팀에 맞는 스타일로 고정 시키면 된다.

각 툴의 세팅은 아래 링크 참고

 

ESLint 세팅관련 - https://eslint.org/docs/rules/
Prettier 옵션관련 - https://prettier.io/docs/en/options.html
Airbnb Style 가이드 - https://github.com/airbnb/javascript

Rules - ESLint - Pluggable JavaScript Linter

Prettier · Opinionated Code Formatter

GitHub - airbnb/javascript: JavaScript Style Guide