Eslint

코드 포매팅![](https://media.vlpt.us/images/jhy979/post/0a9d35fd-4e02-4d6f-ae9b-32021ad62996/image.png) + 코드 품질 검사을 위한 도구입니다.

prettier 에게 코드 포매팅을 맡기더라도 코드 품질 검사는 여전히 ESlint가 해야합니다.

방법

npm install eslint

npm install --save eslint-config-airbnb

.eslintrc.js 파일 생성 후 안에 관련 rule, extends 등 다양한 룰을 정의합니다.

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ["airbnb-base", ],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: "module",
  },
  rules: {},
};

package.json 파일 -> script 속성에 "lint" : "eslint src" 를 추가합니다.

Prettier

코드 포매팅을 위한 도구입니다.

npm install prettier

• 기본 설정이 저장되어 있어서 Eslint와 다르게 설정할 필요없이 바로 사용 가능해요.

npx prettier [원하는 파일] --write 

🤨 하지만 prettier 단독으로는 코드 품질을 검사할 수 없겠죠?

• 따라서 Eslint와 통합하는 방법을 제공합니다.
• eslint-config-prettier
• eslint-plugin-prettier

  prettier 포매팅 규칙을 eslint로 추가하고
  서로 충돌하는 옵션이 있다면 prettier의 규칙을 사용하도록 하는 도구입니다.

사용 방법

npm install eslint-config-prettier eslint-plugin-prettier

• 설치 후 .eslintrc.js 에서

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  env: {
    browser: true
  }
}

자동화하기

1. Git Hook 사용하기

🤔 Git Hook 이란 Git 명령어를 수행한 후에 다른 작업을 추가로 실행할 수 있는 도구입니다.

사용 방법

• husky를 함께 사용하면 수월하게 깃 훅을 사용할 수 있어요.

npm install husky

• package.json 에서 관련 설정

"husky" : {
	"hooks": {
		"pre-commit": "echo \"이것은 커밋전에 출력됨\""
		"pre-commit": "npm run lint"
	}
}

• 만약 npm run lint에서 에러가 발생하면 커밋이 취소됩니다.

❕ 이건 전부 다 검사해요. 따라서 스테이징된 파일만 Lint하면 좋겠죠?

npm install lint-staged

"husky" : {
	"hooks": {
		"pre-commit": "lint-staged"
	}
}

"lint-staged" : {
	"*.js": "npm run lint"
}

• 커밋 시 변경되거나 추가된 js파일만 검사해요.

2. Code Editor 사용하기

• vscode extension을 사용합니다.

사용 방법

• extension 설치 후 settings.json 에서 설정
• 파일 → 기본설정 → 설정 → 우측 상단 페이지 바꾸는 아이콘

{
	"eslint.enable": true, // 바로 보여줌
	"editor.codeActionsOnSave":{
		"source.fixAll.eslint": true // 저장시 바로 적용
	}
}

최종 저의 eslint 설정

module.exports = {
  env: {
    browser: true,
  },
  extends: ["airbnb-base", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 13,
    sourceType: "module",
  },
  rules: {
    "prettier/prettier": [
      "error",
      {
        endOfLine: "auto",
      },
    ],
    "import/extensions": ["error", "ignorePackages", { js: "always" }],
    "no-alert": "off",
    "prefer-destructuring": ["error", { object: false, array: false }],
    "class-methods-use-this": "off",
  },
};

2022-02-16 추가

• 추천 게시물

• 보시면 저는 .prettierrc.json이 없지만,

• 보통 .eslintrc.js 와 .prettierrc.json 을 사용하는 것 같아요. 위의 블로그 게시물을 확인하는 것을 추천드립니다!

{
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "endOfLine": "auto",
  "arrowParens": "always"
}