in SharePoint, SPFx, VS Code

Working with Visual Studio Code and SharePoint Framework Projects

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.

code .
vscode-open-spfx-project

Open SPFx project from the command line

Integrated terminal

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.

VS Code Integrated Terminal

VS Code Integrated Terminal

Intellisense

What is coding without intellisense! Fear not, VS Code supports intellisense and just works fine within your SPFx project as well.

VS Code Intellisense

VS Code Intellisense

Intellisense also works with importing SPFx modules.

VS Code Intellisense for SPFx Modules

VS Code Intellisense for SPFx Modules

Peek definitions

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!

VS Code Peek Definition

VS Code Peek Definition

With features like parameter hints, bracket matching and other smart code navigations you will feel home with VS Code!

Problems window

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 Problems Window

VS Code Problems Window

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.

VS Code Manage Extensions

VS Code Manage Extensions

Code snippets

VS Code has tons of extensions and one of the categories is code snippets. Code snippets are extremely useful to simplify the mundane tasks like creating a react component or inserting divs etc.,

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.

VS Code Snippets

VS Code Snippets

Git integration

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!

VS Code Git Integration

VS Code Git Integration

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.

VS Code Find and Replace

VS Code Find and Replace

Split editors

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 Split Editor

VS Code Split Editor

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

VS Code Themes

VS Code Themes

Write a Comment

Comment

Time limit is exhausted. Please reload the CAPTCHA.