728x90
팀 단위로 개발하거나 여러 환경에서 개발할 때 코드 스타일이 제각각이라면 매우 번거로울 수 있습니다. 이런 문제를 해결하기 위한 간단하면서도 강력한 도구가 바로 EditorConfig입니다.
EditorConfig는 IDE와 에디터가 일관된 코딩 스타일을 유지할 수 있도록 지원하는 설정 파일입니다. 이를 통해 개발자 간 코드 스타일을 통일하고 불필요한 코드 리뷰나 스타일 수정 시간을 크게 줄일 수 있습니다.
EditorConfig 파일 작성하기
프로젝트 루트 디렉터리에 .editorconfig라는 파일을 생성합니다.
아래는 JavaScript, TypeScript, Vue 파일에 대한 기본 설정 예시입니다.
[*.{js,jsx,ts,tsx,vue}]
indent_style = space
indent_size = 1
trim_trailing_whitespace = true
insert_final_newline = true
- indent_style = space: 들여쓰기를 공백으로 설정합니다.
- indent_size = 1: 들여쓰기 공백 크기를 1칸으로 설정합니다.
- trim_trailing_whitespace = true: 각 줄 끝에 불필요한 공백을 자동으로 제거합니다.
- insert_final_newline = true: 파일 끝에 빈 줄을 자동으로 추가하여 POSIX 표준을 준수하도록 합니다.
다른 EditorConfig 설정 항목들
- end_of_line: 줄 바꿈 문자를 설정합니다. (예: lf, cr, crlf)
- charset: 파일 문자 인코딩 방식을 설정합니다. (예: utf-8, latin1)
- max_line_length: 한 줄의 최대 글자 수를 지정합니다.
더 많은 설정 항목과 자세한 사용법은 EditorConfig 공식 문서에서 확인할 수 있습니다.
EditorConfig 적용 방법
대부분의 IDE나 에디터는 기본적으로 EditorConfig를 지원하거나 플러그인을 통해 손쉽게 지원할 수 있습니다.
- VSCode: 별도의 확장 없이 기본 지원됩니다.
- IntelliJ/WebStorm: 기본적으로 지원되며 추가 플러그인 없이 자동 인식됩니다.
- Sublime Text: "EditorConfig" 플러그인을 설치하면 적용됩니다.
728x90