If a worker wants to do a good job, he must sharpen his tools first. If you are doing front-end development, I recommend VS Code as the “main development tool”.
VS Code, the full name of Visual Studio Code, is an open source, free, cross-platform, high-performance, lightweight Code editor. It does a great job in terms of performance, language support, and open source community.
Features of VS Code
- The mission of VS Code is to provide developers with an IDE-like development experience in the editor, such as Code intelligence tips, syntax checking, graphical debugging tools, plug-in extensions, version control, etc.
- Cross-platform support for multiple platforms such as MacOS, Windows and Linux.
- VS Code’s source Code is open source under the MIT license.
- Support third party plug-in, powerful, perfect ecosystem.
- VS Code comes with support for JavaScript, TypeScript, and Node.js. In other words, when you write JS and TS, there is an intelligent prompt. Of course, for other languages, you can install the appropriate extension pack plugins, and there will be smart prompts.
VS Code installation
- VS Code’s official website: https://code.visualstudio.com
VS Code is easy to install. Go to the website, download the package, and double-click to install it.
VS Code Shortcuts
How familiar VS Code is with you depends first on whether you can use shortcuts. Listed below are some of the most commonly used shortcuts, but the ones in bold are most frequently used.
1. Shortcuts in the workspace
| Mac shortcuts | Windows shortcuts | role | note |
|---|---|---|---|
| Cmd + Shift + P | Ctrl + Shift + P, F1 | Show Command Panel | |
| Cmd + B | Ctrl + B | Show/hide the sidebar | Very practical |
Cmd + \ |
Ctrl + \ |
Create multiple editors | [important] a code copy tool |
| Cmd + 1, 2 | Ctrl + 1, 2 | Focus on the first and second editors | Same as above important |
| cmd +/- | ctrl +/- | Zoom in/out the workspace (including code font, left navigation bar) | It’s used a lot in projector scenes |
| Cmd + J | Ctrl + J | Show/hide the console | |
| Cmd + Shift + N | Ctrl + Shift + N | Open a new software window | Is very common |
| Cmd + Shift + W | Ctrl + Shift + W | Close the current window of the software | |
| Cmd + N | Ctrl + N | The new file | |
| Cmd + W | Ctrl + W | Close the current file |
2. Jump operation
| Mac shortcuts | Windows shortcuts | role | note |
|---|---|---|---|
| Cmd + ` | There is no | In the same softwareMultiple WorkspacesSwitch between | It’s used a lot |
| Cmd + Option + left and right arrow keys | Ctrl + Pagedown/Pageup | In the already openMultiple filesI’m going to switch between | Very practical |
| Ctrl + Tab | Ctrl + Tab | Jump between files that are already open | Not as fast as the keyboard shortcuts above |
| Cmd + Shift + O | Ctrl + shift + O | Various in the current fileMethods betweenTo jump | |
| Ctrl + G | Ctrl + G | Jump to the specified row | |
Cmd+Shift+\ |
Ctrl+Shift+\ |
Jump to the matching bracket |
3. Move the cursor
| Mac shortcuts | Windows shortcuts | role | note |
|---|---|---|---|
| The direction key | The direction key | inA single characterMove the cursor between | You know that |
| OPTION + left and right arrow keys | Ctrl + left and right arrow keys | inThe wordMove the cursor between | Is very common |
| Cmd + left and right arrow keys | Fn + left and right arrow keys | inThe entire lineMove the cursor between | Is very common |
| Cmd + please | FN + ← (or WIN + ←) | Position the cursor to the far left of the current line | Is very common |
| Cmd + – | Fn + → (or Win + →) | Position the cursor to the far right of the current line | Is very common |
| Cmd + write | Ctrl + Home | Position the cursor to the first line of the article | |
| Cmd + left | Ctrl + End | Position the cursor to the last line of the article | |
| Cmd + Shift + \ | inThe code blockMove the cursor between |
4. Edit operations
| Mac shortcuts | Windows shortcuts | role | note |
|---|---|---|---|
| Cmd + Enter | Ctrl + Enter | Add a new line below the current line, then jump to the line | Even if the cursor is not at the end of the line, it can quickly insert a line down |
| Cmd+Shift+Enter | Ctrl+Shift+Enter | Add a row above the current row, and then jump to the row | Even if the cursor is not at the end of the line, it can quickly insert a line up |
| Option + write | Alt + write | Move the code up | Is very common |
| Option + left | Alt + left | Move the code down | Is very common |
| Option + Shift + ↑ | Alt + Shift + ↑ | Copy the code up | |
| Option + Shift + ↓ | Alt + Shift + ↓ | Copy the code down | A tool for writing repetitive code |
5. Multi-cursor editing
| Mac shortcuts | Windows shortcuts | role | note |
|---|---|---|---|
| Cmd + Option + up and down keys | Ctrl + Alt + Up and Down | On consecutive columns, the cursor appears simultaneously | |
| Click any position with the mouse | Alt + mouse click anywhere | At any location, the cursor appears simultaneously | |
| Option + Shift + mouse drag | Alt + Shift + Mouse drag | At the end of each line in the selected area, a cursor appears | |
| Cmd + Shift + L | Ctrl + Shift + L | The cursor appears where all the same content of the selected text is |
Other Multiple Cursor Edits :(Important)
- Select a text, and then repeatedly hold down the ‘Cmd + D’ shortcut (for Windows users, ‘Ctrl + D’) to add the same words throughout the text.
- After selecting a bunch of text, hold down the “Option + Shift + I” key (for Windows users, hold down the “Alt + Shift + I” key) to create a cursor at the end of each line.
6. Delete operation
| Mac shortcuts | Windows shortcuts | role | note |
|---|---|---|---|
| Cmd + shift + K | Ctrl + Shift + K | Delete the entire line | “Cmd + X” is used for clipping, but you can also delete entire lines |
| option + Backspace | Ctrl + Backspace | Delete the word before the cursor | English is effective and often used |
| option + delete | Ctrl + delete | Delete a word after the cursor | |
| Cmd + Backspace | Deletes the entire line before the cursor | Is very common | |
| Cmd + delete | Deletes the entire line after the cursor |
Note: the shortcuts for moving the cursor, editing, and deleting described above work in most other editors.
7. Programming language dependent
| Mac shortcuts | Windows shortcuts | role | note |
|---|---|---|---|
| Cmd + / | Ctrl + / | Add a one-line comment | Is very common |
| Option + Shift + F | Alt + shift + F | Code formatting | Is very common |
| F2 | F2 | Do it in a refactoring wayrename | To change the code for |
| Ctrl + J | Merge multiple lines of code into one line | Win users can search for “merge rows” in the command panel. | |
| Cmd + | |||
| Cmd + U | Ctrl + U | To move the cursor back to the previous position | Undo cursor movement and selection |
8. Search for relevance
| Mac shortcuts | Windows shortcuts | role | note |
|---|---|---|---|
| Cmd + Shift + F | Ctrl + Shift +F | Global search code | Is very common |
| Cmd + P | Ctrl + P | In the current project,globalSearch file name | |
| Cmd + F | Ctrl + F | Search for code in the current file with the cursor in the search box | |
| Cmd + G | F3 | Search for code in the current file with the cursor still in the editor | Very clever |
9. Find where a function is called
For example, I’ve called foo() in the a.js file. So what if I want to know if foo() has been called in other files?
Here’s how to do it: In the a.js file, select the foo() function (or place the cursor over the foo() function), then hold down the “Shift + F12” shortcut key to see where the foo() function is called. It’s useful.
10. Mouse operation
- At the position of the current row, three mouse clicks can select the current row.
- To select the current line, click the line number of the file with the mouse.
- Multiple lines can be selected by moving the mouse up and down on a line number.