프리티어 (Prettier)
- 프리티어는 코드 포맷팅 도구로, 코드 스타일, 들여쓰기, 줄바꿈 및 기타 서식을 자동으로 표준화해주는 역할을 한다
- 코드 포맷팅의 주요 목적은 코드의 일관성을 유지하고, 가독성을 향상시키며, 협업을 더 효율적으로 만들어준다.
- 프리티어는 주로 코드베이스에 적용되며, 코드를 저장하거나 커밋할 때 자동으로 코드를 정리한다.
프리티어 설정 예시
// .prettierrc 파일
{
"singleQuote": true, // 작은따옴표(') 사용
"semi": true, // 세미콜론(;) 사용
"trailingComma": "all", // 후행 콤마 사용 (예: { a: 1, b: 2, })
"tabWidth": 2, // 탭 너비
"printWidth": 80 // 줄 바꿈 문자 수 제한
}
ESLint
- ESLint는 자바스크립트 코드에서 문제점을 찾고 코드 스타일 규칙을 강제하는 도구이다.
- 개발자가 설정한 규칙에 따라 코드를 분석하고, 코드에서 잠재적인 오류나 스타일 가이드라인 위반을 식별한다.
- ESLint는 커스터마이징이 가능하며, 팀 또는 프로젝트에 맞게 규칙을 조정할 수 있다.
ESLint 설정 예시
// .eslintrc 파일
{
"extends": ["eslint:recommended"],
"parserOptions": {
"ecmaVersion": 2021
},
"rules": {
"semi": ["error", "always"], // 항상 세미콜론을 사용하도록 강제
"quotes": ["error", "single"], // 항상 작은따옴표(') 사용하도록 강제
"indent": ["error", 2], // 들여쓰기를 2칸으로 강제
"comma-dangle": ["error", "always-multiline"] // 후행 콤마 사용 (여러 줄일 때만)
}
}
두가지 라이브러리 모두 개발자들이 품질 높은 코드를 작성하고 유지하는 데 큰 도움을 준다.
특히 대규모 프로젝트, 여러 인원이 참여하는 프로젝트에서 코드 일관성과 품질을 유지하는 데 필수적이며, 코드 리뷰 및 협업과정에서도 유용하다.
'Front-End' 카테고리의 다른 글
[프레임워크] React, Vue, Angular 차이점 (2) | 2024.01.23 |
---|---|
[ES5] 엄격모드란? StrictMode? (0) | 2023.08.25 |
[FE] 개념, 유용한 사이트 모음 (1) | 2023.04.04 |
웹 표준이란? 웹 접근성이란? (0) | 2023.03.31 |
라이브러리 설치된 목록 확인하기 (0) | 2023.03.21 |