Alphabetizing JavaScript Code with Perfectionist

The A, B, Cs

I'm working on my color picker¹. It's one big Vanilla Web Component shoved into a single JavaScript file. I've been refactoring for clarity as I polish things for launch.

My standard is to keep code in alphabetical order. That went out the window with The Great Renaming. I started to sort things manually. Then, I remembered it's code. Surely someone has solved this already.

Enter Perfectionist

Sure enough, there's an ESLint² plugin called Perfectionist³. It shuffles things so the letters line up.

You can put in play by installing it with:

npm install --save-dev eslint-plugin-perfectionist

Then, update your eslint.config.mjs file with:

import perfectionist from "eslint-plugin-perfectionist";

export default [perfectionist.configs["recommended-alphabetical"]];

If you start with this:

function bravo() {
  return "b"
}

function alfa() {
  return "a"
}

You end up with this when the linter runs:

function alfa() {
	return "a";
}

function bravo() {
	return "b";
}

That should get you started. Assuming you have ESLint in your porject. Which I don't...

A Supplemental Approach

Being an ESLint plugin, you need ESLint in you project to run Perfectionist. That means adding a package.json all the node_modules that go with it. Not something I want to do in a vanilla project for a one time sort⁴.

I made a stand-alone sorter instead. It only took a few steps:

Make a new direcotry and move into it:
```
mkdir sorter 
cd sorter
```

Install ESLint and Perfectionist

npm install --save-dev eslint
npm install --save-dev eslint-plugin-perfectionist

Make an eslint.config.mjs file with:

import perfectionist from "eslint-plugin-perfectionist";

export default [perfectionist.configs["recommended-alphabetical"]];

Copy the code you want to sort into a file in the sorter directory called script.js
Run this in the directory:
```
npx eslint --fix script.js
```

The file gets updated in place and comes out nice and tidy.

I don't consider myself a perfectionist in most things, but this sure is nice.

-a

-- end of line --

Endnotes

Perfectionist has a few built in sorters:

recommended-alphabetical - All plugin rules with alphabetical sorting in ascending order
recommended-natural - All plugin rules with natural sorting in ascending order
recommended-line-length - All plugin rules with sorting by line length in descending order
recommended-custom - All plugin rules with sorting by your own custom order

The docs are here.

I looked at biome and didn't see a way to do an alpha sort. If it's there, let me know. (I ended up setting it up as part of this process since I can use it without having to make a node project.)

I didn't see the alpha sort in Deno either.

Footnotes

1 ⤴

Still a work in progress as of the time I'm posting this. Should be fully operational in a few days.

2 ⤴

ESLint

I do so little JavaScript I never got around to installing a linter. Part of that's because things like ESLint require you to turn a project into a node project. That feels icky to me. Regardless, this seems to be one of the go-to linters for JavaScript.

3 ⤴

Perfectionist - ESLint Plugin

Home page says: "Take Your Code to a Beauty Salon". I don't know that I'd go that far, but I do like the alphabetizing.

4 ⤴

Okay, it's entirely possibly I have to do another sort at some point. You get the point.