Sharing VS Code extensions across teams

#vscode #reactnative #javascript #storybook

Let's say you have a big monorepo (not unusual at all in these days) and that you have 20+ developers working on it and you have many tools to improve the quality of the written code.
How do you keep the developer experience at the top?

This is one of the many challenges we face at Musixmatch in our front-end codebase.

We're aware of several generic ways in which companies can provide a cohesive environment to work on. There is Vagrant, but also cloud development solutions with workspaces that provide you with stuff already configured for you.

But what about something more specific to the editor/IDE in use? What if there was a way to inform the developers that a certain project requires certain extensions and settings?

We use Visual Studio Code and we believe it's important for the developers to be on common ground when talking about the software we use to write code, and there is a way.

The .vscode folder

Visual Studio Code has both a user configuration and a workspace one that can be found inside the project, within a ".vscode" folder that contains all the necessary json files to properly configure the editor.

The overall configuration of Visual Studio Code will be a merge of the configuration inside the developer computer and the one inside the project.

Can we do the same but for extensions and not just settings?

The extensions.json file

Just the other day I was investigating why we were encountering many difficulties in writing stories with Storybook for our React Native internal design system (called Ritmo).

We're used to writing our stories in MDX because we found it to be more declarative than javascript. Sadly, though, there is no straightforward support from linters and syntax highlighters over MDX files*.

Thanks to the following VS Code extension and the related eslint plugin, we enabled linting and syntax highlighting also inside MDX files.

So, Visual Studio Code has a way to request users working on a project, that contains a .vscode/extensions.json file, to install certain extensions. Here is an example:

MDX stands for "Markdown JSX", it's an extension of the more classical MD format that allows writing JSX (e.g. using React components) inside markdown files.

I find this to be a little useful gem, also I'd love to see this approach used within open source projects.

What do you use instead to keep your projects synced and well organized between your devs?