자바스크립트 개발 도구 웹스트롬 활용 가이드_javascript 스킬

웹스트롬을 소개하는 글을 인터넷에서 보고 정말 강력하다고 생각했어요. 알리바바 프론트엔드에서 github에 업로드한 파일이 왜 모두 .idea 파일인지 알았어요(타오바오에서 내부적으로 추천한다고 합니다.) js 작성 시 webstrom 사용)

IDE에는 여러분이 원하는 많은 기능이나 원하지 않는 기능이 통합되어 있다는 것을 이해할 수 있습니다. 즉, 플러그인이 많이 설치되어 있는 에디터이기 때문에 아직까지 플러그인을 설치할 필요는 없다고 생각합니다.

그럼 웹스트롬의 특별한 기능을 소개하겠습니다:

WebStorm은 JetBrains에서 출시한 상용 JavaScript 개발 도구입니다.

모든 편집자는 저장(ctrl s)이 필요합니다. 이는 win 플랫폼의 모든 편집 소프트웨어의 기능이지만 웹스톰 편집 파일의 오른쪽 상단에 익숙한 *가 없습니다.
장점: ctrl 의 필요성을 제거한 후 Firefox의 vim과 결합하면 기본적으로 마우스를 움직이지 않고도 결과 페이지를 볼 수 있습니다.
단점 : 이전 * 표시가 없으며 키보드 오작동시 즉시 저장됩니다.
모든 편집자는 파일이 닫히면 기록 기록이 없지만 webstorm은 기록을 남깁니다. vcs->로컬 히스토리 -> 쇼 히스토리 (단축키: ALT ~ ->7)
장점: webstorm이 닫히지 않는 한 파일은 언제든지 이전 작업으로 돌아갈 수 있습니다(이것이 webstorm에서 ctrl y가 행을 삭제하는 이유입니다).
단점: 이러한 기록 기록은 webstorm을 닫고 다시 시작한 후에 사라지게 됩니다. 또 다른 단점은 결과적으로 메모리 소비량이 상대적으로 크다는 것입니다.
서버 svn을 제외한 모든 편집기에는 로컬 버전이 없지만 webstorm은 로컬 파일 수정 내역(단축키: ALT SHIFT c)을 제공합니다. Ctrl E를 사용하여 최근에 열었던 파일을 팝업으로 표시할 수도 있습니다.
장점: 로컬 svn과 동일합니다.
단점: 메모리 소비도 상대적으로 커야 합니다.
zencoding, html5, ftp, 즉시 편집(chrome), 자동 완성, Mozilla 기반 JavaScript 디버거, JSLint, Less 지원, CoffeeScript 지원, Node.JS, 단위 테스트, 통합 git 및 svn 버전 제어 및 기타 기능을 통합합니다.
CSS를 작성할 때 다양한 파일과 이미지의 경로를 지능적으로 묻는 메시지가 표시되므로 파일이 존재하는지 확인할 필요가 없습니다.
다른 기능도 추가되었습니다. 더 알고 싶으시면 웹스트롬 공식 홈페이지에 접속하셔서 검색하시면 됩니다. 이 소개와 많은 강력한 기능을 읽은 후에 이 전설적인 프런트엔드 아티팩트를 즉시 사용해 보고 싶은 충동이 생기십니까? 음.

먼저 공식 다운로드 페이지에서 webstrom을 다운로드하고 Install을 클릭한 후 계속해서 다음 단계로 진행합니다. 마지막으로 webstrom은 상용 IDE이고 diaosi 프론트엔드이기 때문에 등록 코드가 필요한 인터페이스가 나타납니다. 중국은 확실히 이렇게 값비싼 유물을 구입할 돈이 없습니다. 걱정하지 마세요. WebStorm의 키를 사용하여 이 프런트엔드 유물을 사용하는 방법을 배울 수 있습니다. 헤헤~~~~

