How to use VS Code effectively

Let’s say you’ve been using VS Code for a while. You’ve changed the color theme (if not, I highly recommend the Material theme), adjusted the basic Settings, and installed some popular plugins.

You may feel that this level is sufficient for your daily work needs. That’s great, but you’ll probably miss a lot of VS Code’s features.

This article has compiled a list of Settings, plug-ins, and tips that have helped me a lot in my Web development efforts.

jsconfig.json

Jsconfig. json is one of the most overlooked features of VS Code. When you open a JS project in VS Code, VS Code does not know that the files in the project are associated. It treats each file as an individual. You can communicate your project information to VS Code by creating a jsconfig.json file in the project root directory.

Jsconfig. json (among other configurations) implements the “smart jump to definition” feature, which uses various module parsing algorithms. In practice, you can use the combo key ⌘ click to any reference in your code and jump to where the reference is defined. I strongly encourage you to read the official document, but my most common configuration is this:

{
  "compilerOptions": {
    "baseUrl": "src/"."target": "esnext"."module": "commonjs"
  },
  "exclude": [
    "node_modules"]},Copy the code

Introduction to the configuration

Note: If you already know where to find VS Code Settings and how to edit them, skip this section.

VS Code places the configuration information in a jSON-like format (so called JSONC — annotated JSON) file. You can open it using the ⌘ key, shortcut, or File > Preferences > Settings. (Click here for more Settings)

When you open the Settings page, you won’t see the source JSON file directly. VS Code has carefully optimized the interface for the setup page, but for the purposes of sharing this article, it will not be used. Instead, it will be presented as a key-value pair.

You can open the JSON configuration file by clicking the {} button on the TAB bar.

If the file is empty (you haven’t made any changes to the default Settings) then we need to create an empty object that is in valid JSON format:

The theme

This setting may seem basic, but that doesn’t mean it isn’t important. You have a lot of time to look at code, so take the time to choose a theme that is pleasing to the eye and will make the code look better.

As mentioned above, I’m using Ocean High Contrast under the Material theme. I’ve tried a lot of themes over the years and I love this one.

In addition — The Material Theme Icons plugin collects a bunch of nice file/folder Icons:

Your Settings (and editor) should now look like this:

Great, right?

Quick tip: You can change the bright color of the Material theme by searching for “accent” in the command panel.

The font

The right fonts can make your code look cleaner and more elegant. My Code font of choice is Fira Code — a powerful and well-made programming font with beautiful hyphens. Try it! Did I mention it’s free?

The indentation

No matter which side of the “Tabs vs Spaces” debate you are on, you can set it like this:

"editor.detectIndentation": true,
"editor.insertSpaces": true
"editor.tabSize": 2
Copy the code

Switch between editor and file manager

With the ⌘ Registering E shortcut, you can easily toggle your code editor to the project file manager. When you’re in the File manager, you can use the same shortcuts to do routine operations as you do in the macOS Finder, Such as Navigation with Arrow keys, Renaming a file or folder with A Key, Opening a current file with ⌘ ↓, etc.

Quick tip: In VS Code, use the macOS Finder to quickly go to the currently selected file or folder with the ⌥ ⌘ R combination.

Emmet

Emmet is a plug-in that supports many popular editors and significantly improves THE workflow of HTML and CSS by providing smart abbreviations, extensions, and general operations (such as wrapping elements around other elements). You might say that you didn’t develop directly in HTML, but it was easily configured to be compatible with frameworks like React and Vue, which use similar HTML-like markup languages.

Emmet integrated VS Code supports HTML, HAML, Jade, Slim, JSX, XML, XSL, CSS, SCSS, sass, less, and Stylus files without configuration.

Therefore, by default, you need to use the.jsx file extension to get Emmet support. If you only use.js files, you have two options:

1. Let the Emmet.jsRun:

"emmet.includeLanguages": {
"javascript": "javascriptreact",
}
Copy the code

Javascriptreact Emmet syntax in javascript files

2. Let VS Code do the same.jsxFile that way.jsFiles (i.e., for all.jsFiles usejavascriptreactGrammar), so Emmet will take.jsThe file as.jsxFile:

"files.associations": {
"*.js": "javascriptreact"
}
Copy the code

I chose the second one myself — I never use.jsx file extensions, so I’ll make VS Code always support React syntax in.js files.

Here are my most common Emmet commands:

• expand abbreviationExtend the string to JSX elements
• wrap with abbreviationWrap an existing element with another element
• split / join tagChange tag groups to self-closing tags (such as fromexpand abbreviationThe output becomes self-closing) and vice versa

Emmet is really powerful and can save you a lot of time, so I highly recommend you check out the Emmet website demo.

Real second open file

Let’s open a file with ⌘ P.

Note the TAB bar – the italic file name indicates that the current TAB is in preview mode. By default, if you select or press the ⌘ P to open a file from the sidebar and then select or press the ⌘ P to open another file, you will find that the new file will directly take over the previous preview TAB unless it is “earthed” (a double-clicking or editing operation takes place).

