Customizing JavaScript Import Sorting in VSCode Using Prettier (and Regex)

Introduction

In a team with many developers, dealing with disorganized imports can become a challenging issue. In collaborative software development environments, where effective teamwork and code consistency hold utmost importance, maintaining well-organized and structured import statements becomes a fundamental requirement. This plays a pivotal role in ensuring a smooth development process and the creation of high-quality code.

Getting Started

Installing Dependencies

npm i prettier @trivago/prettier-plugin-sort-imports -D

Before moving forward, it is imperative to install the necessary dependencies:

• prettier
• @trivago/prettier-plugin-sort-imports: By incorporating this package, we gain the capability to leverage Prettier for not only code formatting but also the systematic arrangement of import statements. This, in turn, significantly enhances the codebase's navigability and simplifies the task of maintenance.

Defining prettier Rules

Now, let's integrate the new rules into our .prettierrc file:

// .prettierrc
{
    // rest of prettier configuration
    "plugins": ["@trivago/prettier-plugin-sort-imports"],
    "importOrder": ["^[react]", "^@(?!/)", "^@/", "^[./]"],
    "importOrderSeparation": true,
    "importOrderSortSpecifiers": true
}

With these rules in place, our import statements will be sorted as follows:

1) All dependencies containing 'react' in their name:

import React from 'react'
import { Link } from "react-router-dom";

2) All dependencies commencing with '@', except those immediately followed by a '/':

import { Container } from '@some-ui-library'

3) All dependencies starting with '@/':

import ExampleComponent from '@/components/ExampleComponent'

4) All dependencies starting with './':

import MyStyledComponent from './MyStyledComponent'

Setting Up Workspace Preferences

Now, let's create the .vscode/settings.json file to establish workspace-specific preferences. This approach ensures that our settings do not affect other projects:

// .vscode/settings.json
{
   // rest of settings
   "editor.formatOnSave": true,
}

Writing Code

At this point, we can focus solely on writing our code, perhaps using auto-import functionality.

import React from 'react'
import MyStyledComponent from './MyStyledComponent'
import { Container } from '@chakra-ui/react'
import { Link } from "react-router-dom"

// Our fantastic component

Saving Our Work

Upon saving, Prettier will automatically organize our imports:

import React from 'react'
import { Link } from 'react-router-dom'

import { Container } from '@chakra-ui/react'

import MyStyledComponent from './MyStyledComponent'

// Our fantastic component

Conclusion

In conclusion, keeping import statements well-organized is very important when working with a team of developers, especially in collaborative software development. It helps ensure that everyone can work together effectively and that the code is consistent and of good quality. Tools like prettier and @trivago/prettier-plugin-sort-imports not only help us format our code nicely but also arrange import statements in an orderly way, making it easier to understand and maintain our code. This approach makes our work smoother, allowing us to focus on our main development tasks and enabling us to create high-quality software that follows good practices and can adapt to changes in the project's needs.

LinkedIn: https://bit.ly/jcldin