[IntelliJ] .editorconfig 활용하여 JS Code Style 맞추기

 

---

Convention 정하지 않고 작업하게 될 경우, 서로 다른 작성 방식으로 인해 코드 가독성 저하를 일으키고 장기적으로 볼 때 유지 보수 함에 있어 큰 문제를 야기할 수 있습니다.

 

Team Convention

- 코드 스타일을 통일 시키는데 있어 Prettier 미사용하기로 함
- 규칙이 상대적으로 적고, 인텔리제이에서 제공하는 기능을 활용하는게 더 나은 것으로 판단했기 때문 

 

설정 파일

.editorconfig

 

인텔리제이 설정

• [File > Settings> Editor > Code Style] 이동
• General Tab 에서 Enable EditorConfig Support 옵션 ✔ (=.editorconfig 설정 파일 허용)
• Formatter Tab에서 Do not format 에 제외 대상 global pattern 등록 (사용자 정의)

src/**/thirdparty/**.js

 

.editorconfig 설정 예시

설정 항목들이 마치 *.properties 처럼 정해져 있었다

[src/**/*.js]
## Spaces - Before parentheses
ij_javascript_space_before_method_parentheses = false
ij_javascript_space_before_method_call_parentheses = false
ij_javascript_space_before_if_parentheses = false
ij_javascript_space_before_for_parentheses = false
ij_javascript_space_before_while_parentheses = false
ij_javascript_space_before_switch_parentheses = false
ij_javascript_space_before_catch_parentheses = false
ij_javascript_space_before_function_left_parenth = false
ij_javascript_space_before_async_arrow_lparen = false

## Spaces - Other
ij_javascript_space_before_property_colon = true

## Blank Lines
ij_javascript_keep_blank_lines_in_code = 2

ij_javascript_blank_lines_after_imports = 1
ij_javascript_blank_lines_around_class = 1
ij_javascript_blank_lines_around_field = 0
ij_javascript_blank_lines_around_method = 1
ij_javascript_blank_lines_around_function = 1

## Punctuation
ij_javascript_use_semicolon_after_statement = true
ij_javascript_use_double_quotes = true
ij_javascript_enforce_trailing_comma = remove

 

 

Preview (설정 미리보기)

① 👁‍🗨 아이콘 클릭 > Open File to Preview Code Style … 클릭

② Directory 창에서 테스트할 임의 JS 파일 선택 ( ※ .editorconfig 설정에 대한 Preview 확인 용도이기 때문에 저장 X )

③ (왼쪽) .editorconfig 설정 정보 변경 시 (오른쪽) Preview 통해 변경 내용 확인 가능

 

예시) ij_javascript_use_semicolon_after_statement = false  // 구문 마지막 세미콜론(;) 삽입 비허용

 

저장시 Code Style 자동 적용 설정

• 설정 (Ctrl + Alt + s ) 에서 Tools | Actions On Save 메뉴 이동
• Reformat Code Option Enable ✔

🔺 Files 옵션 Javascript만 선택하기 ! (전체 선택시 다른 파일도 자동 포맷 적용됨)

 

Code Style 수동 적용

• 단일 파일
  • 단축키 ctrl + alt + l (엘) 적용
• 전체 파일
  • Project Directory > 적용할 (부모) 폴더 마우스 오른쪽 클릭 또는 단축키 ctrl + alt + l (엘)
  • Options에 Include subdirectories ✔ 후 확인

 

참고

https://editorconfig.org/
https://www.jetbrains.com/help/idea/editorconfig.html
https://www.jetbrains.com/help/idea/reformat-and-rearrange-code.html#exclude_file_from_reformat