Lob 7, the tools I'll never do without

This lab was all about setting up static analysis tools. Specifically, I set up Prettier and ESLint.

Prettier

Prettier is a tool for Javascript that automatically organizes code to look uniform. It's nothing terribly special, though it does allow the user to specify a lot of options for how it should look. I didn't really set any though because I feel like getting used to a certain style that's not like the default would hinder me in working on other projects in the future.

To be perfectly honest, choosing Prettier was just due to the fact that it was my first choice and I had seen it used all over the place. This week's lecture also spent a lot of time talking about Prettier so I thought I should get to know it.

ESLint

ESLint is a tool for fixing minor syntax errors in your code. It's meant to be able to keep the code free of little problems that could end up breaking something in the future. Lint!

Again, because ESLint is widely known and used I picked it because I wanted to get to know it and use that knowledge in the future.

Getting it started

For Prettier it was fairly easy. I followed the install page and ran the first command in my command line.

npm install --save-dev --save-exact prettier

and likewise created my prettier config file.

echo {}> .prettierrc.json

After this, I could add some custom styling in the config file but as I said above I decided not to do that.

As for ESLint, I took similar steps following the ESLint getting started page

npm install eslint --save-dev

npx eslint --init

All good! We can now lint any file we like with ESLint.

Before I move on I also wanted to mention eslint-config-prettier because according to Prettier, this helps the two tools work together and not break each other.

User experience

Code after using Prettier

if (options.t) {
    var url = 'http://localhost:3000/posts/'

    req.get(
        {
            url: url,
            json: true,
            headers: {
                'User-Agent': 'request',
            },
        },
        (err, res, data) => {
            if (err) {
                console.log('Error:', err)
            } else if (res.statusCode !== 200) {
                console.log(
                    'localhost did not respond... check to see if your local telescope session is up...',
                )
            } else {
                const urls = data.map((e) => url + e.id)

                fs.writeFile(
                    'files/telescope.txt',
                    JSON.stringify(urls),
                    function (err) {
                        if (err) throw err
                    },
                )
            }
        },
    )
    //send file to be read
}

As you can see, the code looks a lot more readable! Prettier basically made all my code look like this and it's pretty great. The best part is I didn't even have to touch it! I clicked the button and my code was prettified.

ESLint

Running ESLint with npx eslint index.js revealed something...

So ESLint caught the fact that we wrote createWriteStream and never used it! Great. Let's just remove it and move on.

No other errors either! Which is pretty nice. Makes me feel pretty good about my code.

The command line

So, moving on from our first use of these tools, we want to allow the users to run a simple command and get these running on their own code.

package.json

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "prettier": "npx prettier --write .",
    "lint": "npx eslint ."
  },

Here we can see that I've written some scripts in my package.json so when the user inputs "prettier" or "lint" those tools will run! It's a fairly simple way to use the tools but there is another, even more consistent, way to get the user to run these scripts that I'll show in a moment.

IDE Integration

VSCode is a very useful IDE because you can just move over to the extensions tab and choose whatever you like, including Prettier and ESLint! You can even set shortcuts to run them on the IDE level.

For new users however, I decided to recommend they install Prettier and ESLint.

.vscode/extensions.json

{
    "recommendations": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
    ]
}

I'm not 100% sure how it works but I believe with this file, any other user that wants to work on Link Checker in VSCode will be asked to install these extensions.

(Optional)

I also went a little step further because I wanted to learn how to do this. I set up Prettier and ESlint in a pre-commit hook.

package.json excerpt

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.js": "eslint --cache --fix",
    "*.{js,css,md}": "prettier --write"
  }

you can see here that lint staged and husky are working together to run ESLint and Pettier before staging any commits. This means that no matter what, all commits will adhere to the linter and style guidelines! Next, I'd like to learn how to set up GitHub tests to test pull requests. If you'd like to add a pre-commit hook I recommend this prettier link.

Conclusion

All in all, this week was very informative and I'm going to be taking these tools to every project I create and am a part of. I basically learned how useful linting and code formatting tools are and how to integrate them so that they automate themselves through pre-commit hooks. I felt that was probably the most important thing I learned this week and I'll probably come back to this blog post every time I start up a new project because this will be one of the first things I set up.