Efficiency of Movement

I like using Prettier to format my files, and I appreciate that it offers granular configuration options for different file types in web development. If you’ve used Prettier before, you know how much time and effort it saves. While most IDEs and editors come with some form of built-in code formatting, I prefer a configuration file in my project. This approach allows me to share settings easily with others and maintain consistency across different computers.

Below is my configuration, which I have placed in the .prettierrc file at the root of my project. I’ve instructed my IDE to use these settings when reformatting. As a result, I no longer encounter those annoying and frustrating git changes that occur when my editor updates a single line of code.

Since I use Next.js, and that project contains SCSS and JavaScript files, I need to update my Prettier configuration for the different file types. Here is my configuration for .js and .scss files. If you need more file types with their own configs, you add more objects to the “overrides” array.

{
  "singleQuote": true,
  "endOfLine": "auto",
  "tabWidth": 2,
  "overrides": [
    {
      "files": ["**/*.{scss}", "styles/**/*.scss"],
      "options": {
        "tabWidth": 4,
        "useTabs": true,
      }
    }
  ]
}

I’ve written about other workflow tips, so check the Efficiency of Movement blog regularly.

Prettier Configuration For Different File Types