Eslint configuration for Node Project

Abayomi Ogunnusi - Oct 21 '21 - - Dev Community

We'll talk about how to enforce a style guide in our Nodejs project today in this brief post. When writing code, it's important to stick to a style and be consistent.
eslint

🥦 Let's get started by configuring our integrated environment. To begin, go to the vscode market and look for the eslint extension. This adds ESLint support to Visual Studio Code.
Image description


With that out of the way, make a folder and change directory: mkdir eslint-tut and cd eslint-tut

Open your IDE terminal and run this node package execute npx eslint --init
Image description

To select a guide, simply follow the instructions. My main goal is to have a standard guide.
🥦 Choose to check syntax, find problems and enforce code style.
Image description
🥦 CommonJS (require/exports).
Image description
🥦 None of these
Image description
🥦 Since I am not using typescript, i choose no.
Image description
🥦 I am running a node app, choose node.
Image description
🥦 I used a popular style guide.
Image description
🥦I chose standard over Airbnb and Google. Choose the one that suits your app best.
Image description
🥦 For my config file format, I went with JavaScript.
Image description
🥦 Yes, i'd love to install with npm
Image description
🥦 When installation is complete you should have .eslintrc.js
Image description
🥦 Eslint config settings and rules
Image description

How to use eslint in your project in two different ways.

1) Using a script
2) Using vscode commands

Run npm init -y to initiate your project.
Image description
Let's write a script in our package.json file. When we run this script its formats our code.
Image description

Now run the command beelow:
Image description

This should fix all inconsistencies in your code.

Error Fixing using vsccode command

Image description

🥦 To fix errors automaically using vscode: ctrl + shift + p , type in eslint and select Eslint fix all auto-fixable problems 
Enter fullscreen mode Exit fullscreen mode

Image description

Result: 🎯
Image description

Conclusion

I hope this post is helpful and will aid in writing better code for your next project. Thanks for reading.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .