One of the benefits of SharePoint Framework (SPFx) is that you can use any code editor of your choice. I love the simplicity of Visual Studio (VS) Code and use it for my SPFx development. And best of all, VS Code is available for Windows, Mac and Linux.
For many SharePoint developers, VS Code is a new addition to their toolbox and thought to share some of the cool VS Code tips and tricks that will help boost your SPFx development.
VS Code also has great documentation that I would encourage you to read, especially if you are new to the code editor.
I will update this post with tips and tricks as I use them, but here are some to start with.
Open SPFx project folder
You can directly open your SPFx project in VS Code. You can always use the File->Open and then open the project folder, or if you are already on a console, then you can just type the following to open the project. VS Code supports launching from the command line which is very handy and works in all platforms.
SPFx makes use of command line tools for project creation and other tasks – build, debug, package and deployment. VS Code comes with an integrated terminal that opens the root of your project folder without leaving VS Code. You can then type the gulp commands right in this integrated terminal instead of a separate console window.
What is coding without intellisense! Fear not, VS Code supports intellisense and just works fine within your SPFx project as well.
Intellisense also works with importing SPFx modules.
Sometimes you might want to take a peek at the base class or referenced class information. You can always browse to that file location, but you can use the peek definition option to open an integrated window right in the editor without leaving your file that you are editing. You can also search for things in that window – how cool is that without switching contexts!
We are humans. We make mistakes. It is OK.
The editor shows the problems in your code using the red squiggly lines where when you hover it also shows you the error message. While that is certainly helpful, VS Code also has a problems window built right into the editor where you can view all of the problems in one place.
VS Code Extensions
Whats a code editor without extensions! VS Code supports extensions and there are tons that you can download and install from the VS Code Marketplace.
You can access your extensions from the sidebar by clicking the Extensions icon. You can then browse, search and manage your extensions in the Extensions window.
I use code snippets for many things in VS Code and here is an example of me using the react typescript code snippet that inserts the code of a react component in typescript.
There isn’t much to say here other than VS Code has integrated Git support. That said, one catch here is that VS Code just leverages the Git installed in your box.
You can access this Git integration just from Sidebar by clicking on the Git icon.
A word of caution though: You need to be fluent in git commands!
Find and Replace
I love the find and replace feature in VS Code. Its fast, reliable and extremely powerful! Within few clicks, you are not only able to find all instances where the word(s) live, but also quickly replace them.
Yep, VS Code support split editors! You can have split windows of the editor and compare two files without switching contexts. You just click the split editor icon on the top right in your editor to get this functionality.
VS Code Themes
VS Code supports theme for file icons (in the explorer) and the editor itself. While it is fun to switch themes, I find it extremely useful to switch to a theme depending on my mood. You can browse and install many themes available in the marketplace and then access them from the menu: Code->Preferences