웹 사이트
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 크기를 증가하십시오