[JetBrains] WebStorm 개인 설정

WebStorm은 JavaScript 전용 IDE입니다. 해당 글은 제가 WebStorm을 사용할 때, 편리함을 위하여 세팅한 목록들을 간단하게 정리했습니다. 유용해 보이는 게 있다면 참고하셔도 좋고 더 유용한 게 있다면 추천해주시면 감사하겠습니다. 😎

관련된 단축키는 아래의 글을 참고하면 좋을 것 같습니다.

• https://splin.tistory.com/4

 

 

WebStorm 기본 설정

기본 설정은 Preferences (Mac : ⌘ + ,(컴마) / Window : Ctrl + Alt + S)에서 설정한 목록들입니다.

•  폰트 설정 : Font 검색 -> D2 coding 폰트로 변경
  • 네이버 D2 coding 폰트로 변경
• 코드 스타일 : Code Style 검색 -> JavaScript,HTML, CSS -> Tab Size, Indent, Continuation Indent 2로 변경
• 힌트 끄기 : Inlay Hints 검색 -> Code vision -> Inheritors, Usages, Code author 끄기
• 탭 여러 줄 + 개수 조절 : Editor Tabs 검색 -> Show tabs in one row 체크 해제, 아래에 Tab Limit 변경

 

 

Plugins 설정

다양한 Plugins을 설치하여 가독성 좋고 이쁘고 효율적이게 개발을 할 수 있습니다. Plugins는 Preferences에 있고 설치 후 IDE 재시작해야 적용됩니다.

• 테마 변경 : Material Theme UI - 재시작 후 Appearance 검색 -> Theme 변경
  • 저는 Atom One Dark 사용합니다. ㅎㅎ
• 폴더, 파일 디자인 변경 : Atom Material Icons
• 괄호 색상 변경(가독성) : Rainbow Brackets
• 진행률 표시줄 변경 : Pokemon Progress
• IDE 내 마우스 동작 단축키로 보여주기 : Key Promoter X
• 코드 자동완성 서포트 및 사용법 : Tabnine AI Code Completion
• 리액트 개발 시 Styled Components / Styled JSX를 위한 플러그인 : Styled Components & Styled JSX
• 코드 미니맵 : CodeGlance
  • IDE 코드 작성 화면 오른쪽에 코드에 대한 전체적인 미니맵을 볼 수 있어, 찾아가기 용이합니다.
• 변수 명명 규칙 변경 : Camel Case