비주얼 스튜디오 코드에서 ESLint와 Prettier를 함께 사용하는 방법은?

Visual Studio Code (VS Code)에서 ESLint와 Prettier를 함께 사용하는 것은 JavaScript 및 TypeScript 프로젝트에서 코드 품질과 일관성을 유지하는 데 매우 유용합니다. ESLint는 코드의 문법 및 스타일을 검사하고, Prettier는 코드 포맷팅을 담당합니다. 이 두 도구를 함께 사용하면 코드의 가독성을 높이고, 팀 내에서 일관된 스타일을 유지할 수 있습니다. 아래는 VS Code에서 ESLint와 Prettier를 함께 설정하는 방법에 대한 단계별 가이드입니다. 1. 프로젝트 초기화 먼저, Node.js가 설치되어 있어야 합니다. 프로젝트 디렉토리에서 다음 명령어를 실행하여 `package.json` 파일을 생성합니다. ```bash npm init -y ``` 2. ESLint 및 Prettier 설치 ESLint와 Prettier를 프로젝트에 설치합니다. 다음 명령어를 사용하여 두 패키지를 설치합니다. ```bash npm install --save-dev eslint prettier ``` 3. ESLint 설정 ESLint를 설정하기 위해 다음 명령어를 실행하여 기본 설정 파일을 생성합니다. ```bash npx eslint --init ``` 이 명령어는 몇 가지 질문을 통해 ESLint의 설정을 도와줍니다. 질문에 따라 적절한 옵션을 선택하세요. 설정이 완료되면 `.eslintrc.js` 또는 `.eslintrc.json` 파일이 생성됩니다. 4. Prettier 설정 Prettier를 설정하기 위해 프로젝트 루트에 `.prettierrc` 파일을 생성하고 원하는 포맷팅 옵션을 추가합니다. 예를 들어: ```json { "semi": true, "singleQuote": true, "tabWidth": 2, "trailingComma": "es5" } ``` 5. ESLint와 Prettier 통합 ESLint와 Prettier를 함께 사용하기 위해 `eslint-config-prettier`와 `eslint-plugin-prettier`를 설치합니다. 이 두 패키지는 ESLint와 Prettier 간의 충돌을 방지하고, Prettier 규칙을 ESLint 규칙으로 통합합니다. ```bash npm install --save-dev eslint-config-prettier eslint-plugin-prettier ``` 6. ESLint 설정 파일 수정 `.eslintrc.js` 또는 `.eslintrc.json` 파일을 열고, `extends` 배열에 `plugin:prettier/recommended`를 추가합니다. 예를 들어: ```javascript module.exports = { extends: [ 'eslint:recommended', 'plugin:prettier/recommended' ], // 추가적인 설정... }; ``` 이렇게 하면 ESLint가 Prettier의 규칙을 따르도록 설정됩니다. 7. VS Code 설정 VS Code에서 ESLint와 Prettier를 사용하기 위해 다음과 같은 설정을 추가합니다. VS Code의 설정(JSON 형식)에서 다음을 추가합니다: ```json { "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowRuleFailuresAsWarnings": true, "prettier.requireConfig": true } ``` - `editor.formatOnSave`: 파일을 저장할 때 자동으로 포맷팅합니다. - `source.fixAll.eslint`: 저장할 때 ESLint 오류를 자동으로 수정합니다. - `eslint.alwaysShowRuleFailuresAsWarnings`: ESLint 오류를 경고로 표시합니다. - `prettier.requireConfig`: Prettier가 설정 파일이 있는 경우에만 작동하도록 합니다. 8. VS Code 확장 설치 VS Code에서 ESLint와 Prettier 확장을 설치합니다. VS Code의 Extensions 뷰에서 "ESLint"와 "Prettier - Code formatter"를 검색하여 설치합니다. 9. 코드 작성 및 포맷팅 이제 프로젝트에서 코드를 작성할 때, 저장할 때마다 ESLint와 Prettier가 자동으로 적용됩니다. 코드 스타일과 품질을 유지하는 데 도움이 됩니다. 10. 추가적인 설정 필요에 따라 ESLint와 Prettier의 설정을 추가로 조정할 수 있습니다. 예를 들어, 특정 파일 형식에 대한 규칙을 추가하거나, 특정 디렉토리를 제외하는 등의 설정을 할 수 있습니다. 결론 이제 VS Code에서 ESLint와 Prettier를 함께 사용하는 방법을 배웠습니다. 이 설정을 통해 코드 품질을 높이고, 팀 내에서 일관된 코드 스타일을 유지할 수 있습니다. 프로젝트에 따라 추가적인 설정이 필요할 수 있으니, 각 도구의 공식 문서를 참고하여 최적의 환경을 구성하세요.