WebStorm - JavaScript import brace에 공백 넣기 설정 방법

 

JavaScript React를 사용하는 프로젝트를 다루다 보면 import 문을 자주 이용하게 되는데요. import 할 때 {} 괄호를 많이 사용하게 됩니다. 그런데 WebStorm 기본 설정에서는 {} 괄호에 공백을 두지 않고 import {callSelectAPI} 처럼 됩니다. 그런데 제가 참여하는 프로젝트들은 보통 {} 괄호에 공백을 두고 import { callSelectAPI } 처럼 쓰는 경우가 많았습니다.

 

그래서 WebStorm에서 import 괄호에 공백을 넣도록 설정을 해보았습니다.

 

Editor > Code Style > JavaScript > Spaces 설정으로 이동합니다.

ES6 import/export braces 설정을 찾습니다.

ES6 import/export braces 설정을 활성화하면 import { Component } 처럼 괄호 옆에 공백이 한 칸 생기는 것을 볼 수 있습니다.

 

만약 .editorconfig 파일을 사용한다면 다음과 같은 설정을 추가하면 됩니다.

root = true

[*]
ij_javascript_spaces_within_imports = true
ij_typescript_spaces_within_imports = true

 

참고

https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000204010/comments/360002102940