Don't (.git)ignore .vscode

Have you ever reviewed a PR that has formatting changes?

That could happen because developer tend to have their configurations and settings or don't use the linting and formatting command and simply skip the pre-commit 🫠

Let's say your team uses VS Code as their editor.
What if you could use the .vscode folder to share repository settings? You can put settings, configuration, and recommended extensions inside .vscode and share them with your colleagues. This ensures that everyone is on the same page, reducing the chances of errors and inconsistencies. However, I have noticed that some people delete the .vscode folder or put it into the .gitignore.

But with that, you are missing out on its capabilities to streamline settings and even increase productivity by enabling formatting and linting.
So, please Don't (.git)ignore the vscode 🙅‍♂️
Let's explore together how to utilize its features to take your development to the next level.

Understanding the Importance of Configuration

To create a consistent configuration, you can create a settings.json file in your VS Code folder. This file allows you to define settings for your project, such as the formatting style, compiler version, and default formatter. By sharing this file with your team, you can ensure everyone is working with the same configuration.

{
    'editor.formatOnSave': true,
    'typescript.tsdk': './node_modules/typescript/lib',
    '[typescript]': {
        'editor.defaultFormatter': 'biomejs.biome'
    },
    'eslint.format.enable': false,
    'typescript.format.enable': false,
    'prettier.enable': false
}

• editor.formatOnSave: true - allows formatting whenever you hit the save button
• typescript.tsdk - ensures using the correct compiler version
• editor.defaultFormatter - allows changing the formatter. You can have individual formatter by programming languages. Above we define a formatter for Typescript- files.
• eslint.format.enable: false - ensures that ESLint is disabled because, in my case, BiomeJS is able to do it. Otherwise, you may have conflicting linting errors
• typescript.format.enable: false - disable the VS Code in-built formatter. It could conflict with the default formatter
• prettier.enable: false - same as above

Recommending Extensions

VS Code allows you to recommend extensions to new users or team members. By adding an extensions.json file to your VS Code folder, you can specify the extensions that are required for your project. This ensures that new users have the necessary tools to work on the project efficiently.

{
  'recommendations': [
    'biomejs.biome'
  ]
}

Code Snippets

Code snippets are a powerful feature in VS Code that allows you to scaffold code quickly. By creating custom snippets, you can generate boilerplate code for your project, reducing the time and effort required to write code. However, the syntax for defining is quite complicated. That is why I would recommend to use the snippet generator tool which helps you create snippets quickly and efficiently.

{
  'Creates a simple Snippet': {
    'prefix': 'snippet',
    'description': 'Creates a simple Snippet',
    'body': [
      'import { http, type Request, type Response } from '@google-cloud/functions-framework';',
      '',
      'export const $0 = async ( req: Request, res: Response ) => {',
      '  const result = { result: 'This is gonna be the result for Handler: $0'}'
      '  res.send(',
      '    JSON.stringify( {',
      '      result,',
      '    } ),',
      '  );',
      '};'
    ]
  }
}

• prefix - the shortcut that appears in the autocompletion box
• description - the description of the snippet
• body- the code which will be generated or scaffolded
• $0- where the cursor will land. You can add multiple variables by $1, $2 etc. you change the variables by tabbing.

Launching a Fully Fledged IDE

VS Code can be turned into a fully-fledged IDE by using the launch.json file. This file allows you to define configurations for your project, including the executable, working directory, and runtime arguments. By using the launch.json file, you can create a customized development environment that suits your needs.

For example, when you have a Monorepo you can turn on a debugger for the backend and frontend.

{
    'configurations': [
        {
            'type': 'node',
            'name': 'Run Backend',
            'cwd': '${workspaceFolder}/packages/backend',
            'request': 'launch',
            'runtimeExecutable': 'bun',
            'runtimeArgs': [
                'dev'
            ],
            'console': 'integratedTerminal'
        },
        {
          'type': 'expo',
          'request': 'attach',
          'name': 'Debug Expo app',
          'projectRoot': '${workspaceFolder}/packages/app',
          'bundlerPort': '8081',
          'bundlerHost': '127.0.0.1'
        }
    ]
}

• type - Where the debugger should be running
• request - either attach for attaching it to a running instance e.g. you turn on the development server and want to attach the debugger to it, or launch where you create a new instance
• name - the name will be reflected in the Run and Debug tab
• cwd or projectRoot- change working directory if your script is located in a different folder
• runtimeExecutable - for running a binary
• runtimeArgs - the arguments that the binary is using
• console - where you want to log the logs. VS Code is giving you suggestions
• if attach, bundlerPort - the port where the current instance is running
• if attach, bundlerHost - the url where the current instance is running (usually, localhost)

Conclusion

In conclusion, VS Code is a powerful tool that can help you streamline your development process, improve code quality, and increase productivity. You can take your development to the next level by configuring your editor like a pro. Don't ignore the power of VS Code; instead, harness its features to create a customized development environment that suits your needs ⭐