More Professional Use of VS Code

With just a few tweaks, VS Code can become even better to use.

Optimizing the File Tree

First, solve the problem of unclear default indentation relationships in VS Code.

You can make your file tree clearer and more organized with just a few lines of configuration!

1. Open VS Code

2. Open the Command Palette (shortcut: Ctrl+Shift+P)

3. Type Preferences: Open Settings (JSON) and press Enter

4. Add the following configuration in the opened settings.json file

{
  "workbench.tree.indent": 15,
  "workbench.tree.renderIndentGuides": "always",
  "workbench.colorCustomizations": {
    "tree.indentGuidesStroke": "#05ef3c"
  }
}

More evident hierarchical relationships and indentation guides

Font: Fira Code

I recommend using Fira Code.

This font makes abstract symbol stacks more pleasing and intuitive. For example, arrows are no longer a concatenation of two symbols =>, but a real ➡️.

The project README has a Chinese version and explains font installation methods for various operating systems.

Remove ESLint & Prettier

Switch to Biome, because it's written in Rust, dozens of times faster than ESLint + Prettier, offers a great zero-configuration experience, and has full out-of-the-box TS/JSX support.

It's recommended to use it directly for new projects.

For old projects, unless you have a large number of custom lint rules, it's also recommended to gradually migrate.

Themes

Four recommended themes

1. One Dark Pro, a beautiful dark theme.

2. Dracula Official, a dark theme suitable for developers who like dark color schemes. Fonts are more prominent.

3. GitHub Theme, a theme for GitHub fans.

4. Material Icon Theme, a beautiful icon theme