How to create a handy vs Code?

A handy IDE, It can greatly improve the efficiency and happiness of developers .

and VS Code The rapid development in the past two years , Make it capture a large number of loyal users .

this paper , Will be extended from 、 The theme 、 Icons and other comprehensive introduction to how to configure a cool to take off VS Code.

1.  The theme

One-dark-pro

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

I am currently using One-dark-pro, This is a Atom by VS Code The theme of the production , At present, it has been widely used by many mainstream IDE use , And very popular .

besides ,Bio Dark、Github、Cobalt 2、Cyberpunk It's also worth recommending .

2.  Icon

monokai pro

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

File icons can enhance VS Code The appearance of the editor . It can help us distinguish different files and folders through icons .

I currently use monokai pro Icon , This is a monokai pro Part of the theme .

3.  Expand

Gitlens

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

It's hard to get around in multiplayer development git, This is a version management tool widely used in the development process .

Gitlens The extension allows you to see who it is ？ Why? ？ as well as , When ？ What code has been changed ？

Settings sync

If you don't want to install the extension again when you change the machine 、 To configure VS Code, Then this extension is right for you .

With this extension , You can change your settings 、 The theme 、 Shortcut keys for synchronization . If you switch devices , These configurations can be easily synchronized to new devices , Avoid wasting time .

Prettier

Prettier Is a code formatting tool , It parses your code , Format your code with its own rules , So that your code has a consistent and beautiful style .

Set property values editor.formatOnSave Set to  "true" Or add this attribute to your settings.json In file , In this way, the code can be formatted when saving .

Vuln Cost - Security Scanner

This extension can find security vulnerabilities in open source packages . It gives feedback in the code , For example, how many vulnerabilities are contained in the software package you are importing .

If the scanner finds any known vulnerabilities , It will recommend fixing these vulnerabilities .

This is very helpful for you to protect the security of your code .

Indent-Rainbow

This extension shades the indent in front of the text , Alternate four different colors at each step .

thus , It can improve the readability and clarity of the code .

4.  Shortcut key

Shortcut keys are often used in the coding process , And can greatly improve the efficiency of the part , Here are some VS Code Very useful shortcut keys in .

Open and close the sidebar

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

• Mac — Command + B

• Windows — Ctrl + B

• Ubuntu — Ctrl + B

Choose the word

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

• Mac — Command + D

• Windows — Ctrl + D

• Ubuntu — Ctrl + D

Split editor

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

• Mac — Command + \ or 2,3,4

• Windows — Shift + Alt + \ or 2,3,4

• Ubuntu — Shift + Alt + \ or 2,3,4

Code folding

Fold

• Windows/Ubuntu — Ctrl + Shift + [

• Mac — Command+ Option + [

an

• Windows/Ubuntu — Ctrl + Shift + ]

• Mac — Command+ Option + ]

Copy to previous line / The next line

• Mac — Shift + Option + Up/Down

• Windows — Shift + Alt + Up/Down

• Ubuntu — Ctrl + Shift + Alt + Up/Down

Code formatting

• Windows — Shift + Alt + F

• Mac — Shift + Option + F

• Ubuntu — Ctrl + Shift + I

Open the file quickly

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

• Mac — Command + P

• Windows/Ubuntu — Ctrl + P

Command control board

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

• Windows/Ubuntu: Ctrl +Shift + P

• Mac: Command + Shift + P

Toggle label

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

• Mac — Command+1, Command+2, Command+3

• Windows/Ubuntu — Ctrl+1, Ctrl+2, Ctrl+3

Select the current line

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

• Mac — Command + L

• Windows/Ubuntu — Ctrl + L

Delete row

• Mac — Command + Shift + K

• Windows/Ubuntu — Ctrl + Shift + K

Mobile line

• Mac — Option + Up/Down arrow

• Windows/Ubuntu — Alt + Up/Down arrow

Find words / The phrase

If you need to find from the current file

• Mac — Command + F

• Windows/Ubuntu — Ctrl + F

If you need to find from the whole project

• Mac — Command+Shift + F

• Windows/Ubuntu — Ctrl+Shidt + F

View definition

• Mac — Option + F12

• Windows/Ubuntu — Alt + F12

rename

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

• Mac/Windows/Ubuntu — F2

Multi cursor selection

​

Edit switch to center

Add picture comments , No more than  140  word （ Optional ）

• Mac — Option + Click

• Windows/Ubuntu — Alt + Click

Duplicate lines

• Mac — Command + Shift + D

• Windows/Ubuntu — Ctrl + Shift + D

5.  Conclusion

As said at the beginning ,VS Code It is one of the most commonly used code editors among developers , It has some amazing features to help developers improve coding speed .

This article introduces what I'm using VS Code Some summary of all aspects in the process , I hope to make you feel right VS Code Students who are interested but don't understand can help ！