Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
eslint-config-prettier
Advanced tools
Turns off all rules that are unnecessary or might conflict with prettier.
The eslint-config-prettier npm package is used to disable all formatting-related ESLint rules that might conflict with Prettier. This allows developers to use both ESLint and Prettier without having to deal with conflicting formatting rules. It ensures that ESLint focuses on code-quality rules, and Prettier takes care of code formatting.
Disabling conflicting rules
By extending eslint-config-prettier in your ESLint configuration file, you can turn off all rules that are unnecessary or might conflict with Prettier.
{ "extends": ["prettier"] }
Integration with other ESLint configs
eslint-config-prettier can be easily integrated with other ESLint configurations like Airbnb by placing it last in the extends array, which ensures that it will override any other formatting rules that might conflict with Prettier.
{ "extends": ["airbnb", "prettier"] }
Support for plugins
eslint-config-prettier provides support for disabling conflicting rules from various ESLint plugins, such as React or TypeScript, ensuring compatibility across different codebases.
{ "extends": ["prettier/react", "prettier/@typescript-eslint"] }
eslint-config-standard is an ESLint Shareable Config for JavaScript Standard Style. It enforces a consistent style across your codebase. Unlike eslint-config-prettier, it does not turn off formatting rules and is not specifically designed to be used with Prettier.
eslint-config-airbnb is one of the most popular ESLint configurations which enforces Airbnb's JavaScript style guide. It includes a set of rules for code quality and formatting. While it can be used with Prettier, it does not disable formatting rules by default like eslint-config-prettier does.
eslint-config-google is based on Google's JavaScript style guide. It provides a set of ESLint rules that align with Google's code style recommendations. Similar to eslint-config-airbnb, it is not tailored for use with Prettier and does not disable conflicting formatting rules.
Turns off all rules that are unnecessary or might conflict with prettier.
This let’s you use you favorite shareable config without letting its stylistic choices get in the way when using prettier.
Intended to be used together with eslint-plugin-prettier.
First, install eslint-plugin-prettier. Follow the instructions over there.
Then, install eslint-config-prettier:
$ npm install --save-dev eslint-config-prettier
Finally, add eslint-config-prettier to the "extends" array in your .eslintrc.*
file. Make sure to put it last, so it gets the chance to override other
configs.
{
"extends": [
"prettier"
]
}
A few ESLint plugins are supported as well:
Add extra exclusions for the plugins you use like so:
{
"extends": [
"prettier",
"prettier/flowtype",
"prettier/react"
]
}
eslint-config-prettier also ships with a little CLI tool to help you check if your configuration contains any rules that are unnecessary or conflict with prettier.
First, add a script for it to package.json:
{
"scripts": {
"eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
}
}
Then run npm run eslint-check
.
(Swap out .eslintrc.js with the path to your config if needed.)
{
"extends": [
"google",
"plugin:flowtype/recommended",
"plugin:react/recommended",
"prettier",
"prettier/flowtype",
"prettier/react"
],
"plugins": [
"flowtype",
"react",
"prettier"
],
"parserOptions": {
"ecmaVersion": 2016,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"es6": true,
"node": true
},
"rules": {
"prettier/prettier": "error"
}
}
There a few rules that eslint-config-prettier disables that actually can be enabled in some cases.
Usually, prettier takes care of following a maximum line length automatically. However, there are cases where prettier can’t do anything, such as for long strings, regular expressions and comments. Those need to be split up by a human.
If you’d like to enforce an even stricter maximum line length policy than
prettier can provide automatically, you can enable this rule. Just remember to
keep max-len
’s options and prettier’s printWidth
option in sync.
Example configuration:
{
"rules": {
"max-len": ["error", {"code": 80, "ignoreUrls": true}]
}
}
For example, the rule could warn about this line:
var x = a => 1 ? 2 : 3;
By default, ESLint suggests switching to an explicit return:
var x = a => { return 1 ? 2 : 3; };
That causes no problems with prettier.
With {allowParens: true}
, adding parentheses is also considered a valid way to
avoid the arrow confusion:
var x = a => (1 ? 2 : 3);
However, prettier removes many “unnecessary” parentheses, turning it back to:
var x = a => 1 ? 2 : 3;
eslint-config-airbnb config includes no-confusing-arrow
with the
allowParens
option turned on by default. Since that config is very popular, it
makes sense for eslint-config-prettier to turn this rule off.
If you like this rule, it can be used just fine with prettier as long as the
allowParens
option is off.
Example configuration:
{
"rules": {
"no-confusing-arrow": "error"
}
}
This rule forbids mixing certain operators, such as &&
and ||
.
For example, the rule could warn about this line:
var foo = a + b * c;
The rule suggests adding parentheses, like this:
var foo = a + (b * c);
However, prettier removes many “unnecessary” parentheses, turning it back to:
var foo = a + b * c;
If you want to use this rule with prettier, you need to split the expression into another variable:
var bar = b * c;
var foo = a + bar;
Keep in mind that prettier prints some “unnecessary” parentheses, though:
var foo = (a && b) || c;
Example configuration:
{
"rules": {
"no-mixed-operators": "error"
}
}
If you’d like to enforce the use of backticks rather than single or double
quotes for strings, you can enable this rule. Otherwise, there’s no need to.
Just remember to enable the "backtick"
option!
Example configuration:
{
"rules": {
"quotes": ["error", "backtick"]
}
}
eslint-config-prettier has been tested with:
Have new rules been added since those versions? Have we missed any rules? Is there a plugin you would like to see exclusions for? Open an issue or a pull request!
If you’d like to add support for eslint-plugin-foobar, this is how you’d go about it:
First, create foobar.js
:
"use strict";
module.exports = {
rules: {
"foobar/some-rule": "off"
}
};
Then, create test-lint/foobar.js
:
/* eslint-disable quotes */
"use strict";
// prettier does not want spaces before the parentheses, but
// eslint-config-foobar wants one.
console.log ();
test-lint/foobar.js
must fail when used with eslint-plugin-foobar and
eslint-plugin-prettier at the same time – until "prettier/foobar"
is added to
the "extends" property of an ESLint config.
Finally, you need to mention the plugin in several places:
"foobar.js"
to the "files" field in package.json
..eslintrc.base.js
.README.md
.When you’re done, run npm test
to verify that you got it all right. It runs
several other npm scripts:
"test:lint"
makes sure that the files in test-lint/
pass ESLint when
the exclusions from eslint-config-prettier are used. It also lints the code of
eslint-config-prettier itself."test:lint-verify-fail"
is run by a test in test/lint-verify-fail.js
."test:lint-rules"
is run by a test in test/rules.js
."test:ava"
runs unit tests that check a number of things:
"test:cli-sanity"
is a sanity check for the CLI.MIT.
Version 1.4.1 (2017-02-28)
FAQs
Turns off all rules that are unnecessary or might conflict with Prettier.
The npm package eslint-config-prettier receives a total of 17,973,600 weekly downloads. As such, eslint-config-prettier popularity was classified as popular.
We found that eslint-config-prettier demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.