Improve collaboration across teams with VSCode
Tags: webdev, vscode, github
Published: 2021-11-27 11:18:41

---
title: Improve collaboration across teams with VSCode
published: true
description: Use VSCode to improve collaboration and consistency across team members
tags: #webdev #vscode #webdev #github
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cg68zykb1mht0estsqj5.png
canonical_url: https://softius.net/improve-collaboration-across-teams-with-vscode/
---

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](https://editorconfig.org/) and [EditorConfig extension](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) for more details.

## Workspace recommended extensions

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](https://code.visualstudio.com/docs/editor/extension-marketplace#_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](https://code.visualstudio.com/learn/collaboration/live-share) for more details.

## Developer with Docker

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](https://code.visualstudio.com/docs/remote/containers) 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.to](https://dev.to/iacons), [Medium](https://medium.com/@softius) or [Twitter](https://twitter.com/iacons) to read more about web development.