• Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

At the forefront of

  • VS CodeIt’s used a lot by front-end developers, and it’s used by other developers. Its functions are undoubtedly very powerful, very high scalability, which can improve our development efficiency, quality and coding experience?

shortcuts

  • Common shortcuts to improve development efficiency.

View all shortcut keys

Mac: Command + K + S Windows: Ctrl + K + SCopy the code

Search for a file in the current folder

Mac: Command + P Windows: Ctrl + PCopy the code

The input box for executing the command is displayed

Mac: Shift Command P Windows: Shift Ctrl PCopy the code

End usecodeCommand to open a file or folder

Open VS Code -> Shift + Command + P -> Enter shell Command -> Select Install 'Code' Command in PATH Windows: 1. Find the VS Code installation location, go to the bin folder, copy the path (eg: D: Microsoft VS Code\bin) 2. Go back to the desktop, right-click my computer -> Properties -> Advanced System Settings -> Environment Variables, edit the value of path in the user variable, add the English semicolon to the original path + VS Code bin path (eg: "; E: \ Microsoft VS Code \ bin ")Copy the code

VueWait for a method called in the template to jump quickly to the defined location

Mac: Select the method name -> Command + D Windows: Select the method name -> Ctrl + DCopy the code
  • mixinsThere are problems with mixing or multiple calls.

Multiple edit areas

Mac: Command + 2/3/4... Windows: Ctrl + 2/3/4...Copy the code
  • Cannot use the current number of edit areas+ 1The numerical values.

Close/open the left sidebar

Mac: Command + B Windows: Ctrl + BCopy the code

Close/open the built-in terminal

Mac: Command + 'Windows: Ctrl +'Copy the code

Code formatting, can be used with plug-ins

Mac: Shift + Option + F Windows: Shift + Alt + FCopy the code

Removes excess space at the end of each line in the current line or selected area

Mac: Command + K + X Windows: Ctrl + K + XCopy the code

Select all words in the current file where the mouse is located

Mac: Command + Shift + L Windows: Ctrl + Shift + LCopy the code

The plug-in

  • Good plug-ins can improve the quality of our code, the efficiency of our coding experience.

Chinese Chinese package

Chinese (Simplified) Language Pack for Visual Studio Code // Chinese Simplified Chinese (Traditional) Language Pack for Visual Studio Code // Traditional ChineseCopy the code

Configuration synchronization

Setting Sync
Copy the code
  • VS Code synchronizes Settings with plug-ins

File browser debugging and synchronous refresh

Live Server
Copy the code

Programming language support

Auto Close Tag Auto Complete Tag Auto Rename Tag Easy LESS Live Sass Compiler ES7 React/Redux/GraphQL/React-Native Snippets Typescript React code Snippets Babel JavaScript Volar Vetur Vue 3 Snippets GraphQL GitLens -- Git supercharged // gitCopy the code

Editor/code beautification

ESLint TSLint Prettier Beautify Bracket Pair Colorizer2 // Highlight Matching Tag scode-icon // Left sidebar file type icon Dracula Official // Shades of Purple // Code themeCopy the code

other

Version Lens // package.json You can view the latest Version of all packages KoroFileHeader // add file headers/function annotationsCopy the code

One day

Plug-in offline installation package

  • Open theVS CodePlugin official websiteExtensions for the Visual Studio family of product, download the plug-in you want to install and get the corresponding.vsixThe closing document.
Mac installation
  • Visit -> Go -> Go to Folder -> Enter~-> Enter the folder to useshift + command + .Open hidden files -> Bring offline plug-ins (.vsix) copy to the.vscode/extensionsIn the can.
Windows installation
  • Copy the offline installation package toVS CodeOf the installation directorybindirectory
  • inbinRight-click in the directoryOpen the command window here, enter the following command:
code --install-extension [plugin name]
Copy the code

Past wonderful

  • Gold nine front-end interview summary!
  • Basic specifications for front-end development
  • Build from 0 Vite + Vue3 + element-plus + VUE-Router + ESLint + husky + Lint-staged
  • “Front-end advanced” JavaScript handwriting methods/use tips self-check
  • Public account open small program best solution (Vue)
  • Axios you probably don’t know how to use

“Likes, favorites and comments”

❤️ follow + like + comment + share ❤️, lingering fragrance in hand, thank 🙏 everyone.