WebStorm 입문용 요약

이 기사는 WebStorm의 입문용 요약을 공유합니다. 내용에는 특정 참고 가치가 있습니다. 도움이 필요한 친구가 도움이 되기를 바랍니다.

WebStorm은 JetBrains가 15년 넘게 개발하고 개선해 온 오픈 소스 IntelliJ 플랫폼을 기반으로 구축되었습니다. 널리 사용되는 여러 버전 제어 시스템과 작동하는 통합 UI를 제공하여 git, GitHub, SVN, Mercurial 및 Perforce 전반에서 일관된 사용자 경험을 보장합니다. WebStorm은 바로가기, 글꼴, 시각적 테마부터 도구 창 및 편집기 레이아웃에 이르기까지 코딩 스타일에 완벽하게 맞도록 조정하여 사용자 정의 가능한 기능을 제공합니다.

지능형 코딩 지원

WebStorm은 훌륭한 코드를 작성하는 데 도움이 됩니다. 스마트 편집기에는 코드 완성, 동적 코드 분석, 코드 형식 지정 및 리팩토링 기능이 있어 생산성을 높이고 개발 경험을 완전히 새로운 수준으로 끌어올릴 수 있습니다.

지원되는 언어 및 프레임워크

WebStorm은 JavaScript, ECMAScript 6, TypeScript, CoffeeScript, Dart 및 Flow에 대한 동급 최고의 코딩 도움말을 제공합니다.

WebStorm을 사용하면 HTML, CSS, Less, Sass 및 Stylus 코드를 작성할 수 있습니다.

무엇보다도 Node.js와 React, Angular, Vue.js, Meteor 등과 같은 널리 사용되는 프레임워크에 대한 고급 지원 혜택을 누릴 수 있습니다.

코드 인텔리전스 지원

WebStorm은 프로젝트를 분석하여 애플리케이션에 정의된 모든 메서드, 함수, 모듈, 변수 및 클래스에 대해 최상의 코드 완성 결과를 제공합니다. 코딩 지원은 상황을 인식하며 프레임워크별로 지원될 수도 있습니다.

WebStorm에서 CSS로 작업할 때 속성 및 해당 값에 대한 코드 완성을 즐겨보세요. Less와 Sass에서는 믹스인의 도움을 받으세요. 물론 HTML에서는 모든 태그와 속성에 대한 코드 완성 기능을 얻을 수 있습니다.

코드 품질 분석 및 감지

WebStorm에는 지원되는 모든 언어에 대한 수백 가지 검사가 내장되어 있습니다. 이 외에도 ESLint, TSLint, Stylelint, JSCS, JSHint 및 JSLint를 사용할 수도 있습니다.

WebStorm 편집기는 사용자가 입력하는 즉시 모든 오류와 경고를 보고하고 다양한 빠른 수정 옵션을 제공합니다.

WebStorm 문제가 있을 수 있는 코드 줄은 올바른 편집기 여백에 표시되므로 긴 파일에서 오류와 경고를 쉽게 찾아낼 수 있습니다.

WebStorm을 사용하여 전체 프로젝트에 대한 코드 품질 분석을 실행하고 선택한 빠른 수정 사항을 자동으로 적용할 수도 있습니다.

webstorm 사용 팁

• WebStorm 테마(글꼴 및 색상) 변경 방법:
  파일 -> > 편집기 -> 색상&글꼴 -> 테마 다운로드 주소

• 시작 시 웹스톰이 프로젝트 파일을 열지 못하게 하는 방법:
  파일 - > 설정- >일반 제거 시작 시 마지막 프로젝트를 다시 엽니다.

• WebStorm 중국어를 완벽하게 표시하는 방법:
  파일 ->설정 기본 글꼴 재정의(권장하지 않음)를 선택하고 이름: NSimSun, 크기: 12

• WebStorm이 줄 번호를 표시하는 방법:
  File -> ->편집기, "줄 번호 표시"를 선택하여 줄 번호를 표시합니다.

• WebStorm 코드를 자동으로 줄 바꿈하는 방법:
  파일 -> > Editor "Use Soft Wraps in editor"가 선택되어 있으면 코드가 자동으로 래핑됩니다.

• 이 줄 끝에 WebStorm을 표시하는 방법:
  파일 -> 설정 -> 편집기 "줄 끝 뒤에 캐럿 배치 허용"을 선택 취소할 수 있습니다.

• WebStorm 단축키 수정 방법:
  파일 ->설정->키맵을 선택한 다음 단축키를 수정하려는 기능을 두 번 클릭하고 프롬프트 상자가 나타납니다.

