DEV Community

Cover image for Eslint configuration for Node Project
Abayomi Ogunnusi
Abayomi Ogunnusi

Posted on

Eslint configuration for Node Project

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.

Top comments (4)

Collapse
 
dev_nick profile image
Nicholas Duadei Nicholas

Thanks man. This was really helpful

Collapse
 
amir_gharajedaghi profile image
Amir • Edited

Thank You.

Collapse
 
drsimplegraffiti profile image
Abayomi Ogunnusi

@lowlifearcade Glad you found it useful.

Collapse
 
lowlifearcade profile image
Sonny Brown

Eslint has been a mystery for me being I work on projects that use it and it’s not configurable after setting it up it seems. At least I can’t find a way. Thanks for this article.