This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021.

Hello everyone, I am zhang Three years old 🤣, a French front-end ⚖️. Love share 🖋️, love ice ice 🧊🧊. Welcome friends to add my wechat: Maomaoibingbing, pull you into the group, discuss together, look forward to growing with you 🥂.

preface

Hi guys, this time I’m going to talk to you about the most common editor used by front-end developers – VSCode. Reading this article, the new front end will be able to get a quick start on the tool, and the veteran front end will be able to re-examine any details that have been missed.

Introduction to the

VSCode is a free, open source, modern and lightweight code editor. It supports syntax highlighting, intelligent code completion, custom shortcuts, brackets matching and color segmentation, code snippets, code comparison Diff, GIT commands, and other features in almost all major development languages. And optimized for web development and cloud application development. — VSCode Chinese

download

Download address

VSCode website portal: code.visualstudio.com/Download

VSCode Chinese portal: vscode.bianjiqi.net/

Domestic mirror

I believe that friends may encounter the following scenarios when downloading:

Slow download is really a headache, we can use the domestic mirror to download, the steps are as follows:

  1. Click the Download button from the official website to download
  2. Open the download content page in your browser and open it in a new page
  3. Link toaz764295.vo.msecnd.netReplace withvscode.cdn.azure.cnAnd press enter

shortcuts

The official shortcut keys provided by VSCode (Windows version) are shown below:

Of course, you can also check out the PDF version on the website: Keyboard – Shortcuts – Windows.pdf

The plug-in

The power of VSCode is that it has many excellent plug-ins (extensions). Here are a brief description of the twelve plug-ins I use.

Chinese (Simplified)

Introduction: Chinese language pack, a must.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

Beautify

Introduction: Formatting code used.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

Prettier – Code formatter

Introduction: Formatting code used.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

open in browser

Summary: You can open HTML files in a browser.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

Use: Right-click an HTML file and select Open In Default Browser or Open In Other Browser.

Bracket Pair Colorizer 2

Summary: Make nested parentheses (curly parentheses and curly parentheses) different colors for easy differentiation.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

Effect:

indent-rainbow

Summary: Different background colors are displayed in front of the code according to indentation for easy differentiation.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

Effect:

Auto Rename Tag

Description: When you modify a label, the corresponding label (if any) on the other label is automatically modified.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

Effect:

Better Comments

Description: Comments change color to make your comments different.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

Use:

/ /! Red highlight note, double slash after English exclamation mark! configuration
// Todo is highlighted in orange with the todo function followed by a double slash
// * green highlighted comment, double slash followed by * variable
/ /? Blue highlighted comments, double slash followed by question mark? component
// // black note with delete line, double slash followed by double slash //
Copy the code

Effect:

Power Mode

Introduction: Typing effects make coding no longer boring.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

Configuration:

Effect:

Snazzy Light

Introduction: Light theme.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

vscode-icons

Summary: Directory themes in File Explorer, displaying different ICONS according to file names.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

Windows opacity

To enable transparent mode for your editor, set the value from 0 to 255.

Liverpoolfc.tv: marketplace.visualstudio.com/items?itemN…

The resources

  • Visual Studio Code – Code Editing. Redefined
  • VSCode Chinese website