To do a good job, we must first sharpen its tools, vscode as our common editor, only the whole look good, work can be comfortable, efficiency can double. Here are five ways to customize vscode to look as pleasing as your goddess.

The theme

The cobalt2 theme by Wes Bos of great fame is highly recommended, and the main colors are blue and yellow. Try it.

Here are the recommended editor configurations for this topic:

// setting.json
{
  "workbench.colorTheme": "Cobalt2".// The Cursive font is operator Mono, it's $200 and you need to buy it to get the cursive
  "editor.fontFamily": "Operator Mono, Menlo, Monaco, 'Courier New', monospace"."editor.fontSize": 17."editor.lineHeight": 25."editor.letterSpacing": 0.5."files.trimTrailingWhitespace": true."editor.fontWeight": "400"."prettier.eslintIntegration": true."editor.cursorStyle": "line"."editor.cursorWidth": 5."editor.cursorBlinking": "solid"."editor.renderWhitespace": "all",}Copy the code

After configuring my editor, it looks like this:

The font

Fira Code is recommended. It is the same width font and is considered the best font for programmers.

Click on the link above to find the button in the image to download the Fira Code font package:

After pressurizing, go to the TTF folder, select all the files, then right-click open and select Install Font.

Then open setting.json and add the following configuration:

{
     "editor.fontFamily": "Fira Code"."editor.fontLigatures": true
}
Copy the code

After the configuration is successful, the following results are displayed:

The plug-in

Below is a list of my common vscode plug-ins that you can install as needed.

  • Auto Close Tag
  • Auto Import
  • Auto Rename Tag
  • Bookmarks
  • Color Picker
  • CSS Peek
  • Debug Visualizer
  • Docker
  • Document This
  • Git Blame
  • Git History
  • Git Project Manager
  • GitLens
  • LeetCode
  • Markdown Preview Enhanced
  • MDX
  • Node.js Modules Intellisense
  • npm
  • npm Intellisense
  • Path Intellinsense
  • Prettier
  • Project Manager
  • Settings Sync
  • TODO Highlight
  • Typescript Hero
  • VSCode Advanced New File

Vscode basic configuration

Click on the small gear in the lower left corner, or the shortcut key CMD +, to open the configuration interface of vscode.

Vscode is built using electron, so configuration changes to it can be seen in real time, which I love.

Remove ignored files

Vscode hides.git files by default. I want to see all the files in the current project completely, so I cleared out the exclude configuration.

A custom title

Search title and change the configuration item to ${dirty} ${activeEditorMedium}${separator}${rootName} to view the current open file item and directory information, as well as the file save status.

Customize shortcut keys

The VSCode Advanced New File plugin is used to quickly create a New File without clicking on a folder. The default shortcut for VSCode to create a New File is CMD + N, while the shortcut for VSCode is CMD + CTRL + N. I want to reverse the two shortcuts, and I’ll show you how to customize them.

Enter CMD + K + S to enter the shortcut key configuration interface, search new File, and click the edit button of a certain item to edit it. The customized shortcut keys are as follows:

The last

When all this is done, we won’t have to reconfigure it when we change computers, will we? Rest assured, the Settings Sync plugin helps us to synchronize our existing vscode configuration.

To make sure you have it installed, type CMD + Shift + P to open the control panel, go to Sync: Update/Upload Settings, and press Enter to Upload our configuration (you’ll need to do it first, so we won’t demonstrate it here).

To synchronize the configuration on a new computer, install the plugin as well, select Sync: Download Settings, and wait for the synchronization to complete.