Why You Should Share VS Code Workspace Settings with Your Team

Setting norms for developer tasks on a team project is important for maintaining your code’s consistency and readability. Luckily, Visual Studio Code allows for distinct user and workspace settings. That way, you can maintain some custom user settings while still adhering to the workspace settings of your team’s project all within one project.

Case Study

In our current Laravel/React project, we needed to enforce formatting for multiple languages. To prevent unnecessary reminders in pull requests about formatting, we are enforcing certain formatting and linting rules within the workspace by using eslint and prettier configurations.

Here are some examples of some eslint settings we use:

 "eslint.options": {
        "configFile": ".eslintrc.json"
    },
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "file", 

How To Share These Settings

To share your workspace settings with your team, first you should create a.vscodefolder in the root of your project. Within the folder, add the following files: settings.json and extensions.json.

Visual Studio Code automatically recognizes this folder as a shared workspace folder. Any properties added or changed in the settings file change the workspace settings, not the user settings.

The settings.json file syncs with the user interface view of the workspace settings. So, any changes you make to the workspace settings view in the UI update the JSON file with its corresponding property.

Versioning The Folder

Next, it’s important to ensure that the VS Code folder gets tracked with version control. Double-check your gitignore file to ensure it is pushed to the repository correctly.

Recommending Extensions

The extensions.json file allows you to set recommended extensions for your workspace. The following is a sample of the list of recommended extensions:

"recommendations": [
        "esbenp.prettier-vscode",
    ] 

The naming convention for adding one in the list is${publisher}.${name}.

Saving Time with Shared Settings

Adding a workspace folder to your Visual Studio Code project can ensure that your team wastes less time resolving linting and formatting issues due to mismatched settings. Automate this away by taking advantage of the shared workspace in VS Code.