Delight Your VSCode Experience by Auto-formatting (Python, Javascript, Rust)

Motivation

When I was in a data science role, I didn’t give much attention to tools for code formatting. Ever since I transitted to a software engineer, I started appreciating the value of these tools. I find it even handy to automate them in an IDE.

The benefits are more than just saving time:

It saves you cognitive workload from manual code formatting, hence you can focus on things that are more important
It enforces uniform coding style with your teammates. Your team observes to the same coding style for free once they share the same configuration of a formatter.

I will share how I personally install and configure formatters in my VSCode, so that it can be automatically triggered when saving a script in Python, Javascript (Typescript) or Rust.

It’s just a few simple steps, but your experience will never be the same! Now I cannot part without auto-formatting in my daily coding routine.

Note: You may wonder the differences between Linter and Formatter. Linter flags bugs and violation of best practices, while Formatter enforces a coding style on your code. Best practices could be related to code style, so formatter could help address a small part of best practices. I may open a separate blogpost about Linters in the future.

Python

Install Black Formatter in Extension Marketplace (shortcut is Command + Shift + X in Macbook)
Open a project in VSCode, navigate to “User Settings” (shortcut is Command + , in Macbook), then “Workspace” tab, then “Open Settings (JSON)” button, as shown in the screenshot. Now you are in the editing page of settings.json, which configures VSCode’s functionalities specific to your project.

Paste the following code snippet in settings.json:

 {
     "[python]": {
         "editor.defaultFormatter": "ms-python.black-formatter",
         "editor.formatOnSave": true
     }
 }

Optional: Make a new file named pyproject.toml in your project folder. It customises the formatting rules for Black Formatter. For example, if I want the number of characters per line to be no more than 80, I can paste the following snippet in the file:
```
 [tool.black]
 line-length = 80
```

Voila! Auto-formatting is ready to run for Python script! 🔥

Here is a short demo of how it behaves when I save a Python file:

Screen Recording 2022-07-30 at 3.07.44 PM.mov

Note: Besides Black Formatter, there are other Python formatters available in Extension Market. For example, Isort for importing sorting. Alternatively, these formatters comes as a package, so that you can apply them in command line. For example, Black Formatter is making use of Black package underneath the hood. Flake8 is another package for code formatting but it doesn’t have an extension in VSCode. Feel free to explore them on your own!

Javascript (or Typescript)

Install Prettier - Code formatter in Extension Marketplace

Navigate to the editing page of settings.json and paste the following code snippet:

 {
     "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true
     },
     "[typescript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode",
         "editor.formatOnSave": true
     }
 }

Optional: Make a new file named prettierrc.json in your project folder. It customises the formatting rules for Prettier. For example, if I want to enforce rules like single quote in string and double spaces in tab, I can paste the following snippet into the file:
```
 {
     "singleQuote": true,
     "trailingComma": "all",
     "printWidth": 100,
     "tabWidth": 2,
     "useTabs": false
 }
```

Now auto-formatting is ready for Javacsript! Here is a demo:

Screen Recording 2022-07-30 at 3.51.57 PM.mov

Rust

Install rust-analyzer in Extension Marketplace (Rust analyzer is not just a formatter. It supports many features such as error popup, datatype detection)

Navigate to the editing page of settings.json and paste the following code snippet:

 {
     "[rust]": {
         "editor.defaultFormatter": "rust-lang.rust-analyzer",
         "editor.formatOnSave": true
     }
 }

Optional: Customising rules in rust-analyzer requires more effort, you can refer to this documentation for details. Its default setting suffices in most use cases.

Here is the final demo to showcase the auto-formatting in Rust script:

Screen Recording 2022-07-30 at 3.51.57 PM.mov

Conclusion

In this post, I have shown you:

how to install different formatters in VSCode Extension Marketplace
how to customise your formatters with its configuration file
how to configure the formatter to be applied upon file saving in VSCode

You can further explore the functionalities of each formatters and its integration with VSCode.

As an advanced setup, you can even apply multiple formatters on a script upong saving (e.g. applying Black, Flake8 and Isort formatters all in once). If there are enough of readers interested in this trick, I could write an additional blogpost for that!

Motivation

Python

Javascript (or Typescript)

Rust

Conclusion

References