저는 최근 CRA(create-react-app)에서 ViteJS로 마이그레이션했으며 그 일환으로 ESLint 및 Prettier를 설정했습니다. 이 기사에서는 내가 취한 모든 단계를 거칩니다.

시작하자!

1. 종속성 설치

다음 종속 항목을 설치해야 합니다.

ESLint : 당사의 주요 린터입니다.

Prettier : 기본 코드 포맷터입니다.

@typescript-eslint/eslint-plugin : TypeScript 코드 베이스에 대한 규칙을 제공하는 ESLint 플러그인입니다.

@typescript-eslint/parser : ESLint가 TypeScript 소스 코드를 린트할 수 있도록 하는 파서입니다.

eslint-config-prettier : Prettier가 처리를 담당하는 ESLint의 서식 지정 규칙을 비활성화하여 충돌을 방지하는 ESLint 구성입니다.

eslint-plugin-import : 가져오기를 해결하는 방법을 ESLint에 알립니다.

eslint-plugin-jsx-a11y : 접근성 문제를 확인합니다.

eslint-plugin-react : ESLint에 대한 특정 Linting 규칙에 반응합니다.

npm install eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

주목할 가치가 있는 것 - ESLint가 Prettier와 잘 작동하는지 살펴보았을 때 많은 오픈 소스 프로젝트를 검색했고 다음 3가지 항목이 계속 나타나는 것을 발견했습니다.

prettier-eslint

eslint-plugin-prettier

eslint-config-prettier

일부 프로젝트에서 모두 사용하거나 둘 다 사용하거나 하나만 사용하는 것을 보고 어떤 것을 사용해야 하는지 계속 고민했습니다. 결국 가장 적합한 플러그인(eslint-config-prettier)을 이해하는 데 도움이 되는 this answer on Stack Overflow을 발견했습니다.

2. ESLint 구성

이제 ESLint를 구성할 차례입니다.

ESLint 구성 파일

먼저 .eslintrc.js 구성 파일을 생성해 보겠습니다. 댓글을 추가할 수 있도록 자바스크립트 파일로 광산을 만드는 것을 좋아합니다. 다음과 같습니다.

module.exports = {
  extends: [
    // By extending from a plugin config, we can get recommended rules without having to add them manually.
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:import/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:@typescript-eslint/recommended',
    // This disables the formatting rules in ESLint that Prettier is going to be responsible for handling.
    // Make sure it's always the last config, so it gets the chance to override other configs.
    'eslint-config-prettier',
  ],
  settings: {
    react: {
      // Tells eslint-plugin-react to automatically detect the version of React to use.
      version: 'detect',
    },
    // Tells eslint how to resolve imports
    'import/resolver': {
      node: {
        paths: ['src'],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    // Add your own rules here to override ones from the extended configs.
  },
};

ESLint 무시 파일

이제 .eslintignore 파일을 생성합니다. 여기에서 ESLint에게 무시할 디렉토리와 파일을 알려줍니다. 이것은 프로젝트에 따라 다르지만 다음은 예입니다.

node_modules/
dist/
.prettierrc.js
.eslintrc.js
env.d.ts

새 스크립트 항목 추가

package.json 파일에서 lint 스크립트 항목을 추가하여 명령줄에서 ESLint를 실행할 수 있습니다.

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

이제 npm run lint를 실행하여 Linting 오류를 확인합니다. 아무 것도 표시되지 않으면 아무것도 없다는 의미일 수 있으므로(다행히도) 테스트를 위해 의도적으로 하나를 추가해야 합니다(예: 변수를 사용하지 않고 선언).

3. 프리티어 구성

이제 ESLint를 처리했으므로 prettierrc.js 파일을 생성해 보겠습니다. 여기에서 모든 Prettier 서식 규칙을 지정합니다. 예를 들면 다음과 같습니다.

module.exports = {
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "bracketSpacing": true
}

더 예쁜 무시 파일

ESLint와 마찬가지로 무시해야 할 파일을 Prettier에 알려야 합니다. 다시 이것은 자신의 프로젝트에 따라 다르지만 여기 내 것이 있습니다.

node_modules/
dist/
.prettierrc.js

IDE 통합

Prettier를 최대한 활용하려면 파일을 저장한 후 코드를 포맷하기 위해 IDE와 함께 Prettier를 사용해야 합니다. VS Code를 사용하는 경우 Prettier extension 을 설치할 수 있습니다. 그런 다음 다음 설정을 지정할 수 있습니다.







또는 settings.json 파일에 대한 액세스 권한이 있는 경우 다음을 추가할 수 있습니다.

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

이제 파일을 변경하고 저장할 때마다 필요한 경우 Prettier가 자동으로 형식을 지정합니다. 꽤 멋지죠? 😀

오토메이션

원하는 경우 조금 더 나아가 린팅 및 서식 지정 프로세스를 약간 자동화할 수 있습니다. 나는 Husky을 사용하여 git commit/push 등에서 linter, 테스트 등을 실행할 수 있도록 합니다. 그런 다음 husky와 함께 pretty-quick을 사용하여 git commit 때마다 코드를 자동으로 포맷할 수 있습니다. 팀의 누군가가 IDE에서 설정하지 않은 경우를 대비하여.

더보고 싶어?

오늘은 여기까지입니다! 나는 주로 프론트엔드 개발자로서 일상 생활에서 직면하는 실제 기술 주제에 대해 글을 씁니다. 이것이 마음에 든다면 Twitter에서 저를 팔로우하세요.

당분간 안녕👋