This content originally appeared on DEV Community and was authored by Shivam Gupta
What is ESLint?
ESLint is an open-source Javascript linting utility originally created by Nicholas C. Zakas in June 2013. It is frequently used to find problematic patterns or code that doesn’t adhere to certain style guidelines. ESLint is written using Node.js to provide a fast runtime environment and easy installation via npm.
With ESLint you can impose the coding standard using a certain set of standalone rules. Yes, you can turn those rules on and off. These rules are completely pluggable.
Why use ESLint?
JavaScript, being a dynamic and loosely-typed language, is especially prone to developer error. ESLint lets you put guidelines over coding standard and helps you to minimize those errors. The main reason for imposing those guide is because every developer has her style of writing (like naming conventions/tabs/single or double quotes for a string). And, with different styling techniques, your codebase may look weird, more error-prone and vulnerable. Especially when you’re dealing with Javascript this could cause pitfalls you’d never want to deal with.
When to use it?
Honestly, I prefer to use it no matter the project size or the team. But you should consider having it for any medium to large-scaled non-trivial Javascript/Typescript project or/and you’ve got quite a team of developers to deal with. In either case, you have to impose common, standard coding practice/guidelines.
Linting tools like ESLint allow developers to discover problems with their JavaScript code without executing it. One of the main the reason for ESLint was created was to allow developers to create their own linting rules. You can use ESLint in any application that runs on Javascript/Typescript:
- React/React Native
- Angular
- Node.
How to use it?
Enough talk, eh? Here’s how you can install it.
Install it
Prerequisites: Node.js (^10.12.0, or >=12.0.0)
You can install ESLint using npm or yarn:
$ npm install eslint --save-dev
# or
$ yarn add eslint --dev
Note: It is also possible to install ESLint globally rather than locally (using npm install eslint --global). However, this is NOT recommended, and any plugins or shareable configs that you use must be installed locally in either case.
Initialize it
After installing it, initialize it with the following command:
$ npx eslint --init
# or
$ yarn run eslint --init
Note: — init assumes you have a package.json file already. If you don’t, make sure to run npm init or yarn init beforehand.
Configure it
The moment you’re done with the installation and initialization you’ll have a .eslintrc.{js,yml,json} file in your directory. In it, you’ll see some rules configured like this:
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
Use it
If you’re here that means you’ve successfully configured the ESLint. Here’s how you can use it:
$ npx elinst <your file>.js
# or
$ npx eslint <folder containing js files>
You can also add lint in yourpackage.json file (if not already added)
"scripts": {
...
"lint": "eslint .",
...
}
Congrats!
You’ve successfully made your codebase look a lot cleaner and better than ever in just a few steps.
This content originally appeared on DEV Community and was authored by Shivam Gupta
Shivam Gupta | Sciencx (2021-06-19T18:26:41+00:00) ESLint: What, Why, When, How. Retrieved from https://www.scien.cx/2021/06/19/eslint-what-why-when-how/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.