How VSCode Became the Ultimate Editor for Web Developers

You can find the Chinese version at 新一代的編輯器 — VSCode.

There is a proverb that says, "If a workman wishes to do a good job, he must first sharpen his tools." For programmers, having a useful editor is crucial. Since many of my friends have asked me about which editor to choose, I'm writing this article to explain why I prefer to use VSCode.

Ten reasons why I think VSCode is very powerful

1. Color Picker

When you have the color code, but don't know what the color looks like, or if you want to pick a suitable color but don't know where to find the palette, you can use the built-in Color Picker in VSCode.

Color Picker

2. Git Integration

Still using git diff command to view changes?

Git1

You can view them directly with better UI in VSCode.

Git2

3. Built-in Emmet

VSCode has a built-in Emmet feature that speeds up writing HTML. and makes you look more like a professional developer!

Emmet Expansion

4. Quickly jump to the file you are looking for in just a moment

Press <Cmd/Ctrl> + P to quickly jump to the file with a given filename.

Jump to file by filename

Use Cmd/Ctrl + Click to navigate to the imported script.

Jump to file by reference

5. Create your own Code Snippets

Write code more efficiently with handy code snippets like this.setState() in React.

Custom code snippet

6. Distinctive icons

There are different icons for different kinds of files, which making it easy to distinguish files in a glimpse.

Icon

7. Powerful Intellisense

VSCode provides information on the parameter name, and type, which is very useful!

show property name

show parameter name

8. Multi Cursor

The multi-cursor feature allows you to edit multiple places at the same time.

multi cursor editting

9. Auto Formatting

You don't have to worry about the formatting and indentation because VSCode will do it automatically for you. If your team has a style guide, you can also do the formatting with ESLint.

Auto Formatting

10. Debug

VSCode allows you to set breakpoints while debugging, which makes it easier to see the call stack and check the value of variables.

breakpoint

Mature Community

Along with its powerful built-in features, VSCode also has a mature developer community, with many free plugins and themes. Additionally, VSCode receives frequent updates.

extensions

Compare with other editors

Vim

I used Vim for a long time before discovering VSCode. While Vim allows extensive customization, its steep learning curve and numerous shortcuts can be challenging. Nevertheless, Vim is still a good editor and its seamless integration with tmux provide a smooth development experience.

To get the best of both worlds, I now use the Vim extension for VSCode.

Sublime

I only used Sublime for a short time. What I liked about it was the convenience of its package manager and fast startup time. However, it had some drawbacks such as the low update frequency and not being open-sourced. This means that developers can't fix bugs by submitting PRs.

If you're using Sublime and want to try out VSCode, you can consider using the Sublime Keymap extension. Although I haven't used it yet, the reviews are pretty positive.

If you're still hesitating about whether to use VSCode, I highly recommend it. In my opinion, it's the most successful product that Microsoft released.

Microsoft love Linux

If you think some awesome features aren't mentioned here, please feel free to comment and I'll add them to the post!

How VSCode Became the Ultimate Editor for Web Developers

Comments

More from this blog

Why 0.1 + 0.2 ≠ 0.3: A Deep Dive into IEEE 754 and Floating-Point Arithmetic

Maximizing Rust Vector Efficiency: Why Initial Capacity Tricks Work

Divide and Conquer: Parallel Computing with Goroutines in Golang

Concurrency in Go: Race Conditions and their Solutions

Sustain Your Data: A Practical Guide to Using Docker Volumes