Linting: Oxyclean for your code.
Tags: opensource
Published: 2021-11-04 18:23:01

### 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](https://eslint.org/), and [Prettier](https://prettier.io/) 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](https://www.npmjs.com/package/prettier) and using the instructions from [Prettier Install Docs](https://prettier.io/docs/en/install.html). This will set you up with a `.prettierrc.json` file. In this file is where you will set all the [configuration options](https://prettier.io/docs/en/options.html) 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](https://eslint.org/docs/user-guide/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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hozu601g5hwvu5rpblom.png)

### What did it find in my own code?
Having set up linting/formatting in my own SSG called [textToHTML](https://github.com/AndreWillomitzer/textToHTML_V2), [commit link](https://github.com/AndreWillomitzer/textToHTML_V2/commit/f9591ce0215c88c7da3b54bc34cc5cd704e937d4), 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.