- 일반적으로 자바스크립트에서 들여 쓰기는 공백 2칸을 사용한다. 2칸 또는 4칸을 자바스크립트에서 사용하는 것을 권장하면 비쥬얼 스튜디오에서는 기본적으로 4칸으로 세팅이 되어 있다.
- 하나의 프로젝트에는 여러 사람이 참여해서 코드를 올린다. 그런데 어떤 사람은 들여쓰기를 공백 2칸을 사용하는 사람도 있고 어떤 사람은 들여쓰기 공백을 4칸으로 하는 사람도 있을 것이다. 동일한 프로젝트의 코드에 관여하는 사람들 간에 스타일을 최대한 통일시켜줄 수 있는 방안을 만들어 주는 것이 필요하다.
- 비쥬얼 스튜디오, 서브라임 텍스트, 웹 스톰 등등 코드를 짜기 위해 사용되는 에디터를 IDE라고 부른다. 기본적으로 IDE는 들여쓰기를 비롯한 몇 가지 옵션에 대해서 기본적으로 어떻게 설정을 할지를 세팅할 수 있는데, 프로젝트에
.editorconfig라는 파일을 만들어 두면 여러 IDE에서 이 파일에 설정된 옵션을 읽어서 IDE에서 사용하게 된다. 만약 탭을 2칸으로 설정을 하게 되면 다른 IDE에서도 디폴트로 탭을 4칸으로 사용하고 있어도 프로젝트 세팅을 따라 2칸으로 적용되는 식이다. - 이렇게 프로젝트에
.editorconfig라는 파일을 사용하여 여러 사람의 코드 스타일을 어느 정도 통일할 수 있다. - editorconfig를 설정하는 것은 IDE에서 기본적으로 설정되는, 파일을 만들거나 편집을 처음하기 시작 했을 때의 설정 값을 세팅해 주는 것이므로 직접 IDE에서 다른 옵션을 파일에 부여하는 경우 바뀔 수 있다.
- IDE에서 기본적으로 지원하는 경우도 있지만, 비쥬얼 스튜디오의 경우 IDE에서 디폴트로는 적용되지 않고 확장 프로그램을 설치해야 적용이 된다.
- 다음 링크를 통해서 확장 프로그램을 설치하도록 하자.
- editorconfig에 관한 사이트에서 알 수 있다.
- 프로젝트 최상단에
.editorconfig라는 파일을 생성하고 다음과 같이 세팅을 해 준다.
root = true
[*]
end_of_line = lf
insert_final_newline = true
[*.{js, jsx}]
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = true
[*.md]
charset = utf-8
indent_style = space
indent_size = 2
trim_trailing_whitespace = false
root = true
- 이 설정은 .editorconfig 파일이 프로젝트 루트 디렉토리 내에서만 적용되도록 한다. 프로젝트 루트 디렉토리 하위 경로의 파일에 적용되는 옵션이다.
- 이 설정은 현재 설정 파일이 다른 상위 디렉토리에서 적용되지 않도록 한다.
[*]
- 모든 파일 유형에 적용되는 코드 스타일 규칙을 지정하겠다는 의미이다.
end_of_line = lf
- 텍스트 에디터나 텍스트 뷰어에는 개행이 문자로 표시되지 않고 다음 줄로 개행된 것으로 표시를 하지만, 문서를 저장하는 코드는
\n,\r\n으로 표기가 된다. - 개행 문자를
\n으로 저장하는 방식을 LF(Line Feed) 이라고 하고, 개행 문자를\r\n으로 저장하는 방식을 CRLF(Carriage Return Line Feed)라고 한다. - LF는 Unix 및 Linux 시스템에서 일반적으로 사용되는 줄 바꿈 문자유형으로 맥북이나 서버에서 디폴트로 사용되는 개행 방식이고, CRLF는 윈도우에서 디폴트로 사용되는 개행 방식이다.
- 맥 또는 리눅스에서 개발하는 사람과 윈도우에서 개발하는 사람들 간에 개행 문자가 달라서 코드가 변경되는 경우가 있다. 이를 방지하기 위해 에디터를 통해서 텍스트를 편집할 때는 LF 방식으로 통일하도록 한다.
- 보통 서버는 리눅스에서 동작하기 때문에 리눅스의 개행 방식인 LF에 맞춰 주는 것이 보편적이다.
insert_final_newline = true
- 파일의 끝에 항상 빈 줄을 추가한다. 이 설정은 마지막 줄이 줄 바꿈 문자로 끝나도록 만든다.
charset = utf-8
- 파일의 문자는 다양한 문자 인코딩을 갖는다. 일반적으로 소스코드를 만들 때의 문자열은 UTF-8으로 만들어진다.
- 따라서
utf-8으로 값을 지정하며 예를 들어 윈도우에서 기본적으로 사용하는 일본어 인코딩인 SJIS나 한국어 인코딩인 EUC-KR 등을 사용한 파일이라면 포멧을 디폴트 포멧이 아닌 다른 포멧으로 지정해 주어야 한다.
indent_style = tab
- 들여쓰기에 탭을 사용한다.
indent_size = 2
- 탭을 사용할 때 들여쓰기 크기를 2로 설정한다.
trim_trailing_whitespace = true
- 파일의 끝에 있는 공백 문자를 자동으로 제거한다.
[*.{js, jsx}]
- .js 또는 .jsx 확장자를 가진 파일에만 적용되는 규칙을 정의한다는 뜻이다.
[*.md]
- .md 확장자를 가진 파일에만 적용되는 규칙을 정의한다는 뜻이다.
trim_trailing_whitespace = false
- 일반적으로 코드 파일의 경우에는 파일의 맨 마지막 줄에 공백 행을 넣지만, 마크다운 파일의 경우 공백 행을 넣지 않는 것이 일반적이므로 이 옵션을
false로 설정하여 공백을 자동적으로 생성하지 않도록 하였다.
- 비쥬얼 스튜디오 코드의 사용자 설정 부분이
editorconfig설정 보다 우선하기 때문에editorconfig의 일부 옵션은 비쥬얼 스튜디오 코드의 사용자 설정을 우선하므로 적용되지 않는 경우가 있다. - 예를 들어
trim_trailing_whitespace = true옵션은.editorconfig에 옵션을 지정한다고 해서 적용이 되지 않는데, 비쥬얼 스튜디오 코드 최상단의 Code 메뉴에서 기본 설정 > 설정 항목으로 가서trim Trailing Whitespace옵션으로 설정을 할 수 있다. 하지만, 이 설정은 파일 확장자 별로 구분해서 적용하는 것이 아닌 전체 파일에 적용되는 옵션이므로 일부 파일에만 별도의 설정을 하고 싶은 경우 맘에 들지 않을 수 있다. - 따라서 파일 확장자 별로 폴더 별로 별도의 설정을 하고 싶다면 지원되지 않는 옵션은 prettier 라는 포멧팅 도구를 사용해서 바꾸어주는 편이 좋다.