## How to Format Solidity Code in VS Code Working with raw, unformatted code is a significant drag on productivity. When your Solidity code appears as a monolithic block of white text, it becomes incredibly difficult to read, debug, and maintain. Distinguishing keywords from variables, functions from comments, and understanding the overall structure is a chore. This lesson will guide you through setting up your Visual Studio Code (VS Code) environment to automatically format and apply syntax highlighting to your Solidity files. By the end, you'll transform unreadable code into a clean, professional, and easily navigable format. ### The Power of VS Code Extensions The core of a powerful VS Code setup lies in its extension marketplace. For any programming language, extensions provide essential features like intelligent code completion, error checking (linting), and, most importantly for our purpose, syntax highlighting and code formatting. While there are several excellent extensions available for Solidity, this guide will focus on one that is robust and widely supported. **Popular Solidity Extensions:** * [Solidity by Nomic Foundation (Hardhat)](https://marketplace.visualstudio.com/items?itemName=NomicFoundation.hardhat-solidity): This is the extension we will install and configure. Despite its name, it works perfectly for any Solidity project, including those built with Foundry. Upon installation, it immediately provides rich syntax highlighting, coloring your code to make it instantly more readable. * [Solidity by Juan Blanco](https://marketplace.visualstudio.com/items?itemName=JuanBlanco.solidity): A long-standing and highly popular choice in the community. * [Solidity Visual Developer by tintinweb](https://marketplace.visualstudio.com/items?itemName=tintinweb.solidity-visual-auditor): Another powerful alternative with a strong feature set. To get started, open the Extensions view in VS Code (click the icon on the sidebar or press `Ctrl+Shift+X`), search for "Solidity by Nomic Foundation," and click "Install." You will see your `.sol` files immediately render with colors and highlighting. As a bonus tip, if you are working with Foundry, your project includes a `foundry.toml` configuration file. To get syntax highlighting for it, install the **Better TOML** extension. ### Important: Make sure you download the correct extension! Be sure to either: - Use the links from here - Use the links from the resources page - Or, verify that you're using the correct extensions There have been attacks where a malicious extension was uploaded to the marketplace with a similar name. Always double-check the publisher and the extension's description to ensure you're installing the right one. Here are two examples of such an attack: - [https://x.com/0xZodomo/status/1953993474468110550](https://x.com/0xZodomo/status/1953993474468110550) - [https://x.com/PatrickAlphaC/status/1955657679214608776](https://x.com/PatrickAlphaC/status/1955657679214608776) ### Configuring Your Default Formatter Installing an extension is the first step, but to enable automatic formatting, you must explicitly tell VS Code to use it as the default formatter for Solidity files. This is done in your user settings file. 1. Open the Command Palette using the shortcut `Cmd + Shift + P` (on macOS) or `Ctrl + Shift + P` (on Windows/Linux). 2. Type `settings json` and select **Preferences: Open User Settings (JSON)** from the dropdown menu. This will open your global `settings.json` file. 3. Add the following JSON snippet to the file. If the file already contains settings, add a comma after the last entry and paste this code. ```json { // ... your other settings may be here "[solidity]": { "editor.defaultFormatter": "NomicFoundation.hardhat-solidity" } } ``` Let's break down this configuration: * `"[solidity]"`: This is a language identifier. It instructs VS Code to apply the nested settings *only* to files recognized as Solidity files (i.e., those with a `.sol` extension). * `"editor.defaultFormatter"`: This property sets the default formatting tool for the specified language. * `"NomicFoundation.hardhat-solidity"`: This is the unique identifier for the Nomic Foundation extension you installed. After adding this code, remember to save the `settings.json` file. ### Automating Your Workflow with Format on Save The most efficient way to maintain clean code is to format it automatically every time you save. This removes the need to manually trigger the action and ensures your code is always well-structured. 1. Open the VS Code Settings UI. You can do this via the Command Palette (`Preferences: Open Settings (UI)`) or by clicking the gear icon in the bottom-left corner. 2. In the search bar at the top of the Settings page, type **`format on save`**. 3. Find the **Editor: Format On Save** option and check the box to enable it. With this setting active, simply pressing `Cmd + S` or `Ctrl + S` on a Solidity file will now perform two actions: it will save the file's contents and immediately run the Nomic Foundation formatter, cleaning up indentation, spacing, and alignment. ### Manual Control and Troubleshooting Tips While automation is powerful, there are times you may need more granular control over formatting. * **Saving Your Work:** Always ensure your files are saved. In VS Code, an unsaved file is indicated by a white dot next to its name in the tab bar. Formatting and other features often rely on the saved state of a file. * **Manual Formatting:** If you prefer not to use "Format on Save," you can format a document at any time. Open the Command Palette (`Cmd/Ctrl + Shift + P`) and run the **Format Document** command. * **Saving Without Formatting:** On rare occasions, you may want to save a file in its current, unformatted state. To do this, use the Command Palette to run the **File: Save without Formatting** command. * **Troubleshooting:** If formatting isn't working, the first thing to check is your `settings.json` file. A typo in the extension identifier (`NomicFoundation.hardhat-solidity`) or a missing comma can break the configuration. Ensure the correct default formatter is set for the `[solidity]` language identifier. If you're still stuck, searching online or asking in developer communities can provide a quick solution.