Visual Studio Code (VS Code) is a powerful and versatile code editor, widely used by developers for various programming languages, including HTML, CSS, and JavaScript. While it offers helpful features, some developers might find certain auto-completions intrusive or unnecessary. In this blog post, we will focus on one specific annoyance for CSS developers – the automatic insertion of semicolons after CSS properties – and explore how to disable this feature in VS Code.

Disabling Auto Semicolon in Visual Studio Code:

VS Code’s auto semicolon feature can be particularly bothersome for those who prefer not to have semicolons automatically added at the end of CSS properties. Fortunately, there are a couple of ways to disable this feature.

Option 1: Through the Visual Studio Code UI

1. Open Visual Studio Code.
2. Navigate to “Settings” by clicking on the gear icon in the bottom left corner or by pressing Ctrl + ,.
3. Click on “Extensions” in the sidebar.
4. Scroll down and find the “CSS” extension.
5. Look for the option labeled “Complete Property With Semicolon” and uncheck it.

Option 2: Using the Settings Editor

1. Open the Settings editor by pressing Ctrl + , and clicking on the open settings icon in the top right corner.
2. In the search bar, type “Complete Property With Semicolon” to quickly locate the relevant setting.
3. Change the value from true to false.

// Insert semicolon at the end of the line when completing CSS properties
"scss.completion.completePropertyWithSemicolon": false,

Exploring the Configuration File:

For those who prefer a more hands-on approach or want to document these changes in a configuration file, it’s possible to modify the settings.json file directly. This file holds various configurations for VS Code.

1. Open the command palette by pressing Ctrl + Shift + P and type “Preferences: Open Settings (JSON)”.
2. Add or modify the following configuration to disable the auto semicolon feature:

// Insert semicolon at the end of the line when completing CSS properties
"scss.completion.completePropertyWithSemicolon": false,

By following these simple steps, you can regain control over the auto semicolon feature in Visual Studio Code for CSS. Whether you choose to disable it through the UI or directly edit the configuration file, the flexibility of VS Code allows developers to customize their coding environment to suit their preferences. Happy coding!