series

  • [Configure a Windows front-end development environment from scratch] – ONE: WT + WSL

Basic configuration

Maybe you’ve been using Vscode for a while and have some popular plug-ins installed that meet your daily development needs. That’s fine, but if that’s it, you’re probably missing out on a lot of Vscode features.

This article has documented some of Vscode’s tips and configurations that will greatly improve your front-end development efforts.

The theme

The appearance level is the first factor to improve development efficiency, and Vscode’s default theme color scheme is a bit of a turn-off for me. Here I recommend Ocean High Contrast under Material.

(Tip: You can also search accent in the command panel to change the theme’s highlight color.)

In addition, Material Theme Icons are also very good file icon themes.

The font

Choose the right font to make your code look more pleasing. The font I use most of the year is FiraCode.

"editor.fontFamily": "Fira Code".

"editor.fontLigatures": true.

"editor.fontSize": 18

Copy the code

The indentation

The “Tabs vs Spaces” debate bothers many people, but whether you are a “tabs” or a “Spaces” configuration, you can do this:

"editor.detectIndentation": true.

"editor.insertSpaces": true

"editor.tabSize": 2

Copy the code

Seconds to open the file

As anyone who has used Vscode knows, when we open a file with Ctrl + P, the name of the file is italicized, which means that the file is in preview mode. Usually, if we open another file at this time, the file will be lost.

"workbench.editor.enablePreviewFromQuickOpen": false

Copy the code

Clean up the sidebar

The sidebar has an open editor pane by default. In my experience, it is not used much and it is not aesthetically pleasing and makes the sidebar look messy. This pane can be hidden by using the following configuration (you can also hide it directly from the sidebar by right-clicking the menu)

"explorer.openEditors.visible": 0

Copy the code

Customize the title bar

The default title bar of Vscode only shows the current file name and project name. We can refer to the configuration options provided on the official website to make the following configuration to optimize:

"window.title": "${dirty} ${activeEditorMedium}${separator}${rootName}"

Copy the code

Code thumbnail

That’s this thing.

It helps us to locate code quickly, but it’s a bit ugly, so we can make it a little bit prettier with the following configuration:

"editor.minimap.renderCharacters": false.

"editor.minimap.maxColumn": 200.

"editor.minimap.showSlider": "always"

Copy the code

The effect is quite remarkable:

The plug-in

Of course, the reason for choosing Vscode is not only its power, but also its complete ecology and rich plugins – in fact, if I didn’t think about that, I would probably use Atom.

indent-rainbow

The main function of this plugin is to color the indent before the text. The default color is as follows:

javascript console utils

In development, either break point debugging in the console or simply console.xxx(). Usually the former is suitable for more complex cases, and when the logic is simple, obviously the second debugging method is more efficient.

This plug-in usually has two operations:

shortcuts operation
Ctrl/Cmd + Shift + L Output fixed format Log
Ctrl/Cmd + Shift + D Delete this page Log

To quickly locate your own logs, use the % C placeholder insertion style. Of course, if every log needs to be styled manually, then this is a waste of time, so you can modify the plugin a little bit. For details, see VSCode’s Log plugin.)

The output log results are as follows:

Live Server

This is a great plug-in that requires no configuration and works right out of the box. It helps you launch a local development server that provides real-time reloading for both static and dynamic pages.

vscode-faker

With this plugin, you don’t have to scratch your head thinking about fake data anymore.

REST Client

As Web developers, we need to use REST apis on a regular basis, postman is a good choice, and Vscode can easily meet our needs.

Prettier – Code formatter

This is a plug-in I can’t put down, cooperate

"editor.formatOnSave": true

Copy the code

Do automatic formatting code when saving, mom no longer need to worry about my code formatting problem:

Eslint

3, When Prettier comes to Prettier, its buddy Eslint is Prettier.

For detailed configuration, see using ESLint+Prettier to unify the front-end code style.

npm Intellisense

This plugin can automatically complete NPM module names in import statements.

GitLens — Git supercharged

This is also a powerful morphing plugin, without saying much, directly above:

Color Highlight

This plugin allows you to visually view the colors you have defined:

Vetur

Vue developed the necessary plug-in, Pine Wu produced, must be a boutique.

Better Comments

This is a personal favorite for writing more personalized comments.

Settings Sync

Finally, Settings Sync is used to synchronize our Vscode plugin and configuration without having to reconfigure Vscode every time we change the environment.

Use the following ID to synchronize the VScode configuration I’m currently using.

65639bb6b9e63dd43ce44efb21010a98
Copy the code