Prettier

Prettier는 코드 포맷터로, 코드를 일관된 스타일로 자동으로 정리해줍니다.

yarn add prettier -D

// 설정 파일 추가
// .prettierrc
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}
---
// .prettierignore
node_modules
dist
tsconfig.json
tsconfig.esm.json
---
// package.json 스크립트 추가
"prettier": "prettier --write ./src"

ESLint

ESLint는 JavaScript 코드의 문제를 찾아내고 스타일을 강제하는 도구입니다.

# 1. ESLint 설치
npm install --save-dev eslint

# 2. ESLint 초기화
# ESLint를 초기화하여 기본 설정 파일을 생성합니다. 다음 명령어를 실행하세요:
npx eslint --init
# eslint, globals, @eslint/js, typescript-eslint 가 추가됨
# eslint.config.mjs 설정파일이 생성됨.

# 4. `.eslintignore` 파일 추가 (선택 사항)

# 5. ESLint 실행
 "lint": "eslint ./src"

yarn add eslint-config-prettier eslint-plugin-prettier -D

6. Prettier와 ESLint 통합

Prettier와 ESLint를 함께 사용하면 코드 스타일과 코드 품질을 동시에 유지할 수 있습니다. 이를 위해 eslint-config-prettier와 eslint-plugin-prettier 패키지를 설치합니다:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

그리고 .eslintrc.json 파일을 다음과 같이 수정합니다:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "prettier/prettier": [
      "error",
      {
        "endOfLine": "auto",
        "singleQuote": true,
        "semi": true
      }
    ]
  }
}

7. 에디터 통합

많은 코드 에디터에서 ESLint를 직접 통합할 수 있습니다. 예를 들어, VSCode에서는 ESLint 확장 프로그램을 설치한 후, 설정에서 ESLint를 활성화하면 저장할 때마다 ESLint가 자동으로 실행됩니다.

VSCode 설정 (settings.json):

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

이렇게 하면 코드 작성 시 일관된 스타일을 유지하고 코드 품질을 높일 수 있습니다. Prettier와 ESLint를 함께 사용하여 코드 스타일과 품질을 동시에 관리할 수 있습니다.

eslint-config-prettier vs eslint-plugin-prettier

eslint-config-prettier를 사용하여 충돌하는 ESLint 규칙을 비활성화하고 Prettier가 형식 지정을 처리하도록 합니다. eslint-plugin-prettier를 사용하여 Prettier를 ESLint 규칙으로 실행하고 형식 지정 문제를 ESLint 출력 내에서 보고합니다. 두 가지를 결합하여 Prettier가 형식 지정을 처리하고 ESLint가 코드 품질에 집중할 수 있도록 하여 충돌 없이 원활한 통합을 보장합니다.

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import eslintConfigPrettier from 'eslint-config-prettier';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default [
  { files: ['**/*.js'], languageOptions: { sourceType: 'script' } },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  eslintConfigPrettier,
  eslintPluginPrettierRecommended,
  {
    files: ['**/*.{js,mjs,cjs,ts}'],
    rules: {
      'prefer-const': ['error', { ignoreReadBeforeAssign: true }],
    },
  },
];

규칙추가하기

export default [
  {
    files: ['**/*.{js,mjs,cjs,ts}'],
    rules: {
      'prefer-const': ['error', { ignoreReadBeforeAssign: true }],
    },
  },
];

• 규칙설정배열은 후속 구성 객체가 앞서 정의된 설정을 덮어쓸 수 있다.