Why Lint & Prettify?

It's easy to forget that writing code is a creative practice like many others. When working on your application, you have a style. It's not something anyone taught you (some of it like basic syntax sure), but we all have our own ways to indent, write conditional statements, among other things.

How would you explain your style to someone who hasn't seen you code before? Luckily, you don't have to when you use... static analysis tools.

Tools For The Job

In my case, since the project is JavaScript based I have chosen eslint, and Prettier as the formatting and style guide tools. I chose them due to the popularity, and variety of setup guides which allows me to customize how I want.

Prettier Setup

To set up Prettier, you will need to install the package from npm and using the instructions from Prettier Install Docs. This will set you up with a .prettierrc.json file. In this file is where you will set all the configuration options for your Prettier formatting.

Once the initial setup is done, you can choose which files to ignore by either creating a .prettierignore file, or inputting which file to use as a base when you run the command using --ignore-path CLI argument.

eslint setup

To set up eslint, you can go to the getting started page which will show how to create a config file similar to Prettier. It also demonstrates how to set basic rules to get your linting started. More advanced configurations are available but getting started... gets you started.

Similar to Prettier, you can create an .eslintignore or specify --ignore-path when you run the npm run eslint command.

How do I do that anyway?

• Open package.json
• Create a new property under scripts called "lint", and set the value to "npm run eslint"
• Save the file and run npm run lint!

Bonus: .vscode config folder

• Create a folder called .vscode in your project root directory.
• This folder can contain many files, but an example of one is settings.json where you can set the rules for your VSCode editor such as auto-format on save, tab indenting, and more.

What did it find in my own code?

Having set up linting/formatting in my own SSG called textToHTML, commit link, I was curious what it would find.

Mostly, it found spacing and line length issues. For example, when I generated my HTML template string, it split the string into multiple template strings separated by +. Another thing I noticed was since I specified "semi": true in the aforementioned config files, it added a couple missing semi-colons to the end of variable declarations.

In terms of indenting/spacing nothing changed because I try to keep a consistent style and I set the rules up to match my own style (since I'm the project owner).

Moving Forward

This was a great experience learning how to set up linting and formatting because in the future it will help others work on my project without having to ask how I want it done. I also now know how to set it up for future projects and where to find the setup docs.