인터넷에서 Webstrom을 소개하는 기사를보고 기능이 정말 강력하다고 느꼈습니다. 또한 알리바바 프론트 엔드에서 파일이 github로 전송 된 이유도 .idea 파일이 있습니다. (Taobao는 webstrom을 사용하기 위해 JS를 작성하는 것이 좋습니다)
IDE는 원하는 많은 기능이나 원하지 않는 기능을 통합한다는 것을 이해할 수 있습니다. 다시 말해, 플러그인이 많은 편집자가 설치되어 있으므로 지금까지 플러그인을 설치할 필요가 없다고 생각합니다.
그런 다음 Webstrom의 특수 기능을 소개하겠습니다.
Webstorm은 JetBrains에서 시작한 상업용 JavaScript 개발 도구입니다.
모든 편집자는 모든 WIN 플랫폼에서 소프트웨어 편집의 기능인 모든 편집기를 저장해야하지만 WebStorm 편집 파일의 오른쪽 상단 모서리에는 친숙하지 않습니다.
이점 : CTRL + S를 제거한 후 마우스를 움직이지 않고 결과 페이지를 볼 수 있습니다.
단점 : 이전 * 로고가 없으면 키보드가 잘못 작동하면 즉시 저장됩니다.
파일이 닫히면 편집기에 대한 기록은 없지만 Webstorm에는이를 가지고 있습니다. vcs-> 지역 역사 -> 쇼 역사 (바로 가기 키 : Alt+~ -> 7)
장점 : WebStorm이 닫히지 않는 한 언제든지 파일을 이전 작업으로 반환 할 수 있습니다 (CTRL+Y가 WebStorm에서 라인을 삭제 한 이유입니다).
단점 :이 역사적 기록은 Webstorm이 닫히고 다시 시작된 후에 사라졌습니다. 또 다른 단점은 이로 인한 메모리 소비가 필연적으로 비교적 크다는 것입니다.
모든 편집기에는 서버 SVN을 제외한 로컬 버전이 없지만 WebStorm은 로컬 파일 수정 기록을 제공합니다 (바로 컷 키 : Alt+Shift+C). 최근에 열린 파일을 팝업하기 위해 Ctrl + E도 할 수도 있습니다.
혜택 : 로컬 SVN에 해당합니다.
단점 : 메모리 소비는 비교적 커야합니다.
Zencoding, HTML5, FTP, Instant Editing (Chrome), 자동 완료, Mozilla 기반 JavaScript 디버거, JSLINT, 지원 덜 지원, 커피 스크립트 지원, NODE.JS, 장치 테스트, 통합 GIT 및 SVN 버전 제어 및 기타 기능을 통합합니다.
CSS를 작성할 때는 다양한 파일과 사진에 지능적으로 프롬프트하므로 더 이상이 파일이 존재하는지 확인할 필요가 없습니다.
다른 기능이 소개됩니다. 더 알고 싶다면 Webstrom의 공식 웹 사이트로 이동하여 계속 검색 할 수 있습니다. 이 소개와 많은 강력한 기능을 읽은 후에이 전설적인 프론트 엔드 아티팩트를 즉시 시도해보십시오. 음.
먼저 공식 다운로드 페이지에서 Webstrom을 다운로드 한 후 설치를 클릭 한 다음 다음 단계로 계속하십시오. 마지막으로, Webstrom은 상업적 IDE이기 때문에 등록 코드 인터페이스가 나타납니다. 물론 Tianchao의 실크 프론트 엔드에는 비싼 아티팩트를 구입할 돈이 없습니다. 걱정하지 마십시오. Webstorm 키를 사용 하여이 프론트 엔드 아티팩트를 사용하는 법을 배울 수 있습니다. hehe ~~~~
설치가 성공하면이 색 구성표가 너무 합리적이라고 생각하는 것처럼 조금 불편 함을 느낄 것입니다. 내가 원하지 않는 설정도 있습니다. 그런 다음 아래에 익숙한 설정을 나열합니다.
WebStorm 설치 후 일부 설정 팁 :
테마를 변경하는 방법 (글꼴 및 색 구성표) :
파일 -> settings-> 편집기 -> 색상 및 글꼴 -> 체계 이름. 테마 다운로드 주소
시작시 WebStorm이 프로젝트 파일을 열지 못하게하는 방법 :
파일 -> settings-> General Startup에서 Reopen 마지막 프로젝트를 제거하십시오.
중국어를 완벽하게 표시하는 방법 :
파일 -> 설정 -> 모양, 이름 설정 : nsimsun, size : 12에서 (권장되지 않음) 기본 글꼴을 재정의하는 확인
줄 번호를 표시하는 방법 :
파일 -> settings-> 편집기, "표시 줄 번호 표시"를 확인하면 줄 번호가 표시됩니다.
코드를 자동으로 랩핑하는 방법 :
파일 -> 설정 -> 편집기 "편집기에서 소프트 랩 사용"이 고트가되고 코드가 자동으로 줄을 랩핑합니다.
커서를 클릭하는 방법은이 줄의 끝에 표시됩니다.
file-> settings-> 편집기 "줄의 끝 이후 CARET을 배치 할 수 있습니다."후크를 제거하십시오.
빠른 키 수정 방법 :
파일-> settings-> keymap을 한 다음 빠르게 수정하려는 함수를 두 번 클릭하십시오. 프롬프트 상자가 있습니다. 프롬프트를 따르십시오.
편집자에 익숙한 빠른 키로 변경하십시오.
파일 -> 설정 -> KeyMap은 Visual Studio, Eclipse 및 NetBeans와 같은 주류 IDE를 지원합니다.
JavaScript 클래스 라이브러리 프롬프트.
파일 -> 설정 -> javaScript -> 라이브러리 -> 그런 다음 목록에서 자주 사용하는 JavaScript 클래스 라이브러리를 선택하고 최종적으로 다운로드 및 설치는 괜찮습니다.
JS를 개발할 때 후보자를 선택하려면 Ctrl + 리턴이 필요합니다.
파일 -> 설정 -> 편집기 -> 코드 완료 -> 첫 번째 제안을 미리 선택하십시오.
JS 프롬프트는 느립니다
파일 -> 코드 완료 -> AutoPopup 1000 ~ 0
GIT 구성 :
파일 -> 설정 -> 편집기 -> github, 들어가서 GitHub 계정을 변경하십시오. GIT가 없으면 필요하지 않습니다.
플러그인 설치 :
파일 -> 플러그인을 한 다음 강력한 플러그인을 선택하고 설치하십시오. ( "CSS-X-Fire"플러그인은 FireBug를 사용하여 CSS 속성을 수정하는 데 사용되며 편집기의 CSS 코드도 변경됩니다.)
나중에 업데이트하십시오
Webstorm 사용 경험
즐겨 찾기 기능 :
프로젝트 디렉토리가 거대하면 일부 하위 디렉토리는 매우 자주 열려 있지만 레벨은 매우 깊습니다. 현재 디렉토리를 즐겨 찾기에 추가 할 수 있습니다. 성공적인 추가 후 왼쪽에는 "즐겨 찾기"메뉴가 있습니다.
Breadcrumb Navigation :
왼쪽의 프로젝트 페이지 외에도 웹 사이트와 유사한 디렉토리에서도 동일한 기능을 달성 할 수 있습니다. 각 디렉토리를 클릭하면 드롭 다운 메뉴가있어서 하위 디렉토리를 표시 할 수 있습니다. 이는 매우 실용적입니다.
생성자 인터페이스 :
주석이 형식과 일치하면 나타납니다. JS 파일 인 경우 JS 클래스의 함수 및 객체입니다. CSS 파일 인 경우 CSS 파일의 요약입니다. HTML 파일 인 경우 노드 구조 다이어그램입니다. 그건 그렇고, 이것은 코드의 구조를 보는 편의를위한 것입니다.
TODO 인터페이스 :
코드에 댓글을 추가하면이 인터페이스가 나타납니다.
이중 열 코드 인터페이스 :
코드 탭에서 파일을 마우스 오른쪽 버튼으로 클릭하고 마우스 오른쪽 버튼을 클릭하십시오-> 수직 (왼쪽과 오른쪽의 2 개의 화면) 또는 가로 (상단 및 하단의 2 개의 화면)
지역 역사 특징 :
코드를 검색하는 좋은 방법입니다
git을 사용하십시오
Webstorm은 GIT의 일반적인 작업 만 통합하며 명령 줄 도구를 완전히 대체 할 수 없습니다. 인터페이스의 오른쪽 하단 모서리에서 어떤 git 브랜치를 확인할 수 있습니다. 위의 새 지점을 전환하거나 만들도록 클릭 할 수도 있습니다.
현재 코드와 저장소 코드의 차이점을 확인하십시오.
코드 인터페이스의 모든 영역을 마우스 오른쪽 버튼으로 클릭하고 git-> 비교를 선택하고 비교할 버전 라이브러리를 선택하십시오.
Webstorm 바로 가기 키 설명 :
편집 관련 바로 가기 키 편집
Ctrl + 공간 :
기본 코드 완료 (클래스, 메소드 또는 변수의 이름) 기본 코드 완료 (모든 클래스, 함수 또는 변수 이름), Alt+S로 변경되었습니다.
Ctrl + Shift + Enter :
완전한 명세서 현재 진술을 완성하십시오
ctrl + p :
매개 변수 정보 (메소드 호출 인수 내에서) 매개 변수 정보는 메소드 호출 매개 변수가 포함됩니다.
Ctrl + 코드를 통한 마우스
간단한 정보 간단한 정보
ctrl + f1
치료시 오류 또는 경고에 대한 설명 표시 오류 또는 경고시 경고
Alt + 삽입
코드 생성… (getters, setters, constructors) 새 파일 생성 또는 코드 생성,… 생성자, 클래스의 모든 필드에 대한 Getters 및 Setter 메소드를 만들 수 있습니다.
ctrl + o
메소드 과부하 메소드를 무시합니다
ctrl + i
방법 구현 방법을 구현하십시오
ctrl + alt + t
서라운드…
ctrl + /
라인 주석 라인 주석/무책임한 주석/무책임
ctrl + shift + /
블록 주석 블록 주석/무책임한 의견/무책임
ctrl + w
코드 블록을 성공적으로 선택하여 코드 블록 선택, 일반적으로 점진적인 선택
ctrl + shift + w
이전 상태로의 현재 선택 감소 이전 단축키 키의 폴백, 감소 선택 코드
alt + q
컨텍스트 정보 컨텍스트 정보
Alt + Enter
의도 행동과 빠른 고정을 보여줍니다
Ctrl + alt + l
템플릿 형식에 따른 개혁 코드 형식 코드
Tab/ Shift + 탭
들여 쓰기/무시한 선택된 선을 들여 계약/무인 선택된 선을 들여 쓰기/undent indentation
ctrl + x 또는 shift + 삭제
현재 라인 또는 선택한 블록을 클립 보드로 자릅니다
Ctrl + C 또는 Ctrl + 삽입
현재 선 또는 선택한 블록 복사 칩 보드에 현재 줄 또는 선택한 코드 블록을 클립 보드로 복사하십시오.
Ctrl + V 또는 Shift + Insert
클립 보드에서 붙여 넣습니다
Ctrl + Shift + v
최근 버퍼에서 붙여 넣기 버퍼에 최신 콘텐츠를 붙여 넣습니다.
ctrl + d
현재 줄 또는 선택한 블록 복제 현재 줄 또는 선택된 코드 블록 복사
ctrl + y
커서에서 관리 삭제 라인에서 라인을 삭제하십시오
ctrl + shift + j
스마트 라인 조인 (HTML 및 JavaScript 만 해당)
ctrl + 입력
스마트 라인 분할 (HTML 및 JavaScript 만)
Shift + Enter
새로운 라인을 시작하십시오
ctrl + shift + u
치료 또는 선택된 블록 케이스 변환의 단어 토글 사례
ctrl + shift +]/[
코드 블록이 끝날 때까지 선택할 때까지 선택
Ctrl + 삭제
Word End로 삭제 된 텍스트 종료 삭제
Ctrl + 백 스페이스
단어로 삭제 시작 텍스트 시작 삭제 시작
ctrl + numpad +/-
확장/붕괴 코드 블록 확장/붕괴 코드 블록
Ctrl + Shift + Numpad +
모든 것을 확장하십시오
Ctrl + Shift + Numpad-
모두 붕괴
Ctrl + F4
활성 편집기 탭 닫기 활성 편집 태그를 닫습니다
검색/교체 검색/교체 관련 바로 가기 키
Ctrl + f
현재 파일에서 빠른 검색 코드를 찾으십시오
Ctrl + Shift + f
경로에서 파일에서 찾을 경로를 지정하십시오.
F3
다음을 찾으십시오
Shift + F3
이전을 찾으십시오
ctrl + r
현재 파일의 코드 교체를 교체하십시오
ctrl + shift + r
PATH에서 교체 파일에서 코드의 배치 대체 지정
사용법 검색 관련 바로 가기 키
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
단계별로 나아가십시오
시프트 + 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 + Up/Down
이전/다음 방법으로 이동하여 메소드간에 위치를 빠르게 이동하십시오
ctrl +]/[
코드 블록으로 이동/인코딩 블록의 끝/시작으로 점프
Ctrl + F12
파일 구조 팝업 파일 구조 팝업
ctrl + h
유형 계층 유형 계층 구조
Ctrl + alt + h
호출 계층 호출 계층 구조를 호출하십시오
F2/ Shift + F2
다음/이전에 강조 표시된 오류가 다음/이전 오류로 이동하고, 강조 오류 또는 경고를 신속하게 찾으려면,이 바로 가기 키를 사용하여 잘못된 진술 사이를 빠르게 이동하십시오.
f4/ctrl + 입력
소스/보기 소스 편집 소스/보기 소스 편집
alt + 홈
내비게이션 바를 표시하십시오
F11
토글 북마크 토글 마커
Ctrl + f11
니모닉으로 북마크를 토글합니다
Ctrl + #[0-9]
번호가 매겨진 북마크 점프로 이동하여 번호가 매겨진 마크로 이동하십시오
시프트 + f11
북마크를 보여줍니다
Refactoring Refactoring 관련 바로 가기 키
F5
복사
F6
이동하다
alt + 삭제
안전한 삭제 안전 삭제
시프트 + f6
이름 바꾸기 이름을 바꿉니다
Ctrl + alt + n
인라인 변수 임베드 변수
Ctrl + alt + m
추출 방법 (JavaScript 만) 추출 기능
Ctrl + alt + v
소개 변수
Ctrl + alt + f
소개 필드
Ctrl + alt + c
소개 상수
VCS/로컬 역사 버전 제어 시스템/로컬 기록 관련 단축키 키
Alt + backquote ()
'vcs'quick 팝업 VCS 빠르게
ctrl + k
VCS에 프로젝트를 커밋하십시오. 프로젝트를 VCS에 제출하십시오
ctrl + t
VCS 업데이트 프로젝트에서 프로젝트 업데이트
Alt + Shift + c
최근 변경보기 최신 변경 사항보기
일반적으로 사용되는 일반적인 바로 가기 키
Ctrl + Shift + a
편집자를 찾고 호출하는 기능을 찾으십시오.
alt + #[0-9]
해당 도구 창을 열면 인터페이스 모듈을 열기 위해 빠르게 전환합니다.
Ctrl + alt + f11
전체 화면 모드 토글 전체 화면 모드를 전환합니다
Ctrl + Shift + F12
토글을 최대화하는 편집기
Alt + Shift + f
즐겨 찾기에 추가 현재 파일을 즐겨 찾기에 추가하십시오.
Alt + Shift + i
현재 프로필로 현재 파일 검사 현재 프로파일로 현재 파일 확인
ctrl + backquote ()
빠른 스위치 전류 체계 퀵 스위치 전류 체계
Ctrl + alt + s
설정 대화 상자 열기 설정 대화 상자를 엽니 다
Ctrl + 탭
탭과 도구 창 변환 사이의 전환 (Windows 바로 가기 키와 충돌)
이 JavaScript 개발 도구 Webstrom을 이미 알고 있습니까? 나는 그것을 시도하기를 기다릴 수 없으며, 당신이 그것을 사용한 후에 그것을 좋아할 것이라고 보장합니다.