Webstorm 개요

프런트엔드 개발에 가장 많이 사용되는 IDE 개발툴로는 무료로는 visual studio code 이고 유료로는 intellij에서 만든 웹개발 전용툴인 webstorm이 있다.

webstorm은 유료인만큼 최신 프런트엔드 기술 발전에 맞추어 업그레이드가 자주 되며 코드 내비게이션. 리팩토링 등 많은 기능들을 제공하고 있다.

jetbrains 사이트에 방문해서 webstorm 을 설치하자.

많이 사용하는 단축키는 다음과 같다.

테마 및 폰트 설정

  • Appearance & Behavior > Appearance : Theme 설정

Darcula는 다크테마.

intelliJ light: 라이트 테마로 기본 설정이다.

다양한 테마를 원한다면 아래에서 소개하는 Material Theme UI를 사용할 수 있다.

  • Editor > Font : 폰트 설정

폰트는 글자간격이 동일한 폰트를 monospace 폰트라고 하는데, 코딩에서는 monostpace 폰트를 사용해야만 구글에서 제시하는 스타일 가이드인 한줄에 100칸을 넘지 않도록 설정할수 있다.

추천하는 monospace 폰트는 네이버 나눔고딕코딩 글꼴이다. 인터넷에서 다운로드 받아서 먼저 설치한다음 해당 폰트를 선택하면 된다.

코드 스타일 설정

탭설정의 경우 보통 스페이스 2칸으로 설정하는것을 추천한다.

  • Editor > Code Style > JavaScript, HTML, StyleSheets

TabSize: 2

Indent: 2

Continuation indent: 2

parameter hinter 없애기/보이기

webstorm으로 코딩하다 보면 도움말이 보일때가 있다. 정확하게는 parameter hint. 이것을 안보이게하거나 보이게 할려면

  • Editor > Inlay Hints> JavaScript

Inlay Hints 아래에 해당하는 언어를 선택하면 나오는 메뉴에서 Parameter hints 에서 Show parameter hints 를 체크 해제 한다.

javascript 설정

Vue 같은 웹팩기반으로 개발할때는 es6 버전으로 개발하므로 버전을 ECMA Script 6+ 로 선택해야한다. React 의 경우는 JSX를 파싱해야 하므로 React JSX를 선택한다.

  • Language & Frameworks > Javascript : version을 ECMAScript 6으로 설정

npm 기반이 아니라 script 태그에 라이브러리를 include 해서 사용하는 방식일 경우에는 코드 completion 기능이 지원이 안된다. 왜냐하면, 라이브러리가 로컬에 있는 경우가 아니라 런타임때 라이브러리를 다운로드 해서 사용하기 때문이다. 그래서 라이브러리를 로컬에 다운로드를 해야 코드 자동 완성 기능을 사용할 수 있다. 서버사이드 렌더링 방식을 사용한다면 이 설정이 필요하지만 npm 기반이라면 할 필요는 없다.

  • Language & Frameworks > Javascript > Libraries

만일 리액트 라이브러리가 필요하다면 우측 Download 버튼을 눌러서 다운 받은 후 좌측에 목록에 보이면 체크해서 선택하고 OK를 누른다.

사용자 정의 템플릿 만들기

사용자 정의 템플릿이란 특정 클래스 혹은 파일을 만들면 빈 화일이 만들어지는게 아니라 반드시 존대해야하는 요소들을 미리 만들어 놓는 기능이다.

React class Component 템플릿을 만들어보자.

  • File > New > Edit File Template
  • Files 탭에서 + 클릭 후 이름을 React Class 라고 입력
  • 우측에 아래 내용 입력

live template 사용하기

단축키를 이용해서 복잡한 코드를 자동생성하는 기능이다.

이 기능은 Settings > Editor > Live Template 에서 확인할 수 있다.

예를 들어, 리액트 펑션 컴포넌트를 live templates 기능으로 만들어보자.

에디터 창에서 rsf를 타이핑한다음에 탭키를 누르면 펑션 컴포넌트가 자동으로 만들어지는것을 알 수 잇을 것이다.

WebStorm 플러그인

webstorm 에는 이미 인스톨된 많은 플러그인이 있어서 별도의 플러그인이 필요없을 정도이나 몇가지 플러그인을 소개해본다.

Tool Window icon

툴윈도우의 아이콘을 좀 더 다양하게 하고 싶다면 icon으로 검색해서 원하는 플러그인을 설치하면 된다.

Atom Material Icon을 설치하면 설치 전후의 툴윈도우 아이콘은 다음과 같다.

설치 후는 아래와 같다.

Material Theme UI

Appearance & Behavior > Appearance 에 기본 테마 이외에 여러가지 테마들이 추가된것을 볼수 있다. 여기서 원하는 테마를 선택해서 적용해 볼수 있다.

폰트는 Editor > Color Scheme > Color Scheme Font 에서 할 수 있다.

rainbow

코딩을 하다보면 () 혹은 [] 혹은 {} 등이 겹치면서 어디까지 인지 보기 어려울때가 많다. 그럴때 이 플러그인을 사용하게 되면 시각적으로 알아보기 쉽게 된다.

code glancer

plugins에서 code glance 로 검색하면 CodeGlance가 보일것이다. 이것을 설치하면 sublime text 에서 보는것처럼 코드를 한눈에 보여주는 부분이 생길것이다.

WebStorm 단축키

  • 코드 자동 완성: control – space
  • 코드 자동 추천: alt – enter
  • 한줄 주석: control – /
  • 여러줄 주석: control – shift – /
  • 내비 게이션: control -b
  • 스타일 맞추기: control – alt – l
  • 선택범위 넓히기: control – w
  • 선택범위 좁히기: control – shift – w