ESLint, Prettier 학습 내용 정리

프론트엔드 개발환경의 이해: 린트 | 김정환 블로그 (jeonghwan-kim.github.io)

프론트엔드 개발환경의 이해: 린트

린트

• 요약

  • npm i -D eslint-plugin-prettier
  • npm i -D eslint
  • npm i -D prettier

• 보푸라기를 제거하는 린트 롤러(Lint roller)처럼 코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다.

• 포맷팅

  • 일관된 코드 스타일
  • 프리티어에 위임

• 코드 품질

  • 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등

• 설치

npm i -D eslint


// package.json
  "eslintConfig": {
    "extends": [
      "react-app",
      "airbnb",
      "prettier"
    ]
  },

규칙

// .eslintrc.js
module.exports = {
  rules: {
    "no-unexpected-multiline": "error", // "off"나 0은 끔, "warn"이나 1은 경고, "error"나 2는 오류.
  },
}

// npx eslint app.js 하면 오류 출력

• 자동 교정 규칙(potentially fixable)

  • npx eslint app.js --fix

보통 기본 규칙을 많이 쓴다

module.exports = {
  extends: [
    "eslint:recommended", // 미리 설정된 규칙 세트을 사용한다
  ],
} // airbnb / standard

Prettier

• ESLINT의 포맷팅과 겹치지만 조금 더 일관적으로 다듬음
• 품질 역할은 안함

npm i -D prettier
npx prettier app.js --write // 재작성함 아니면 터미널 출력

보통 둘을 통합해서 쓴다

1. eslint 규칙 끄기
   npm i -D eslint-config-prettier

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

npx prettier app.js --write && npx eslint app.js --fix

2. 프리티어 규칙을 ESLint에 추가
   npm i -D eslint-plugin-prettier

// .eslintrc.js
{
  plugins: [
    "prettier"
  ],
  rules: {
    "prettier/prettier": "error"
  },
}

// npx eslint app.js --fix


// 더 단순한 설정
// .eslintrc.js
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

Husky

• 커밋 전에 수행

• npm i -D husky
  npm i -D lint-staged // 변경된 놈만...

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "pre-commit": "lint-staged"
    }
  }
  ,  "lint-staged": {
    "*.js": "eslint --fix"
  }
}

VSCODE Extension

- vscode Extension 사용 시 eslint를 키는 법

- 프리티어는 Extension 설치 후 .prettierrc 설정하면 포맷 시 정리됨.

// .vscode/settings.json:
{
    "eslint.enable": true,
    "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
    }
}

// .prettierrc

{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}