Improve collaboration across teams with VSCode

Cover image for Improve collaboration across teams with VSCode
Photo by Yancy Min on Unsplash

VSCode is definitely one of the most popular code editors. In this post, we will be looking on how you can use VSCode to improve collaboration and consistency across team members.

The following can be applied to any project, regardless the language being used. The only assumption is that you are using VSCode, Git and maybe Docker.

EditorConfig

EditorConfig is not VSCode specific but helps maintaining consistent coding styles for multiple developers working on the same project across various editors and IDEs.

It is one of the easy wins but for some strange reason you will find this missing from many code repositories.

In short you can define various config styles like charset, end-of-line and indentation styles.

# Unix-style newlines with a newline ending every file
[*]
end_of_line = lf
insert_final_newline = true

# Matches multiple files with brace expansion notation
# Set default charset and indent style/size
[*.{js,json,php}]
charset = utf-8
indent_style = space
indent_size = 2

Check EditorConfig website and EditorConfig extension for more details.

VSCode allows you to define a list of recommended extensions under .vscode/extensions.json. Then developers will be prompted automatically to install these extensions.

Keep in mind that this is only a recommendation and the extensions will be installed only if the developers accept.

I find this very useful across large teams but also for on-boarding new team members.

While you can go crazy and add almost any extension possible here, it’s better to keep this to the absolute necessary extensions.

Check Workspace recommended extensions for more details.

Remote pair programming

VSCode Live Share is an excellent option for remote pair programming and collaboration in general. The process to setup it is fairly simple and straightforward.

Apart from installing the extension, you only need to press a button to share your workspace with other team members.

The remote party can view the same code as you, even if you haven’t pushed your changes yet. However, this happens from their own setup – which means both parties can use completely different VSCode Themes and Extensions without a problem!

Check Collaborate with Live Share for more details.

Development inside a Container

Containerized development environments are really useful to establish consistency and on-boarding new developers to the team. However, learning Docker can be cumbersome for some people. VSCode builds on top of this concept and goes a few steps further.

In particular:

  • You can spin off a container (or a set of containers) without leaving VSCode.
  • You can define various settings like which terminal shell to use by default, commands to run after the container is created.
  • You can also define the extensions, like described in the first section.

All the above go into devcontainer.json which is basically a config file that determines how your dev container gets built and started.

Check Development inside a Container for more details.

Conclusion

Throughout this post we went through a few ways where VSCode can be used to improve collaboration and consistency across the team.

Make sure to follow me on dev.toMedium or Twitter to read more about web development.

Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
Cover image for Deploy to AWS ECS with Github actions

Deploy to AWS ECS with Github actions 🚀

Next Post
Cover image for Access and update local files, from your browser!

Access and update local files, from your browser!

Related Posts