설치가 성공적으로 완료되면 여러분도 분명 약간 불편함을 느낄 것입니다. 저처럼 이 색상 구성도 정말 흥미로운 것 같아요. 내가 원하지 않는 설정도 있습니다. 그래서 아래에는 제가 익숙한 설정을 나열하겠습니다.

Webstorm 설치 후 몇 가지 설정 팁:

테마 변경 방법(글꼴 및 색상):
파일 -> 설정 -> 색상&글꼴 -> 테마 다운로드 주소
Webstorm이 시작할 때 프로젝트 파일을 열지 못하게 하는 방법:
파일 -> 설정->일반 제거 시작 시 마지막 프로젝트를 다시 엽니다.
중국어를 완벽하게 표시하는 방법:
파일 -> 설정 -> 모양에서 기본 글꼴 재정의(권장하지 않음)를 선택하고 이름: NSimSun, 크기: 12
를 설정합니다. 줄 번호 표시 방법:
파일 -> 설정 -> 편집기에서 "줄 번호 표시"를 선택하면 줄 번호가 표시됩니다.
코드를 자동으로 래핑하는 방법:
파일 -> 설정 -> 편집기 "편집기에서 소프트 랩 사용"이 선택되어 있으면 코드가 자동으로 새 줄로 줄바꿈됩니다.
이 줄의 끝에 표시되도록 커서를 클릭하는 방법:
파일 -> 설정 -> 편집기 "줄 끝 뒤에 캐럿 배치 허용"을 선택 취소하세요.
단축키 수정 방법:
파일 -> 설정->키맵을 선택한 다음 수정하려는 바로가기 기능을 두 번 클릭하면 프롬프트 상자가 나타나고 프롬프트를 따릅니다
편집기에서 익숙한 키보드 단축키로 바꾸세요:
파일 -> 설정 -> 키맵은 Visual Studio, Eclipse 및 NetBeans와 같은 주류 IDE를 지원합니다.
자바스크립트 라이브러리 팁.
파일 -> 설정 -> 자바스크립트 -> 라이브러리 -> 그런 다음 목록에서 자주 사용하는 자바스크립트 클래스 라이브러리를 선택하고 마지막으로 다운로드하고 설치하면 됩니다.
js를 개발할 때 후보 옵션을 선택하려면 ctrl return이 필요한 것을 발견했습니다.
파일 -> 설정 -> 편집기 -> 코드 완성 -> 첫 번째 제안을 "스마트"로 미리 선택하세요.
Node.js 프롬프트가 상대적으로 느립니다
파일 -> 코드 완성 -> 자동 팝업이 표시되고 1000을 0으로 변경합니다
자식 구성:
파일 -> 설정 -> github에 들어가서 git이 없으면 필요하지 않습니다.
플러그인 설치:
파일 -> 플러그인을 선택한 다음 강력한 플러그인을 선택하고 설치합니다. (firebug를 사용하여 CSS 속성을 수정할 때 "css-X-fire" 플러그인이 사용되며 편집기의 CSS 코드도 변경됩니다.)
추후 업데이트 예정

웹스톰 이용 체험

즐겨찾기 기능:

프로젝트 디렉토리가 매우 크면 일부 하위 디렉토리가 열리는 경우가 많지만 이때 디렉토리를 즐겨찾기에 추가하면 "즐겨찾기"가 표시됩니다. 왼쪽 메뉴

탐색경로:

디렉토리를 선택할 수 있는 왼쪽의 프로젝트 페이지 외에도 상단 메뉴 아래에는 동일한 기능을 수행할 수 있는 웹사이트 탐색경로 탐색과 유사한 디렉토리가 있습니다. 각 디렉토리를 클릭하면 드롭다운 메뉴에 그 아래의 하위 디렉토리가 표시되므로 매우 실용적입니다.

생성자 인터페이스:

형식과 일치하면 댓글이 표시됩니다. js 파일이면 js 클래스의 함수 및 객체이고, css 파일이면 css 파일의 요약이고, html 파일이면 노드의 구조 다이어그램입니다. 나는 단지 코드의 구조를 더 쉽게 볼 수 있도록 하기 위해 이렇게 말합니다.

