Editors – Make Your Selection
Enough Talk, Let's get Started
First thing to do is download VS Code for your given OS platform. After opening the Editor and getting comfortable with the various screens, you'll notice one of the main views is the Extensions tab. This is where the rubber meets the road, as these extensions really enhance the capabilities and productivity you'll realize using VS Code.
Let's Talk Extensions
OK, not quite, if you browse the list you will notice there are A LOT. I'm going to review some popular ones that are applicable to contributing to the Gatsby.js GitHub repo.
🚨 Code linting and Formatting 🚨
The main Gatsby GitHub repo has configuration files in place already for ESLint and Prettier. VS Code has extensions for both of these, which makes development really easy.
To get started, go to the Extensions View and search for these plugins and press the green Install button for each. You may have to restart for the Extensions to take effect.
Now as you view, create, and modify files ESLint will display "squiggles" for warnings and errors in your files according to the existing rules already configured. You can correct any issues as you go.
For Prettier, you have two options. You can run the Format manually, by bringing up the Command Palette
CMD + Shift + P (
Ctrl + Shift + P on Windows), then selecting
Format Document. This will format the currently open File.
The other option is to configure Prettier to Format on Save. You can enable the setting
editor.formatOnSave by editing the Preferences and applying this at the User, Workspace, or Folder level.
Other Fun Plugins
Of course once you start browsing the Extensions Marketplace you'll want to install additional plugins. Here is a short-list of must-have plugins you should consider installing.
You can take a look at my "dotfiles" GitHub for a README on the VS Code Extensions I am using along with editor settings.
🚀 Debugging in Chrome 🚀
VS Code has a built-in debugger to enable proper runtime debugging, if you want to move past the
console.log throughout your code. Use the following steps to be up and (debugging) in minutes.
- Install the Debugger for Chrome Extension for VS Code.
- In the Debug view, click the Debug Dropdown in the Panel and select the option
Add Config (projectname). This will create a
launch.jsonfile in your
.vscodesubfolder in the given project. Add the following to this file.
NOTE: You most likely will want to add the
.vscode folder to your
.gitignore file so it is not checked into source.
You may want to browse through the VS Code Updates page to see some of the recent features added. You'll notice they publish major updates monthly. It seems they are listening to the user community and continually adding features to the Editor and improvements to the user experience.
A great way to contribute is to browse the open issues on GitHub, and find some that look interesting! Armed with some of the techniques I've shown here today, authoring these fixes, features, and more will be a breeze thanks to some of the great features of VS Code.
Do you use an Extension that I missed in this tutorial? Send a message to @mikelax on Twitter to let me know.