웹 사이트
JavaScript, TypeScript, React, Vue 및 Node.js 개발을 위한 종합 WebStorm 단축키 및 워크플로우.
일반 단축키
| Windows/Linux |
macOS |
Description |
Ctrl+Shift+A |
Cmd+Shift+A |
Find Action |
Ctrl+Shift+N |
Cmd+Shift+O |
Go to File |
Ctrl+N |
Cmd+O |
Go to Class |
Ctrl+Shift+Alt+N |
Cmd+Option+O |
Go to Symbol |
Ctrl+E |
Cmd+E |
Recent Files |
Ctrl+Shift+E |
Cmd+Shift+E |
Recent Locations |
Ctrl+G |
Cmd+L |
Go to Line |
Ctrl+F12 |
Cmd+F12 |
File Structure |
Alt+F1 |
Option+F1 |
Select In |
- 연혁
| Windows/Linux |
macOS |
Description |
Ctrl+B |
Cmd+B |
Go to Declaration |
Ctrl+Alt+B |
Cmd+Option+B |
Go to Implementation |
Ctrl+Shift+B |
Cmd+Shift+B |
Go to Type Declaration |
Ctrl+U |
Cmd+U |
Go to Super Method |
Alt+F7 |
Option+F7 |
Find Usages |
Ctrl+F7 |
Cmd+F7 |
Find Usages in File |
Ctrl+Shift+F7 |
Cmd+Shift+F7 |
Highlight Usages |
Ctrl+Alt+F7 |
Cmd+Option+F7 |
Show Usages |
Ctrl+Click |
Cmd+Click |
Go to Declaration |
관련 기사
| Windows/Linux |
macOS |
Description |
Ctrl+Space |
Ctrl+Space |
Basic Code Completion |
Ctrl+Shift+Space |
Ctrl+Shift+Space |
Smart Code Completion |
Ctrl+Alt+Space |
Ctrl+Option+Space |
Class Name Completion |
Ctrl+Shift+Enter |
Cmd+Shift+Enter |
Complete Current Statement |
Ctrl+P |
Cmd+P |
Parameter Info |
Ctrl+Q |
Ctrl+J |
Quick Documentation |
Shift+F1 |
Shift+F1 |
External Documentation |
Ctrl+F1 |
Cmd+F1 |
Show Error Description |
Alt+Insert |
Cmd+N |
Generate Code |
Ctrl+O |
Ctrl+O |
Override Methods |
코드 형식
| Windows/Linux |
macOS |
Description |
Ctrl+Alt+L |
Cmd+Option+L |
Reformat Code |
Ctrl+Alt+O |
Ctrl+Option+O |
Optimize Imports |
Ctrl+Alt+I |
Ctrl+Option+I |
Auto-Indent Lines |
Tab |
Tab |
Indent Selection |
Shift+Tab |
Shift+Tab |
Unindent Selection |
Ctrl+Alt+T |
Cmd+Option+T |
Surround With |
Ctrl+/ |
Cmd+/ |
Comment/Uncomment Line |
Ctrl+Shift+/ |
Cmd+Shift+/ |
Comment/Uncomment Block |
회사연혁
| Windows/Linux |
macOS |
Description |
F5 |
F5 |
Copy |
F6 |
F6 |
Move |
Shift+F6 |
Shift+F6 |
Rename |
Ctrl+F6 |
Cmd+F6 |
Change Signature |
Ctrl+Alt+N |
Cmd+Option+N |
Inline |
Ctrl+Alt+M |
Cmd+Option+M |
Extract Method |
Ctrl+Alt+V |
Cmd+Option+V |
Extract Variable |
Ctrl+Alt+F |
Cmd+Option+F |
Extract Field |
Ctrl+Alt+C |
Cmd+Option+C |
Extract Constant |
Ctrl+Alt+P |
Cmd+Option+P |
Extract Parameter |
실행 및 디버깅
| Windows/Linux |
macOS |
Description |
Shift+F10 |
Ctrl+R |
Run |
Shift+F9 |
Ctrl+D |
Debug |
Ctrl+Shift+F10 |
Ctrl+Shift+R |
Run Context Configuration |
Ctrl+Shift+F9 |
Ctrl+Shift+D |
Debug Context Configuration |
F8 |
F8 |
Step Over |
F7 |
F7 |
Step Into |
Shift+F7 |
Shift+F7 |
Smart Step Into |
Shift+F8 |
Shift+F8 |
Step Out |
Alt+F9 |
Option+F9 |
Run to Cursor |
Alt+F8 |
Option+F8 |
Evaluate Expression |
JavaScript/TypeScript 특정
| Windows/Linux |
macOS |
Description |
Ctrl+Shift+F10 |
Ctrl+Shift+R |
Run JavaScript File |
Alt+Shift+F10 |
Option+Shift+R |
Run Node.js |
Ctrl+Shift+I |
Cmd+Shift+I |
Auto Import |
Ctrl+Alt+Shift+T |
Cmd+Option+Shift+T |
Refactor This |
F2 |
F2 |
Next Highlighted Error |
Shift+F2 |
Shift+F2 |
Previous Highlighted Error |
React 개발
| Windows/Linux |
macOS |
Description |
Ctrl+J |
Cmd+J |
Insert Live Template |
Ctrl+Alt+J |
Cmd+Option+J |
Surround with Live Template |
Ctrl+Shift+A |
Cmd+Shift+A |
Find Action (React snippets) |
rcc + Tab |
rcc + Tab |
React Class Component |
rfc + Tab |
rfc + Tab |
React Function Component |
useState + Tab |
useState + Tab |
useState Hook |
useEffect + Tab |
useEffect + Tab |
useEffect Hook |
Vue.js 개발
| Windows/Linux |
macOS |
Description |
vue + Tab |
vue + Tab |
Vue Component Template |
vdata + Tab |
vdata + Tab |
Vue Data Function |
vmethod + Tab |
vmethod + Tab |
Vue Method |
vcomputed + Tab |
vcomputed + Tab |
Vue Computed Property |
vwatcher + Tab |
vwatcher + Tab |
Vue Watcher |
Node.js 개발
| Windows/Linux |
macOS |
Description |
Ctrl+Shift+F10 |
Ctrl+Shift+R |
Run Node.js File |
Alt+F12 |
Option+F12 |
Terminal |
Ctrl+Shift+X |
Cmd+Shift+X |
Run npm Script |
Ctrl+Alt+F12 |
Cmd+Option+F12 |
Node.js Console |
제품정보
| Windows/Linux |
macOS |
Description |
Ctrl+Shift+F10 |
Ctrl+Shift+R |
Run Test |
Ctrl+Shift+F9 |
Ctrl+Shift+D |
Debug Test |
Alt+Shift+F10 |
Option+Shift+R |
Run All Tests |
Ctrl+Alt+F6 |
Cmd+Option+F6 |
Run Failed Tests |
버전 제어 (Git)
| Windows/Linux |
macOS |
Description |
Ctrl+K |
Cmd+K |
Commit |
Ctrl+Shift+K |
Cmd+Shift+K |
Push |
Ctrl+T |
Cmd+T |
Update Project |
Alt+9 |
Cmd+9 |
Version Control Tool Window |
Ctrl+Alt+Z |
Cmd+Option+Z |
Rollback |
검색 및 교체
| Windows/Linux |
macOS |
Description |
Ctrl+F |
Cmd+F |
Find |
F3 |
Cmd+G |
Find Next |
Shift+F3 |
Cmd+Shift+G |
Find Previous |
Ctrl+R |
Cmd+R |
Replace |
Ctrl+Shift+F |
Cmd+Shift+F |
Find in Path |
Ctrl+Shift+R |
Cmd+Shift+R |
Replace in Path |
도구 Windows
| Windows/Linux |
macOS |
Description |
Alt+1 |
Cmd+1 |
Project Tool Window |
Alt+2 |
Cmd+2 |
Favorites |
Alt+3 |
Cmd+3 |
Find Tool Window |
Alt+4 |
Cmd+4 |
Run Tool Window |
Alt+5 |
Cmd+5 |
Debug Tool Window |
Alt+6 |
Cmd+6 |
TODO Tool Window |
Alt+7 |
Cmd+7 |
Structure Tool Window |
Alt+8 |
Cmd+8 |
Services Tool Window |
Alt+9 |
Cmd+9 |
Version Control |
Alt+0 |
Cmd+0 |
Messages Tool Window |
최고의 연습
프로젝트 설정
- Configure Node.js: 파일 → 설정 → 언어 및 프레임 워크 → Node.js를
- Enable TypeScript: 파일 → 설정 → 언어 및 프레임 워크 → 유형 스크립트
- ** 설정 코드 스타일**: 파일 → 설정 → 편집기 → 코드 스타일 → JavaScript/TypeScript
React 개발
- **Install React 플러그인 **: 파일 → 설정 → 플러그인 → React
- ** JSX**: 파일 → 설정 → 언어 및 프레임 워크 → JavaScript → React JSX
- ** ES6**: 파일 → 설정 → 언어 및 프레임 워크 → JavaScript → ECMAScript 6개 이상
Debugging 팁
- **Browser Debugging **: Chrome DevTools 통합 사용
- **Node.js 디버깅 **: Node.js 설정 구성
- 소스 지도: transpiled 코드 debugging 소스 맵 지원
성능 최적화
- ** 폴더 제외 **: Mark node_modules
- Power Save Mode: 더 나은 배터리 수명을 위해 사용 가능
- ** 메모리 설정**: 큰 프로젝트를 위한 heap 크기를 증가하십시오