할 일 인터페이스:

코드에 할일 주석을 추가하면 이 인터페이스가 나타납니다

이중 열 코드 인터페이스:

코드 탭에서 파일을 마우스 오른쪽 버튼으로 클릭한 후 마우스 오른쪽 버튼을 클릭 ->

로컬 히스토리 기능:

코드를 검색하는 좋은 방법

Git 사용

Webstorm은 일반적인 Git 작업만 통합하며 명령줄 도구를 완전히 대체할 수는 없습니다. 인터페이스 오른쪽 하단에서 현재 어떤 git 브랜치에 있는지 확인할 수 있습니다. 이를 클릭하여 새 분기를 전환하거나 생성할 수도 있습니다.

현재 코드와 저장소 코드 간의 차이점 보기:

코드 인터페이스의 아무 영역이나 마우스 오른쪽 버튼으로 클릭하고 git -> 비교를 선택한 다음 비교할 저장소를 선택하세요.

웹스톰 단축키 설명:

편집 편집 관련 단축키

Ctrl 스페이스:
기본 코드 완성(클래스, 메소드, 변수 이름) 기본 코드 완성(클래스, 메소드, 변수 이름), Alt S로 변경
Ctrl Shift Enter:
완전한 문은 현재 문을 완성합니다
Ctrl P：
매개변수 정보(메소드 호출 인수 내) 메소드 호출 인수를 포함한 매개변수 정보
코드 위에 마우스를 올려 Ctrl
간략한 정보 간단한 정보
Ctrl F1
캐럿에 오류 또는 경고 설명 표시 캐럿에 오류 또는 경고 설명 표시 커서 위치에 오류 메시지 또는 경고 메시지 표시
대체 삽입
코드 생성… (Getters, Setters, Constructors) 새 파일 생성 또는 코드 생성… 생성자 함수는 클래스의 모든 필드에 대해 getter 및 setter 메서드를 생성할 수 있습니다.
CtrlO
메서드 재정의 오버로드된 메서드
Ctrl I
메소드 구현 메소드 구현
Ctrl Alt T
다음으로 묶기… (if, else, try, catch, for 등) 선택한 코드 줄을 묶으려면 *를 사용합니다. (*에는 if, while, try catch 등이 포함됩니다.)
Ctrl /
줄 주석 줄 주석 처리/주석 해제 줄 주석 처리/주석 해제
Ctrl Shift /
블록 주석으로 주석 달기/주석 해제 블록 주석/주석 해제 블록
Ctrl W
연속적으로 증가하는 코드 블록 선택 코드 블록 선택, 일반적으로 증분 선택
Ctrl Shift W
현재 선택을 이전 상태로 감소 이전 단축키로 돌아가기, 선택 코드 감소
알트Q
컨텍스트 정보 컨텍스트 정보
Alt Enter
의도 조치 및 빠른 수정 표시 의도 조치, 빠른 결과
Ctrl Alt L
코드 형식 변경 템플릿 형식에 따라 코드 형식 지정
탭/쉬프트 탭
선택한 줄 들여쓰기/들여쓰기 취소 선택한 줄 들여쓰기/들여쓰기 취소
Ctrl X 또는 Shift 삭제
현재 줄 또는 선택한 블록을 클립보드로 잘라내기 현재 줄 또는 선택한 코드 블록을 클립보드로 잘라내기
Ctrl C 또는 Ctrl 삽입
현재 라인 또는 선택한 블록을 칩보드에 복사 현재 라인 또는 선택한 블록을 칩보드에 복사
Ctrl V 또는 Shift 삽입
클립보드에서 붙여넣기 클립보드의 내용을 붙여넣기
Ctrl Shift V
최근 버퍼에서 붙여넣기 버퍼에 최신 콘텐츠 붙여넣기
CtrlD
현재 라인 또는 선택된 블록 복제 현재 라인 또는 선택된 코드 블록 복제
CtrlY
캐럿 줄 삭제 커서 위치 줄 삭제
Ctrl Shift J
스마트 라인 조인(HTML 및 JavaScript만 해당)스마트 라인 조인(HTML 및 JavaScript)
Ctrl Enter
스마트 라인 분할(HTML 및 JavaScript만) 별도의 스마트 라인(HTML 및 JavaScript)
쉬프트 엔터
새 줄 시작 새 줄 시작
Ctrl Shift U
캐럿이나 선택한 블록에 있는 단어의 대소문자 전환 커서 위치에서 대소문자 변환
Ctrl Shift ]/[
코드 블록이 끝날 때까지 선택/시작할 때까지 선택 코드 블록이 끝날 때까지 선택/시작
Ctrl 삭제
단어 끝까지 삭제 단어 끝까지 삭제
백스페이스 Ctrl
단어 시작까지 삭제 텍스트 시작 삭제
Ctrl NumPad /-
코드 블록 확장/축소 코드 블록 확장/축소
Ctrl Shift 숫자 패드
모두 확장 모두 확장
Ctrl Shift NumPad-
접기 모두 접기
Ctrl F4
활성 편집기 탭 닫기 활성 편집기 탭 닫기
검색/바꾸기관련 단축키

Ctrl F
찾기 현재 파일에서 코드를 빠르게 검색
Ctrl Shift F
경로에서 찾기 지정된 파일 내에서 경로 찾기
F3
다음 찾기 다음 찾기
Shift F3
이전 찾기 이전 찾기
Ctrl R
현재 파일의 코드 교체
Ctrl Shift R
경로에서 바꾸기 지정된 파일의 코드 일괄 바꾸기
사용법검색 관련 단축키

Alt F7/Ctrl F7
사용 위치 찾기/파일에서 사용 위치 찾기 사용 위치 찾기/파일에서 사용 위치 찾기
Ctrl Shift F7
파일에서 사용법 강조
Ctrl Alt F7
사용법 보기 사용법 보기
달리다

Alt Shift F10
구성 선택 및 실행 아키텍처 선택 및 실행
Alt Shift F9
구성 선택 및 디버그 아키텍처 선택 및 취약점 수정
Shift F10
실행
Shift F9
디버그로 취약점 수정
Ctrl Shift F10
편집기에서 컨텍스트 구성 실행 편집기에서 컨텍스트 구성 실행
Ctrl Shift X
명령줄 실행 명령줄 실행
디버깅 디버깅 관련 단축키

F8
스텝 오버는 기능에 들어가지 않습니다
F7
단일 단계 실행 시작
Shift F7
스마트스텝 실행으로의 스마트스텝
Shift F8
스텝아웃 점프아웃
Alt F9
커서까지 실행 커서까지 실행
Alt F8
표현식 평가 표현식 평가
F9
프로그램 재개 프로그램 다시 시작
Ctrl F8
중단점 토글 중단점 토글
Ctrl Shift F8
중단점 보기 중단점 보기
내비게이션 포지셔닝 관련 단축키

Ctrl N
클래스 이동 지정된 클래스로 점프
Ctrl Shift N
파일로 이동 프로젝트에서 파일 이름으로 파일을 빠르게 찾습니다.
Ctrl Alt Shift N
기호로 이동 기능 위치를 한 문자씩 찾기
Alt 오른쪽/왼쪽
다음/이전 편집기 탭으로 이동 다음/이전 편집기 탭으로 이동
F12
이전 도구 창으로 돌아가기 이전 도구 창으로 돌아가기
Esc
편집기로 이동(도구 창에서) 도구 창에서 편집기로 이동
Shift Esc
활성 창 또는 마지막 활성 창 숨기기 활성 창 숨기기
Ctrl Shift F4
활성 실행/메시지/찾기/…탭 닫기 활성….탭
Ctrl G
줄로 이동 어느 줄로 이동
Ctrl E
최근 파일 팝업은 최근에 열었던 파일을 팝업으로 표시합니다
Ctrl Alt 왼쪽/오른쪽
뒤로/앞으로 탐색 앞으로/뒤로 탐색
Ctrl Shift 백스페이스
마지막 편집 위치로 이동 마지막 편집 위치로 이동
Alt F1
모든 보기에서 현재 파일 또는 기호 선택 다른 인터페이스 모듈에서 현재 선택된 코드 또는 파일의 위치 찾기
Ctrl B 또는 Ctrl 클릭
선언으로 이동 정의로 이동
Ctrl Alt B
구현 바로가기 점프 메소드 구현
Ctrl Shift B
유형 선언으로 이동 메소드 정의로 이동
Ctrl Shift I
빠른 정의 조회 열기 빠른 정의 조회 열기
Ctrl U
슈퍼메서드/슈퍼클래스 점프메소드/슈퍼클래스 바로가기
Alt 위/아래
이전/다음 방법으로 이동 방법 간 위치를 빠르게 이동
Ctrl ]/[
코드 블록 끝/시작으로 이동 코드 블록 끝/시작으로 이동
Ctrl F12
파일 구조 팝업 파일 구조 팝업
Ctrl H
유형 계층 유형 계층
Ctrl Alt H
통화 계층 통화 계층
F2/ Shift F2
다음/이전 강조 표시된 오류 다음/이전 오류로 이동하고, 오류나 경고를 강조 표시하여 빠르게 찾고, 이 단축키를 사용하여 잘못된 문 사이를 빠르게 이동할 수 있습니다.
F4/Ctrl Enter
소스 편집/ 소스 보기 소스 코드 편집/ 소스 코드 보기
대체 홈
탐색 모음 표시 탐색 모음 표시
F11
북마크 토글 마크 토글
Ctrl F11
니모닉으로 북마크 전환 메모리를 사용하여 표시 전환
Ctrl #[0-9]
번호 북마크로 이동 번호 북마크로 이동
Shift F11
북마크 표시 북마크 표시
리팩토링 리팩토링 관련 단축키

F5
복사
F6
움직여 움직여
Alt 삭제
안전삭제 안전삭제
Shift F6
이름 바꾸기 이름 바꾸기
Ctrl Alt N
인라인 변수 내장 변수
Ctrl Alt M
추출 방법(Javascript만 가능) 추출 기능
Ctrl Alt V
변수 소개 변수 소개
Ctrl Alt F
분야 소개 분야 소개
Ctrl Alt C
상수 소개 상수 소개
VCS/로컬 히스토리 버전 관리 시스템/로컬 히스토리 관련 단축키

Alt 　뒤로인용( )
'VCS'빠른 팝업 VCS 빠르게 팝업
Ctrl K
VCS에 프로젝트 커밋 VCS에 프로젝트 제출
Ctrl T
VCS의 프로젝트 업데이트 VCS의 프로젝트 업데이트
Alt Shift C
최근 변경사항 보기 최신 변경사항 보기
일반적으로 자주 사용하는 관련 단축키

Ctrl Shift A
액션 찾기 에디터 기능 찾기 및 호출
Alt #[0-9]
해당 도구 창 열기 인터페이스 모듈 열기로 빠르게 전환
Ctrl Alt F11
전체 화면 모드 전환 전체 화면 모드 전환
Ctrl Shift F12
최대화 편집기 전환 최대화 편집기 전환
Alt Shift F
즐겨찾기에 추가 현재 파일을 즐겨찾기에 추가
Alt Shift I
현재 프로필로 현재 파일 검사 현재 프로필로 현재 파일 검사
Ctrl 뒤로인용( )
빠른 전환 전류 방식 기존 조합을 빠르게 전환
Ctrl Alt S
설정 대화 상자 열기 설정 대화 상자 열기
Ctrl 탭
탭과 도구 창 간 전환 탭과 도구 창 간 전환(Windows 단축키와 충돌)

이 JavaScript 개발 도구인 웹스트롬에 대해 이미 잘 알고 계시나요? 빨리 사용해 보고 나면 절대 놓칠 수 없을 것입니다.