Repository files navigation

ESLint configuration for modern JavaScript that improves code quality by removing bad features and preventing anti-patterns

You can install ESLint using npm or Yarn:

npm install eslint --save-dev

yarn add eslint --dev

Then install this configuration:

npm install eslint-config-modern --save-dev

yarn add eslint-config-modern --dev

In your.eslintrc file, add:

"extends":"modern"

This config uses features from ES6/ES2015 to ES2019 which are supported in the following environments:

• Chrome
• Firefox
• Safari
• Node.js 12.17.0+
• TypeScript 2.7+

Prettier is highly recommended to format your code. It is much more opinionated, powerful, and consistent than ESLint's formatting support. By using both, you can get better formatting from Prettier and still get advice of what features to use and potential errors in ESLint. Removing formatting from this style guide also makes it much simpler and more flexible, as you can use any settings you'd like in Prettier.

While configuration is not required, it's recommended you enable support for ES2017 trailing commas:

"trailingComma":"all"

JavaScript has many problematic and difficult to understand syntax features that have been replaced by newer features. Migrating to new features can drastically improve the readability, safety, and consistency of JavaScript.

• Use ES classes withclass instead of constructor functions withfunction.
• Use ES modules instead of globals or"use strict".
• Replacevar withconst if you don't need to reassign the variable, andlet if you do.
• Replacefor (const i = 0; i < array.length; i++) andfor (const value in array) withfor (const value of array).
• Only use `` for string concatenation and + for addition.
• Use spread arguments like...args instead ofarguments.
• Prefer Promises over callbacks when using async errors.
• Preferasync/await over.then() to use Promises.
• Don't giveparseInt() a radix, it properly defaults to 10 on modern browsers.
• Don't assignthis to a variable, use arrow functions or.bind() to avoid shadowing.
• Use=== and!== instead of== and!=.
• Usefetch or a third party library to make requests in browsers instead ofXMLHTTPRequest.undici is a good alternative for Node.

Some features have potentially dangerous or confusing usages and can be improved with care.

• Usenull instead ofundefined, unless you're comparing with an existingundefined value.
• Use break/return/throw for everycase inswitch.
• Don't extend or reassign built in types and values.
• Prefer standard APIs over third party packages when you can get equivalent functionality.
• Use capital letters for class names to signify thatnew should be used to create instances.
• Only throw Error objects (or subclasses).

Some features are too dangerous or confusing to be worth using.

• Avoideval(), use other techniques to make code dynamic.
• Avoidcontinue, use conditional statements inside blocks instead.
• Avoid typed wrappers (Boolean/Number/String/Object/Array), use literals likefalse,0,'',{}, and[] instead.
• Avoidwith, manually read properties or use destructuring instead.
• Avoidvoid, it's better to useundefined or break up multiple statements instead.
• Avoid bitwise operators like& and|, they're usually confused with the&& and|| (and/or) operators, and bitwise operations are not very performant or useful in JavaScript.

• https://github.com/eslint/eslint/blob/master/conf/eslint-recommended.js
• https://github.com/prettier/prettier
• https://github.com/prettier/eslint-config-prettier
• https://standardjs.com/
• https://www.jslint.com/
• https://github.com/ssoloff/eslint-config-crockford
• https://github.com/airbnb/javascript
• https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app