JS/TS의 코드 퀄리티 향상과 스타일 유지를 위한 도구

• 플러그인(확장) 기능만 사용

ESLint

1. 정의 및 목적

• 자바스크립트 코드의 문제를 식별하고 보고하기 위한 도구
• 정적 분석 도구의 한 형태로, 코드 실행 전에 코드를 검사하여 일반적인 실수, 버그, 스타일 오류, 또는 안티패턴을 찾음

 

2. 기능

• 규칙 기반 시스템: ESLint는 수많은 규칙을 제공하며, 사용자는 이 규칙들을 켜거나 끌 수 있고, 규칙의 엄격함을 조정
• 플러그인과 확장성: ESLint는 React, Vue, TypeScript 등 다양한 프레임워크와 라이브러리를 지원하기 위해 플러그인을 사용
• 커스터마이징: 프로젝트의 필요에 맞게 규칙을 추가하거나 수정하여 사용자 정의 규칙 생성 가능
• 자동 수정: 일부 규칙 위반에 대해 ESLint는 자동으로 코드를 수정할 수 있는 옵션을 제공

 

Prettier

1. 정의 및 목적

• 코드 포맷터로, 코드의 기능성에 영향을 주지 않으면서 일관된 스타일을 적용하여 코드를 더 읽기 쉽고 일관적으로 작동하게 하는 도구

 

2. 기능

• 지원 언어: JavaScript, TypeScript, CSS, HTML, JSON 등 다양한 언어와 파일 형식 지원
• 강제 스타일: Prettier는 스타일에 관한 옵션이 제한적이므로 개발자 간의 스타일 논쟁 축소 단, Prettier가 제시하는 스타일 강제 적용
• 통합: 대부분의 코드 에디터와 IDE에 플러그인 형태로 쉽게 통합할 수 있으며, 저장 시 자동으로 포맷을 적용하도록 설정 가능

 

3. ESLint와 Prettier 함께 사용하기

• ESLint와 Prettier는 서로 다른 목적으로 사용되지만, 함께 사용하면 코드의 품질과 일관성을 동시에 관리 가능
• ESLint는 코드 품질과 문제점을 중점으로, Prettier는 코드 스타일을 일관되게 유지
• eslint-plugin-prettier와 eslint-config-prettier를 통해 충돌 없이 통합 가능

 

ESLint & Prettier 환경 설정

• 타입스크립트 설치된 프로젝트 기준

npm init -y
npm install typescript --save-dev
npx tsc --init

 

1. 프로젝트의 루트 디렉터리에서 필요한 패키지를 설치

• 한 줄에 작성해야 함

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

 

2. ESLint 설정 파일 생성 및 설정

• 프로젝트 루트 디렉터리에 .eslintrc.js 파일 생성 : 아래 내용 추가

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
env: {
  browser: true, // 브라우저 환경 설정
  node: true, // Node.js 환경 설정
  es2021: true, // ES2021 전역 변수 사용 가능
},
  rules: {
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/no-explicit-any': 'warn',
    'prettier/prettier': ['error', { endOfLine: 'auto' }],
  },
};

 

3. Prettier 설정 파일 생성 및 설정

• 프로젝트 루트 디렉터리에 .prettierrc 파일 생성 : 아래 내용 추가

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 200,
  "endOfLine": "auto"
}

 

4. ESLint와 Prettier를 통합하기 위한 설정

4-1) .eslintignore 파일 생성

• ESLint가 무시할 파일과 디렉토리를 지정

node_modules
dist

 

4-2) Prettier 통합

• .prettierignore 파일 생성, 무시할 파일과 디렉토리를 지정

node_modules
dist

 

5. VSCode 설정 (선택 사항)

• Visual Studio Code 사용 시, ESLint와 Prettier를 자동으로 실행하도록 설정
• VSCode의 설정 파일(.vscode/settings.json)에 다음 설정 추가

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

 

6. package.json에 스크립트 추가

• package.json 파일에 ESLint와 Prettier 실행 스크립트를 추가

{
  "scripts": {
    "lint": "eslint src/**/*.{ts,tsx}",
    "format": "prettier --write 'src/**/*.{ts,tsx,js,json}'"
  }
}

 

7. 프로젝트 구조에 따른 실행

• src 디렉토리에 있는 TypeScript 파일을 검사하고 포맷팅하는 명령어
• ESLint 실행

npm run lint

• Prettier 실행

npm run format

 

8. prettier 만 설정

8-1) Prettier를 개발 의존성으로 설치

npm install --save-dev prettier

 

8-2) Prettier 설정 파일 생성

• 프로젝트 루트 디렉터리에 .prettierrc 파일을 생성하고 원하는 설정을 추가

 

8-3) Prettier 무시 파일 생성

• 프로젝트 루트 디렉터리에 .prettierignore 파일을 생성

 

8-4) 스크립트 추가

• package.json 파일에 Prettier를 실행할 수 있는 스크립트를 추가

{
  "scripts": {
    "format": "prettier --write \\"src/**/*.{js,jsx,ts,tsx,json,css,scss,md}\\""
  }
}

 

8-5) prettier 실행

• 터미널 또는 명령 프롬프트에서 아래 명령어를 실행하여 코드를 포맷

npm run format

 

8-6) VSCode와 연동

• VSCode 확장 프로그램 설치
• VSCode의 설정 파일(settings.json)에 다음 내용을 추가

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

 

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/JS-TS-a87e84f1cbf94e2b9543063d29a09412?pvs=4

JS/TS의 코드 퀄리티 향상과 스타일 유지를 위한 도구 | Notion