As the saying goes, work to good things must first sharpen its tools, to work efficiently, code code tools with good is necessary, here is mainly said on the Mac VScode shortcut keys, to help you quickly build a good development tools.

Necessary plug-in

  • Auto Close Tag – Automatically closes an HTML Tag
  • Auto Import – Automatic Import plug-in
  • Auto Rename Tag – When modifying HTML tags, the system automatically modifies matched tags
  • Bracket Pair Colorizer – Color brackets before and after
  • Can I Use – HTML5, CSS3, SVG browser compatibility check
  • Code Spell Checker – Checks for spelling errors in Code
  • Code Runner – Runs selected Code snippets (supports many languages, including Node)
  • Git Blame – Displays Git information for the current line in the status bar
  • Git History – View the Git log
  • GitLens – Displays the latest commit and author of the file, and displays the current commit information
  • ESLint – ESLint plugin
  • Debugger for Chrome – Works with Chrome for debugging
  • HTML CSS support-html, CSS hint
  • HTMLHint – HTML format hint
  • JavaScript (ES6) code snippets – Supports ES6 syntactic code snippets
  • JavaScript Snippet Pack – Generates JS statements using simple two letters that need to be remembered
  • JQuery Code Snippets – jQuery quick tips. Once installed, type Jq and you’ll see a lot of reminders
  • Language-stylus – Supports stylus
  • Material Icon Theme – Icon style, very nice
  • NPM – Runs the NPM command
  • NPM Intellisense – When importing a module, a message is displayed indicating that the module name has been installed
  • Open in browser – Run the current page in the browser, shortcut key (option+B)
  • Output Colorizer – Console Output Colorizer
  • Panda Theme – A Theme
  • Path Intellisense – Automatic Path supplement
  • Prettier – Code Prettier, Shortcut (Shift +option+F)
  • Vetur – Currently better Vue syntax highlighting

User-defined Settings

Use CMD + Shift +P to open all user Settings and modify the built-in formatting of the editor in the json set. Here are some personal changes, including some esLint, prettier, vetur, and editor Settings. If you don’t like them, Google or Baidu.

{// indent 2 Spaces "editor.tabSize": 2, // - should not be used as wordSeparators" editor.wordSeparators": "' ~! @ # $% ^ & * () = + [{]} \ \ |; : '\ ",. < > /?" "Editor. quickSuggestions": {"strings": True}, // Fix the code in ESLint format each time you save it, assuming the project has eslint "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true }, { "language": "vue", "autoFix": True}], "eslint. Options" : {" plugins ": [" HTML"]}, / / prettier use validated code format eslint "prettier. EslintIntegration" : SingleQuote ": true, // Use TAB to automatically change to 2 Spaces "prettier.tabwidth ": 2, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions": { "js-beautify-html": {// Vue component HTML code formatting style ford-aligned "wrap_attributes": "auto"}, "prettyHTML ": {"printWidth": 130, "singleQuote": true } } }Copy the code

The command box

  1. F1 or Cmd+Shift+P: Open the command panel. In the input box that opens, you can enter any command

    • To enter Cmd+Shift+P, enter >

  2. In the Cmd+P window you can also:

    • Enter the file name to jump to the file
    • ? Lists the current actions that can be performed
    • : Jumps to the number of lines. You can also enter Cmd+G directly

Common Shortcut keys

I have learned the shortcut keys, and sometimes I can code without the mouse. I feel that the great god who knows Vim should have this experience, so it is particularly important to know the shortcut keys of the editor.

Here are some commonly used shortcut keys.

Editor and window management

  1. Open a new window: Cmd+Shift+N, used when opening a new project
  2. Close the window: Cmd+Shift+W
  3. Close the TAB: Cmd+W
  4. Create a new file Cmd+N
  5. Switch between files Cmd+~
  6. Cut out a new edit screen (up to 3) Cmd+\, which is equivalent to splitting a screen in half
  7. Cmd+1 Cmd+2 Cmd+3 shortcut keys for the 3 left, middle and right editors will be used after using the interface above
  8. Close Open Explorer Cmd+B, also known as the sidebar
  9. Switch between different tabs in the same editor: Control + TAB

The code editor

formatting

  1. Formatting code: Shift +Option+F
  2. Move a line Up or Down: Option+Up or Option+ Down
  3. Copy a line Up and Down: Shift+Option+Up or Shift+Option+Down
  4. Insert Cmd+Enter below the current line
  5. Insert a line above the current line: Cmd+Shift+Enter
  6. Delete the current line: Cmd+Shift+K

The cursor associated

  1. Skip to the head and tail of the current line: Fn+← (Cmd+←), Fn+→ (Cmd+→)
  2. Jump a word: option+←, option+→
  3. Insert multiple cursors: Option+click or Cmd+Option+up/Cmd+Option+ Down
  4. Add the selection to the next lookup match: Cmd+D

Search and replace

  1. Find: Cmd + F
  2. Global search: Shift+Cmd+F
  3. Global substitution: Shift+Cmd+H

According to

  1. Put/Zoom: Cmd+=/Cmd+-

extension

  1. Modify language: combination key Cmd+K M
  2. Setting: Cmd +,

If you have any functions or shortcuts that can improve coding efficiency, please point them out in the comments and I will add them back.

Read the last two songs

  1. Please give a thumbs-up to your favorite friends. If you feel helpful to people around you, please share it with your fingers. Thank you so much for taking the time to read this, and thank you for your likes and shares.
  2. I hope you pay attention to my public account, the first time the new article to the public account, the public account mainly sent some personal essays, reading notes, and some technical hot spots and real-time hot spots, and there is a very attractive my own money lottery oh ~