ESLint, Prettier 확장 프로그램

• ESLint
  • JavaScript와 TypeScript 코드의 문법 오류와 스타일을 검사하는 확장 프로그램입니다. 주로 코드 품질을 유지하고, 코드 스타일의 일관성을 보장하며, 잠재적 오류를 사전에 방지하는 데 사용됩니다.
  • 자동 수정 기능: VSCode 설정에서 eslint.codeActionsOnSave를 활성화하면, 코드 저장 시 ESLint가 설정된 규칙에 따라 자동으로 문제를 수정합니다.
• Prettier - Code Formatter
  • JavaScript, TypeScript, HTML, CSS 등 다양한 언어의 코드 포맷팅을 자동화해 주는 확장 프로그램입니다. 코드 스타일을 일관되게 유지하고, 포매팅에 대한 규칙을 명확히 할 수 있어 코드 리뷰 시간 절약과 가독성 향상에 도움을 줍니다.
  • VSCode 설정에서 editor.formatOnSave: true로 설정하면, 저장할 때 자동으로 코드가 포맷팅됩니다.

요약

• ESLint는 코드의 문법 오류와 코드 스타일을 검사하고, Prettier는 코드 포맷팅을 자동화하여 일관된 스타일을 유지하게 해줍니다.
• ESLint는 주로 문법 오류 감지와 규칙 강제에 초점이 맞춰져 있고, Prettier는 포맷팅에 집중하여 더 나은 코드 가독성을 제공하는 데 중점을 둡니다.
• 두 확장 프로그램을 함께 사용하면 높은 코드 품질과 일관된 스타일을 유지할 수 있습니다.

ESLint v9

새로운 ESLint 설정 파일 flat config (eslint.config.js)

ESLint v9.0.0에서는 eslint.config.js가 새로운 ESLint 기본 설정 파일로 도입되었습니다. 이전 형식인 eslintrc는 이제 사용이 중단(deprecated)되며, 자동으로 검색되지 않습니다.

Configuration Files - ESLint - Pluggable JavaScript Linter

eslint.config.js

eslint.config.js 파일은 ESLint v9의 설정 파일 (eslint.config.js)로, Vue와 JavaScript 프로젝트에 필요한 Linting 규칙과 설정을 정의합니다. 이 설정 파일은 JavaScript와 Vue 파일에서 코드 품질 검사 및 코드 스타일 유지에 필요한 기본 규칙들을 적용하기 위한 것입니다.

• eslint.config.js

Prettier

• .prettierrc.json

전체 Linting, format