• WebStorm을 익숙한 편집기의 단축키로 바꾸는 방법:
  파일 ->설정-> Keymap은 Visual Studio, Eclipse, NetBeans 및 기타 주류 IDE를 지원합니다.

• javascript 라이브러리 팁.
  파일 -> 설정 -> 자바스크립트 -> 라이브러리 -> 그런 다음 목록에서 자주 사용하는 자바스크립트 클래스 라이브러리를 선택하고 마지막으로 다운로드하고 설치하면 됩니다.

🎜🎜#
• WebStorm에서 js를 개발할 때 후보 옵션을 선택하려면 Ctrl + Return이 필요하다는 것을 알았습니다.

  파일 -> 편집기 -> 첫 번째 제안: "스마트"가 "항상"으로 변경됨
  

• WebStorm의 js 프롬프트는 전략을 설정하는 데 상대적으로 느립니다

  파일 -> > 다음 1000의 자동 팝업 WebStorm에서 0
  

Git 구성으로 변경:
• 설정 -> git이 필요하지 않은 경우 github 계정을 변경하세요.

  
  

WebStorm 플러그인 설치:
• 파일 ->플러그인을 선택한 다음 강력한 플러그인을 선택하세요. ("css-X-fire" 플러그인, CSS 속성을 수정하기 위해 Firebug를 사용할 때 사용되며 편집기의 CSS 코드도 변경됩니다.)

Webstorm 사용 경험

• WebStorm의 즐겨찾기 기능:
  프로젝트 디렉토리가 매우 클 때 일부 자막 디렉토리는 자주 열리지만 레벨이 매우 깊습니다. 이때 디렉토리를 즐겨찾기에 추가하면 왼쪽에 "즐겨찾기" 메뉴가 나타납니다.

  #🎜 🎜#
• WebStorm의 탐색경로 탐색:

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

• WebStorm 생성자 인터페이스:

  댓글이 일치하는 경우 형식이 나타납니다. js 파일이면 js 클래스의 함수 및 객체이고, css 파일이면 css 파일의 요약이고, html 파일이면 노드의 구조 다이어그램입니다. 이는 코드 구조를 쉽게 볼 수 있도록 하기 위한 것입니다.
  

• WebStorm의 할 일 인터페이스:

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

WebStorm의 이중 열 코드 인터페이스:
• 코드 탭에서 파일을 마우스 오른쪽 버튼으로 클릭한 다음 오른쪽-> 또는 가로로 쏟아짐(상단 및 하단 화면)

  
  

WebStorm의 로컬 기록 기능:
• 코드를 검색하는 좋은 방법

  
  # 🎜🎜##🎜 🎜#WebStorm은 git 사용법을 통합합니다

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

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

코드 인터페이스의 아무 영역이나 마우스 오른쪽 버튼으로 클릭하고 git -> with를 선택한 다음 라이브러리를 비교할 버전을 선택합니다.

• 
  webstorm 단축키 설명

WebStorm 관련 단축키 편집

#🎜🎜 #Ctrl + Space：

기본 코드 완성(클래스, 메소드 또는 변수 이름) 기본 코드 완성(클래스, 함수 또는 변수 이름), Alt+S

#로 변경 🎜🎜#
• Ctrl + Shift + Enter：

  문 완료 현재 문을 완성하세요
  

• Ctrl + P：

  매개변수 정보 ( 메소드 호출 인수 내) 매개변수 정보에는 메소드 호출 매개변수가 포함됩니다
  

• Ctrl + 코드 위에 마우스 올리기

  간단한 정보 단순 정보
  

  #🎜 🎜#
Ctrl + F1
• 캐럿에 오류 또는 경고 설명 표시 캐럿에 오류 또는 경고 설명 표시

  코드 생성... (Getters, Setters, Constructors) 새 파일 만들기 또는 코드 생성...생성자 함수는 클래스의 모든 필드에 대해 getter 및 setter 메서드를 생성할 수 있습니다
  

#🎜 🎜#Ctrl + O
• Override 메서드 메서드 재정의#🎜🎜 #

  
  

  Ctrl + I
구현 방법 구현 방법

• # 🎜🎜#
  Ctrl + Alt + T

  Surround with… (if, else, try, catch, for 등) 선택한 코드 줄을 둘러싸려면 *를 사용합니다. (*에는 if, while, try catch 등이 포함됩니다.)

• # 🎜🎜#Ctrl + /
  Comment/uncomment with line comment 라인 주석/주석 해제