When you’re browsing through a file in the sidebar, you might just want to take a peek at the contents of the file, which makes sense, but sometimes you’ll want to really “snap open” it.

To meet this requirement, you can set it like this:

"workbench.editor.enablePreviewFromQuickOpen": false
Copy the code

Now you can try ⌘ P — files no longer open in preview mode.

Navigation path

The navigation path (shown below the title bar) is a useful feature that shows where the current code is in the code base. If you click on one of the nodes in the navigation path, it will show you your current location, sibling files, or tags, which can also be used for quick navigation.

The activation method is as follows:

"breadcrumbs.enabled": true
Copy the code

Here are two useful shortcuts to the navigation path:

• ⌘ ⇧.– Focus navigation path: Select the end element to open a drop-down menu that allows you to navigate to sibling files or tags.
• ⌘ ⇧;– Focus on the end element of the navigation path but do not open. Use arrow keys to move through the path hierarchy.

Quick Tip: You can enter keywords in your navigation path to filter files, folders, and tags, and Use Geographic To focus.

Hide the Open Editor pane

This will always open the file in the TAB

  "explorer.openEditors.visible": 0
Copy the code

Customize the title bar

VS Code’s default title bar is not very helpful. It displays only the current file name and the project name. The optimization method is as follows:

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

• ${dirty}If the file is not saved after modification, a dot is displayed.
• ${activeEditorMedium}: The path of the current file relative to the workspace folder, for examplemyFolder/myFileFolder/myFile.txt)
• ${separator}: A conditional delimiter (“-“), displayed only when surrounded by a variable with a value or static text.
• ${rootName}: Workspace name (for example, “myFolder” or “myWorkspace”)

Here you can see all the options available for configuration.

Code thumbnail

Perhaps you know Sublime Text’s famous tool “code thumbnails”. It’s on by default, but it’s ugly:

Let’s optimize it.

First, use color blocks instead of reduced characters. Then, set the maximum number of horizontal columns, and finally, always display the “slider” so that you can see at a glance where the current code is in the file.

"editor.minimap.renderCharacters": false,
"editor.minimap.maxColumn": 200,
"editor.minimap.showSlider": "always"
Copy the code

The blank space

Maybe you want all characters to be visible:

"editor.renderWhitespace": "all"
Copy the code

Smooth scrolling

"editor.smoothScrolling": true
Copy the code

Optimized interpolator

Change the cursor animation from “blink” to “phase”, and there’s something strangely pleasant about that flickering animation:

"editor.cursorBlinking": "phase"
Copy the code

Make the cursor move with a small animation so our eyes can easily track it:

"editor.cursorSmoothCaretAnimation": true
Copy the code

Start another line at the end of the file

It is a convention to insert a blank line at the end of the file

"files.insertFinalNewline": true
Copy the code

Cut the trailing space

"files.trimTrailingWhitespace": true
Copy the code

telemetry

My personal preference is to disable uploading data (crash reports, usage data, errors) to Microsoft Online services:

"telemetry.enableCrashReporter": false
"telemetry.enableTelemetry": false,
Copy the code

In addition, natural language search is enabled by default, sending your keyboard actions to Bing as you search for Settings. If you want to turn this off as well, add the following configuration:

"workbench.settings.enableNaturalLanguageSearch": false
Copy the code

Copy file path

When it comes to code, it often helps to be able to point to a specific file. VS Code can provide absolute and relative paths to the active file with the Command palette ⌘ P, but it’s faster to set your own shortcuts.

Press the ⌘ K key combination followed by the ⌘ S to open the shortcut profile and add the following configuration information (or any combination you want) :

Copy relative path

{
	"key": "shift+cmd+c"."command": "copyRelativeFilePath"
}
Copy the code

Copy absolute path

{
	"key": "shift+alt+cmd+c"."command": "copyFilePath"
}
Copy the code

Hide the feedback smiley icon in the bottom status bar

"workbench.statusBar.feedback.visible": false
Copy the code

The plug-in

The rich plug-in ecology is one reason for VS Code’s popularity. Here’s a list of some really useful plugins:

• Settings Sync
• Babel JavaScript
• ESLint
• Path Intellisense
• vscode-styled-components
• GitLens — Git supercharged
• LintLens — ESLint rules made easier
• DotENV
• Guides
• Bracket Pair Colorizer
• ES7 React/Redux/GraphQL/React-Native snippets
• Advanced New File
• Duplicate action
• Color Highlight
• gitignore
• TODO Highlight
• Sort JSON objects
• EditorConfig for VS Code
• Image preview
• Markdown All in One
• Markdown Preview Github Styling
• Align
• HTML CSS Support
• Sort lines
• Toggle Quotes
• Version Lens
• Visual Studio IntelliCode – Preview
• VS Live Share
• Polacode

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.