VSCode Tips and Configurations for Frontend Development

Appetizer

When using VSCode, selecting text often stops at characters like hyphens because VSCode treats them as word separators. You can customize the - and other separator characters via the editor.wordSeparators setting.

{
  // Characters considered as separators by VSCode
  // Search for "editor.wordSeparators" in settings and remove unwanted ones
  // Example: delete '@' to select less variables and decorators like @xxx
  "editor.wordSeparators": "`~#!@$%^&*()-=+[{]}\\|;:'\",<>/?.",
}

I couldn't find a similar setting in WebStorm; any tips are welcome.

A Not‑So‑Beautiful Encounter with VSCode

After using JetBrains IDEs like Eclipse and WebStorm, I switched to VSCode for its free availability, despite some initial resistance and a heated discussion with my mentor.

General Tips

Quick File Path Navigation

Strings containing file paths can be opened with cmd+e (or ctrl+e on Windows) after installing the quick‑go‑to‑selected‑file‑path extension.

Faster and Clearer Logging

Create a custom snippet for console logging:

"log打印": {
  "prefix": "clog",
  "body": ["console.log('[ $CLIPBOARD ] >', $CLIPBOARD)$0"],
  "description": "log打印",
  "scope": "typescript,typescriptreact,javascript,javascriptreact"
},

Alternatively, install a console‑log extension such as Turbo Console Log .

Clear Code Highlighting

VSCode uses colors and styles to differentiate read‑only properties, enums, async methods, etc., making code easier to read.

Better Explorer UI

Hide unwanted tabs in the Explorer or drag frequently used GitLens tabs for a cleaner view.

Folder Hierarchy Clarity

Disable compact folder display to see each folder level:

"explorer.compactFolders": false

Open Non‑Project Files Quickly

Use the code command to open configuration files or hosts files directly from the terminal.

Auto‑Copy Terminal Selection

"terminal.integrated.copyOnSelection": true

Disable Drag‑And‑Drop Text Movement

// Set to false to prevent accidental dragging
"editor.dragAndDrop": false

Code Intelligence and Navigation

package.json Version Insight

Hover over a dependency to see the exact installed version, even for transitive dependencies.

Vue

Property and Method Suggestions

VSCode provides accurate suggestions and navigation for Vue components.

CSS Class Name Suggestions

Class names are auto‑completed and clickable for quick navigation.

Vuex Navigation

Jump directly to Vuex store definitions.

File Path Suggestions

File paths in strings are suggested and navigable.

React

Similar support exists for React, including CSS class name completion.

JSX Attribute Completion Style

"javascript.preferences.jsxAttributeCompletionStyle": "braces",
"typescript.preferences.jsxAttributeCompletionStyle": "braces"

This makes VSCode treat className and other attributes as JSX expressions by default.

Conclusion

After using WebStorm for over two years, I found that VSCode dramatically improves development efficiency with its powerful code suggestions, search, and navigation features, making it my preferred editor for frontend work.

Feel free to leave comments with any pain points; I’ll try to address them.