preface

Recently, I was making a video to share some CSS knowledge, and found that people were very interested in my editor, so I wanted to write an article to introduce my editor and some commonly used plug-ins. Help fellow Funny Code! Video is CSS daily progress a little bit series, mainly published on zhihu platform, welcome everyone to look look~ post an address – pick up the code of the little girl

1. Why do I use itvscode

Webstorm is also a fan of Webstorm before this year. Webstorm is praised by the majority of Chinese JS developers as “the magic weapon of Web front-end development”, “the most powerful HTML5 editor”, “the most intelligent JavaScript IDE” and so on. Its powerful built-in features have long made it a shrine. Even when you start your career, you’re considered a low developer who doesn’t use WebStorm. So why did I switch to vscode? I believe that we are all troubled by the activation code has been invalid, every three or five need to ask Baidu to activate the code. But it wasn’t that problem that made me decide to ditch it. It was that its powerful built-in features made it slow to start up, took up too much running memory, and caused my memory-poor computer to freeze up from time to time. So I settled for the next best thing and started using vscode. In the process of getting used to it, I fell in love with vscode.

So what are vscode’s advantages over other editors?

  • [lightweight] -VScode is a lightweight editor with a very small installation package and very fast startup.
  • VScode has a very rich plug-in system, whether you edit HTML, CSS, JS, TS, Vue, React and other front-end code, or JAVA, Python and other back-end code. We can all find plugins that will help us complete projects faster.
  • [code trace feature] -VScode has excellent code trace feature, which can easily mark code changes for us.

So if you’re like me, and you’re struggling with activation codes and running out of memory, you’re welcome to switch to vscode as I did, and vscode’s rich plugin market can satisfy almost all your fantasies. If you are used to WebStorm but just need to crack the patch, you can send a private message. I can share the patch with you if you need it.

2. VScode theme

Many friends ask me what the theme of the editor is. Here I will not introduce the theme too much, but I will share the theme I use is Monokai. For more topics, you can choose Settings from the preferences -> Color theme

3. VScode plug-in

Chinese (Simplified) Language Pack for Visual Studio Code

  • After the installation, add “locale”: “zh-cn” to locale.json to load the Chinese (simplified) language package. To modify locale.json, you can open the command palette by pressing Ctrl+Shift+P at the same time, then type “config” to filter the list of available commands, and then select the configuration language command.
  • After the configuration is complete, restart vscode to use the Chinese version of vscode

Beautify automatically formats code

  • Can beautify JS, JSON, CSS, Sass, HTML (other types of files do not work)

Better Comments Highlights and beautifies your love of writing and reading Comments

  • This is mainly for line comments, with different colors attached to different types of comments
  • There are five built-in highlighting colors in better-comments.tags, which are configurable

Bracket Pair Colorizer

  • Add a bright color to the parentheses in the code, matching the parentheses to make it easier to read

CodeSnap code screenshot tool

  • CTRL + Shift + P opens the preferences and selects codeSnap
  • Select a code snippet to take a screenshot. Long screenshots are supported

Colorize Visualizes the color

  • Let the color set on your web page be found in the code at a glance

Live Server A small Server with real-time loading capabilities

  • Let you write code and see the latest results without refreshing the browser

Open in Browser Easily access HTML pages in the browser

  • After the plug-in marketplace is installed, right-click and select Open in Default Browser

Git Emoji CommitGit submit message emoji JS-CSS-HTML FormatterAutomatic formatting when saving code

Path Intellisense Automatic reference Path completion

Terminal is a built-in Terminal in vscode

Todo Tree records code locations and quickly locates codes

ESLint code checks plugins to help check and standardize code

Atom One Dark Theme syntax skin, beautify code

Auto Close Tag Automatically closes an HTML Tag

Auto Complete Tag Automatically completes HTML tags

Auto Import Automatically imports dependent libraries/files from the outside

🌈 Rainbow Fart Waifu Rainbow Fart

  • A very interesting plug-in, loved by the majority of male programmers ~
  • After downloading you may fall in love with typing code

Background Sets the background image for the edit area

  • Nice work area and a raving rainbow fart
  • I believe that the work will be twice as effective

These are some of the plugins that I have installed in vscode. There are also some specific snippets for the framework that we use, such as Vue, antd, React, and even Flutter. There are all kinds of plugins available in the marketplace. Can help us quickly generate relevant code snippets. How happy it was to stand on the shoulders of giants! This kind of plug-in you only in the plug-in market search keywords (Vue.. ), the React… You can find a bunch of them, you can click in to see the introduction of the plug-in, download the one you need, not here.

Finally, share one more high-powered way to open vscode.

1. Open VScode, run Command + Shift + p, and type shelll2. Select install code in PATH

3. Open the CLI window and go to the directory where the project resides

4. On the CLI, enter code.

Manual end — — — — — — — — — — — — –