• # 🎜🎜#Ctrl + Shift + /

  Comment/comment with block comment 블록 주석으로 주석 처리/주석 해제
  

• Ctrl + W

  연속적으로 증가하는 코드 블록 선택 코드 블록 선택, 일반적으로 증분 선택
  #🎜🎜 #

Ctrl + Shift + W
• 현재 선택을 이전 상태로 감소 이전 단축키 롤백, 선택 감소 코드

  
  

  #🎜🎜 #Alt + Q
컨텍스트 정보 컨텍스트 정보

• 
  

  Alt + Enter
의도 작업 및 빠른 수정 표시 의도 작업, 빠른 결과#🎜🎜 #

• 
  Ctrl + Alt + L

  코드 형식 재지정 템플릿 형식에 따라 코드 형식 지정

• 
  Tab/ Shift + Tab

  선택한 줄 들여쓰기/들여쓰기 취소선택한 줄 들여쓰기/들여쓰기 취소
#🎜🎜 #

• Ctrl + 🎜🎜#
  Ctrl + C 또는 Ctrl + Insert#🎜🎜 #현재 줄 또는 선택한 블록을 칩보드에 복사 현재 줄 또는 선택한 블록을 칩보드에 복사

• Ctrl + V 또는 Shift + 삽입
  클립보드에서 붙여넣기 콘텐츠 붙여넣기 클립보드에

• Ctrl + Shift + V
  최근 버퍼에서 붙여넣기 버퍼에 최신 콘텐츠 붙여넣기

#🎜🎜 #
• Ctrl + D

  현재 줄 또는 선택한 블록 복제 현재 줄 또는 선택한 코드 블록 복사#🎜🎜 #
  

Ctrl + Y
• Delete 캐럿에서 라인 캐럿에서 라인 삭제

  
  

Ctrl + Shift + J# 🎜🎜#스마트 라인 조인(HTML 및 JavaScript에만 해당)스마트 라인 조인(HTML 및 JavaScript에만 해당) # 🎜🎜#

• 
  Ctrl + Enter

  스마트 줄 분할(HTML 및 JavaScript만 해당) 스마트 줄 분리(HTML 및 JavaScript)
• #🎜🎜 #

  Shift + Enter
  새 줄 시작 새 줄 시작

#🎜🎜 #
• Ctrl + Shift + U

  캐럿에서 단어 대/소문자 전환 또는 선택된 블록 커서 위치에서 대소문자 변환
  

