[typescript] 타입스크립트 Lint 도구의 설정은 어떻게 해야 하나요?

14 Dec 2023

typescript

타입스크립트 프로젝트에서 Lint 도구를 설정하는 것은 코드 품질을 유지하고 팀원 간의 코드 일관성을 유지하는 데 매우 중요합니다. 여기에서는 eslint와 prettier를 사용하여 타입스크립트 코드를 린트하는 방법을 살펴보겠습니다.

1. `eslint`와 `prettier` 설치

먼저, 프로젝트에 eslint와 prettier를 설치해야 합니다.

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier --save-dev

2. 린트 설정 파일 생성

프로젝트 루트 디렉토리에 .eslintrc.js 파일을 생성하고 다음과 같이 설정합니다.

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  rules: {
    // 추가적인 규칙을 설정할 수 있습니다.
  },
};

3. `.prettierrc` 설정

.prettierrc 파일을 생성하여 prettier의 설정을 정의합니다.

{
  "singleQuote": true,
  "semi": false,
  "tabWidth": 2,
  "printWidth": 120
}

4. `package.json` 스크립트 추가

package.json 파일에서 스크립트를 추가하여 코드를 린트하고 정리할 수 있도록 만듭니다.

{
  "scripts": {
    "lint": "eslint . --ext .ts",
    "lint:fix": "eslint . --ext .ts --fix"
  }
}

5. 코드 린트 및 정리

이제 프로젝트에서 npm run lint를 실행하여 코드를 린트하고, npm run lint:fix를 실행하여 린트 오류를 자동으로 수정할 수 있습니다.

참고 자료

이제 위의 단계를 따라 하여 타입스크립트 프로젝트의 린트 설정을 구성할 수 있습니다. 코드 품질과 가독성을 향상시키는 데 도움이 되길 바랍니다.

1. eslint와 prettier 설치