VS Code vs Spacemacs for TypeScript Development

I have been using Spacemacs as my go-to editor for around two years, and I use it on every project I can. After being assigned to a TypeScript project, I discovered Spacemacs support for TypeScript was lacking compared to Visual Studio Code. I grudgingly accepted that VS Code provided a better development experience and adopted it as my editor for this project. While I grew comfortable with VS Code, I never felt at home using it.

When I was put on another TypeScript project, I wanted to give Spacemacs another shot. No development had been made on the master branch of the Emacs distribution, but the develop branch was full of new commits. I checked out the branch and was impressed with how much improvement had been made. Most of the features that made me transition to VS Code were now implemented in Spacemacs!

VS Code and Spacemacs both have similar functionality when it comes to TypeScript development, but in this post, I’m going to focus on the differences between the two editors.

Finding References

In VS Code, you can search for references of a variable by hovering over a variable and typing Shift+F12. This brings up a large popup with every reference to that variable in your project.

Spacemacs will do the same when you hover over a variable and type , g u. This opens a separate window with every reference to that variable. I prefer the way Spacemacs handles this since it doesn’t intrude in the middle of my code.

Type Checking On Hover

VS Code and Spacemacs both let you view the type of a variable or the structure of a type. In VS Code, you have to hover your mouse over the symbol to view this information, but when you hover, a popup window comes up and blocks the view of your code. This has proved frustrating when I’m editing.

Spacemacs handles this better, in my opinion. In Spacemacs, you can hover your cursor over the symbol, and it will show the type at the bottom of the editor. If you’re someone who likes to keep their hands on the keyboard, this is a huge plus. I also prefer the non-intrusive way Spacemacs shows the type.

Using Go to Definition

Both editors allow you to go to the definition of a variable. In VS Code, this is handled by holding down Command while clicking on the variable, or pressing gd if you have the Vim plugin.

In Spacemacs, you can press gd or type gd. When Go to Definition works on Spacemacs, it’s great! But there are times when it is flaky. I haven’t found the cause of this yet, but VS Code’s handling of Go to Definition works more consistently without any fiddling.

Driving on Develop

Some people may be uncomfortable driving on the development branch of an open-source project. This is understandable. However, in this case I feel more comfortable on the development branch.

A commit hasn’t been made to the master branch in four months, so if something is broken, a fix isn’t likely to come soon. Also, I can always roll back to an earlier commit or switch back to VS Code, if a breaking change is made.

Conclusion

I have been using Spacemacs on my current TypeScript project and loving it! There are a few snags every once in a while that make me think about switching back to VS Code, but overall, I feel at home using Spacemacs.