본문 바로가기

개발도구 & IDE/Webstorm

웹스톰 간단정리

WEBSOTRM 의 주요기능

Refactoring

코드 수정으로 발생할 수 있는 오류를 최대한 낮추면서 코드를 정리하는 기법
^ + T

rename

Image

refactor를 이용하여 수정할경우 지역변수를 모두 수정할 수 있게 된다. (오타,실수 등의 최소화)

safe delete

Image
해당 방법으로 삭제할 경우 사용중인 모든 내역을 view useage를 통해 확인 가능
jsdoc

Image

오른쪽 마우스버튼을 누르고 jump to source를 누르면 바로 이동 가능

extract parameter

Image
Image
Image

Image

JSLint

JSLint 옵션을 설정할 경우 우측 상단에
코드의 품질 상태를 알 수 있다. 빨간색에 가까울수록 문제가 있다.

Image

Helpful shortcut

shift + shift

searching everywhere
file,symbol,function,variable등 모든걸 검색할 수 있다.

⌘ + click or ^ + click // ⌘ + B

해당 내용이 선언된 곳으로 이동한다 선언을 확인 한 후 ⌘ + B 누를 경우 다시 되돌아가게된다.

⌥ + enter

Quick Help
사용가능한 액션들을 출력한다.

⌥ + Up Arrow

wraaping을 확장한다.

alt + control

multiple cursour

⇧⌘N

새파일생성

^ + tab

빠른이동

shift + ⌘ + [ or ]

탭간이동

⌘ + ^ + l

intention 정리

cmd + y

빠른창으로 definition 보기

cmd + alt + t

wrapping codes with

cmd + shift + ctrl + s

창 나누기

메뉴

⌘ + number
패널을 열 수 있다.

project(1)

cmd+n을 통해 파일을 추가할 수 있다.
html을 선택할경우 aa만 입력해도 aa.html이 생성된다.

favirate(2)

⌘+F3을 이용하여 북마크를 할경우 해당창에서 확인가능

command(3)

커맨드라인 사용가능

todo(6)

 // todo: 내용

위와 같이 선언할경우 todo에 내용이 나온다.

structor(7)

Image
Image
현재 파일의 html 구조나 js의 구조등을 볼 수 있다.

version control(9)

git과의 연동을통해 git command 이용

history

Image
Uploading Image.png… (n51oxr443)
변경내용을 확인 할 수 있다. revert를 할경우 파일의 기본 base가 바뀌게 된다.

jsdoc

/** + enter

JSDOC에 대한 자세한 내용