Node.js + Express를 이용한 RESTful API 예제(3) - eslint, prettier 적용

기존에 만든 프로젝트의 코드 퀄리티를 높이고, 포맷팅 규칙을 적용하여 코드 가독성을 높이기 위해 eslint, prettier를 적용하도록 한다.

eslint: ESLint는 코드의 일관성을 높이고 버그를 방지하는 것을 목표로 ECMAScript/JavaScript 코드에서 발견된 패턴을 식별하고 보고하는 도구이다.
prettier: 코드 포맷팅을 지원하는 도구로 코드를 깔끔하고 일관된 스타일로 저장할 수 있다.

설치

npm install -D eslint prettier typescript-eslint @eslint/js

//ESLint 에서 포맷팅 규칙을 off 
npm install -D eslint-config-prettier

.prettierrc.json 작성

설정 옵션은 공식 문서를 참조한다.
https://prettier.io/docs/en/options

{
  //코드끝 세미콜론 체크
  "semi": true,
  //들여쓰기 공백 갯수
  "tabWidth": 2,
  //프린터가 줄 바꿈할 줄 길이를 지
  "printWidth": 80,
  //큰따옴표 대신 작은따옴표를 사용
  "singleQuote": true,
  //여러 줄의 쉼표로 구분된 구문 구조에서 가능하면 후행 쉼표를 인쇄
  "trailingComma": "none"
}

eslint.config.mjs 작성

• globals: JavaScript 옵션 지정에 globals패키지를 사용하여 특정 환경에 대해 모든 전역 변수를 추가로 활성화
• typescript-eslint: ESLint가 TypeScript 코드에서 실행될 수 있도록 한다.
• @eslint/js: ESLint에서 JavaScript 특정 기능을 분리하는
  - recommended- ESLint 팀에서 권장하는 규칙을 활성화(대체 "eslint:recommended")
  - all- 모든 ESLint 규칙을 활성화(대체 "eslint:all")

import globals from "globals";
import pluginJs from "@eslint/js";
import tseslint from "typescript-eslint";

export default [
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
];

package.json script 추가 및 실행

lint를 실행하면 설정 파일의 설정에 맞춰 파일명, 위치, value 및 경고 내용을 표시한다. 내용에 맟춰 하나씩 수동으로 수정한다.
prettier를 실행하면 바로 전체 파일이 코드 포맷대로 변경되어 저장된다.
파일 수정 폴더나 확장자는 변경이 가능하며, 필요에 따라 스크립트를 변경하여 사용한다.

"scripts": {
    "lint": "eslint --fix '**/**/*.ts'",
    "prettier": "prettier --write --config ./.prettierrc.json '**/*.ts'"
  },
    
//lint 실행
npm run lint

//prettier 실행
npm run prettier

Reference
https://eslint.org/
https://prettier.io/