• Ctrl + Shift + ] /[

  코드 블록 끝/시작까지 선택 코드 블록 끝/시작까지 선택# 🎜🎜#
  

Ctrl + 삭제
• 단어 끝까지 삭제 텍스트 끝 삭제

  
  

Ctrl + 백스페이스#🎜 🎜#단어 시작까지 삭제 문자 시작 삭제

• Ctrl + NumPad+/-
  확장/축소 코드 블록 확장/축소 코드 블록

• Ctrl + Shift+ NumPad+
  모두 확장 모두 확장

• Ctrl + Shift+ NumPad-
  모두 축소

• Ctrl + F4
  활성 편집기 탭 닫기

WebStorm의 검색/바꾸기 검색/바꾸기 관련 단축키

• Ctrl + F
  찾기 현재 파일에서 코드 빠르게 찾기

• Ctrl + Shift + F
  경로에서 찾기 지정된 파일에서 경로 찾기

• F3
  다음 찾기 다음 찾기

• Shift + F3
  이전 찾기 이전 찾기

• Ctrl + R
  Replace 현재 파일의 코드 바꾸기

• Ctrl + Shift + R
  Replace in path 일괄 대체할 파일의 코드 지정

WebStorm의 사용 검색 관련 단축키 검색

• Alt + F7/Ctrl + F7
  사용 위치 찾기/사용 위치 찾기

• Ctrl + Shift + F7 Shift + F10
  구성 선택 및 아카이브 선택 실행,

• Alt + Shift + F9 실행
  구성 및 디버그 선택, 프레임 선택, 취약점 복구 + F10

  실행

Shift + F9

D ebug 취약점 수정

• 
  

  Ctrl + Shift + F10
편집기에서 컨텍스트 구성 실행 편집기에서 콘텐츠 아키텍처 실행

• 
  

  Ctrl + Shift +

• F8
  Step over 기능 입력 안 함

• F7
  Step into Step into

• Shift + F7
  Smart step into Smart step into

• Shift + F8
  Step out

Alt + F9

커서로 실행 커서로 실행

• 
  Alt+ F8

  식 평가 식 평가

• 
  F9

  프로그램 재개 프로그램 다시 시작

• 
  Ctrl + F8

  Tbreakpointoggle 중단점 전환

• 
  Ctrl + Shift + F8

  중단점 보기 중단점 보기

• 
  WebStorm의 탐색 위치 관련 단축키

• Ctrl + N
  클래스로 이동 지정된 클래스로 이동

• Ctrl + Shift + N
  파일로 이동 다음 위치에서 파일을 빠르게 검색 파일 이름으로 프로젝트

• Ctrl + Alt +Shift + N
  기호로 이동 기능 위치를 한 문자씩 검색

• Alt + 오른쪽/왼쪽
  다음/이전 편집기 탭으로 이동 다음/이전 편집기 옵션 입력

F12

이전 도구 창으로 돌아가기

• 
  Esc

  편집기로 이동(도구 창에서) 도구 창에서 편집기 입력

• 
  Shift + Esc

  활성 또는 마지막 활성 창 숨기기 활성 창 숨기기

• 
  Ctrl + Shift + F4

  활성 실행/메시지/찾기/…탭 닫기 활성 창 닫기….Tab

• 
  Ctrl + G

  줄로 이동 Jump 어느 줄로 갈까요? Ctrl + E
최근 파일 팝업 최근에 연 파일 팝업

• 
  

  Ctrl + Alt + 왼쪽/오른쪽
뒤로/앞으로 탐색 앞으로/뒤로 탐색

• 
  

  Ctrl + Shift + 백스페이스
마지막 편집 위치로 탐색 마지막 편집 위치

• 
  

  Alt + F1
모든 보기에서 현재 파일 또는 기호 선택 다른 인터페이스 모듈에서 현재 선택한 코드 또는 파일의 위치 찾기

• 
  

  Ctrl + B 또는 Ctrl + 클릭
선언으로 이동 Jump to 정의

• 
  

  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 + Enter
소스 편집/소스 보기 소스 코드 편집/소스 코드 보기

• 
  

  Alt + Home
탐색 표시줄 표시 탐색 표시줄 표시

• F11
  북마크 전환 표시 전환

• Ctrl + F11
  니모닉으로 북마크 전환 메모리를 사용하여 표시 전환

• Ctrl + #[0-9]
  번호가 매겨진 북마크로 이동 번호가 매겨진 북마크로 이동

• Shift + F11
  북마크 표시 북마크 표시

WebStorm의 리팩토링 단축키

• F5
  복사 복사

• F6
  이동 이동

• Alt + 삭제
  안전 삭제 안전 삭제

• Shift + f6 amerename rename rename
  

• ctrl + alt + n

  inline variable embed variable
  

• ctrl + alt + m

  extract method (javaScript 만) 추출 함수
  

• ctrl + alt + v 화 소개 소개 변수

  
  

Ctrl + Alt + F
• 필드 소개 필드 소개

  
  

Ctrl + Alt + C
• 상수 소개 상수 소개

  
  

WebStorm VCS/로컬 히스토리 버전 제어 시스템 / 로컬 히스토리 관련 단축키

Alt + BackQuote( )
• 'VCS'빠른 팝업 VCS 빠르게 팝업

  
  

Ctrl + K
• VCS에 프로젝트 커밋 VCS에 프로젝트 제출

  
  

Ctrl + T
• Update project from VCS VCS에서 프로젝트 업데이트

  
  

Alt + Shift + C
• 최근 변경 사항 보기 최근 변경 사항 보기

  
  

일반 WebStorm 사용 시 일반적으로 사용되는 관련 단축키

Ctrl + Shift +A
• 액션 찾기 찾기 편집기 기능 호출

  
  

Alt + #[0-9]
• 해당 도구 창 열기 인터페이스 모듈 열기로 빠르게 전환

  
  

Ctrl + Alt + F11
• 전체 화면 모드 전환 전체 화면 모드로 전환

  
  

Ctrl + Shift + F12
• 최대화 편집기 전환

  
  

Alt + Shift + F
• Add to Favorites 현재 파일을 즐겨찾기에 추가

  
  

Alt + Shift + I
• 현재 프로필 사용으로 현재 파일 검사 현재 속성은 현재 파일 확인

  
  

Ctrl + BackQuote( )
• 빠른 현재 구성표 전환 기존 조합 빠르게 전환

  
  

Ctrl + Alt + S
• 설정 대화 상자 열기 설정 대화 상자 열기

  
  

Ctrl + Tab
• 전환 탭과 도구 창 간 변환(Windows 단축키와 충돌) )

  
  

위 내용은 WebStorm 입문용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!