Socket
Socket
Sign inDemoInstall

eslint-config-prettier

Package Overview
Dependencies
88
Maintainers
1
Versions
72
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 6.15.0 to 7.0.0

prettier.js

128

bin/cli.js

@@ -7,5 +7,10 @@ #!/usr/bin/env node

const path = require("path");
const getStdin = require("get-stdin");
const validators = require("./validators");
// Require locally installed eslint, for `npx eslint-config-prettier` support
// with no local eslint-config-prettier installation.
const { ESLint } = require(require.resolve("eslint", {
paths: [process.cwd(), ...require.resolve.paths("eslint")],
}));
const SPECIAL_RULES_URL =

@@ -15,27 +20,19 @@ "https://github.com/prettier/eslint-config-prettier#special-rules";

if (module === require.main) {
if (process.argv.length > 2 || process.stdin.isTTY) {
console.error(
[
"This tool checks whether an ESLint configuration contains rules that are",
"unnecessary or conflict with Prettier. It’s supposed to be run like this:",
"",
" npx eslint --print-config path/to/main.js | npx eslint-config-prettier-check",
" npx eslint --print-config test/index.js | npx eslint-config-prettier-check",
"",
"Exit codes:",
"",
"0: No automatically detectable problems found.",
"1: Unexpected error.",
"2: Conflicting rules found.",
"",
"For more information, see:",
"https://github.com/prettier/eslint-config-prettier#cli-helper-tool",
].join("\n")
);
const args = process.argv.slice(2);
if (args.length === 0) {
console.error(help());
process.exit(1);
}
getStdin()
.then((string) => {
const result = processString(string);
const eslint = new ESLint();
Promise.all(args.map((file) => eslint.calculateConfigForFile(file)))
.then((configs) => {
const rules = [].concat(
...configs.map((config, index) =>
Object.entries(config.rules).map((entry) => [...entry, args[index]])
)
);
const result = processRules(rules);
if (result.stderr) {

@@ -50,3 +47,3 @@ console.error(result.stderr);

.catch((error) => {
console.error("Unexpected error", error);
console.error(error.message);
process.exit(1);

@@ -56,25 +53,23 @@ });

function processString(string) {
let config;
try {
config = JSON.parse(string);
} catch (error) {
return {
stderr: `Failed to parse JSON:\n${error.message}`,
code: 1,
};
}
function help() {
return `
Usage: npx eslint-config-prettier FILE...
if (
!(
Object.prototype.toString.call(config) === "[object Object]" &&
Object.prototype.toString.call(config.rules) === "[object Object]"
)
) {
return {
stderr: `Expected a \`{"rules: {...}"}\` JSON object, but got:\n${string}`,
code: 1,
};
}
Resolves an ESLint configuration for every given FILE and checks if they
contain rules that are unnecessary or conflict with Prettier. Example:
npx eslint-config-prettier index.js test/index.js other/file/to/check.js
Exit codes:
0: No automatically detectable problems found.
1: General error.
2: Conflicting rules found.
For more information, see:
https://github.com/prettier/eslint-config-prettier#cli-helper-tool
`.trim();
}
function processRules(configRules) {
// This used to look at "files" in package.json, but that is not reliable due

@@ -91,6 +86,3 @@ // to an npm bug. See:

const regularRules = filterRules(
allRules,
(ruleName, value) => value === "off"
);
const regularRules = filterRules(allRules, (_, value) => value === "off");
const optionsRules = filterRules(

@@ -105,25 +97,27 @@ allRules,

const flaggedRules = Object.keys(config.rules)
.map((ruleName) => {
const value = config.rules[ruleName];
const enabledRules = configRules
.map(([ruleName, value, source]) => {
const arrayValue = Array.isArray(value) ? value : [value];
const level = arrayValue[0];
const options = arrayValue.slice(1);
const [level, ...options] = arrayValue;
const isOff = level === "off" || level === 0;
return !isOff && ruleName in allRules ? { ruleName, options } : null;
return isOff ? null : { ruleName, options, source };
})
.filter(Boolean);
const flaggedRules = enabledRules.filter(
({ ruleName }) => ruleName in allRules
);
const regularFlaggedRuleNames = filterRuleNames(
flaggedRules,
(ruleName) => ruleName in regularRules
({ ruleName }) => ruleName in regularRules
);
const optionsFlaggedRuleNames = filterRuleNames(
flaggedRules,
(ruleName, options) =>
ruleName in optionsRules && !validators[ruleName](options)
({ ruleName, ...rule }) =>
ruleName in optionsRules && !validators[ruleName](rule, enabledRules)
);
const specialFlaggedRuleNames = filterRuleNames(
flaggedRules,
(ruleName) => ruleName in specialRules
({ ruleName }) => ruleName in specialRules
);

@@ -163,3 +157,3 @@

const optionsMessage = [
"The following rules are enabled with options that might conflict with Prettier. See:",
"The following rules are enabled with config that might conflict with Prettier. See:",
SPECIAL_RULES_URL,

@@ -192,5 +186,5 @@ "",

function filterRules(rules, fn) {
return Object.keys(rules)
.filter((ruleName) => fn(ruleName, rules[ruleName]))
.reduce((obj, ruleName) => {
return Object.entries(rules)
.filter(([ruleName, value]) => fn(ruleName, value))
.reduce((obj, [ruleName]) => {
obj[ruleName] = true;

@@ -202,5 +196,5 @@ return obj;

function filterRuleNames(rules, fn) {
return rules
.filter((rule) => fn(rule.ruleName, rule.options))
.map((rule) => rule.ruleName);
return [
...new Set(rules.filter((rule) => fn(rule)).map((rule) => rule.ruleName)),
];
}

@@ -216,2 +210,2 @@

exports.processString = processString;
exports.processRules = processRules;

28

bin/validators.js

@@ -7,3 +7,5 @@ "use strict";

module.exports = {
curly(options) {
"arrow-body-style": checkEslintPluginPrettier,
curly({ options }) {
if (options.length === 0) {

@@ -17,3 +19,3 @@ return true;

"lines-around-comment"(options) {
"lines-around-comment"({ options }) {
if (options.length === 0) {

@@ -35,3 +37,3 @@ return false;

"no-confusing-arrow"(options) {
"no-confusing-arrow"({ options }) {
if (options.length === 0) {

@@ -45,3 +47,3 @@ return false;

"vue/html-self-closing"(options) {
"no-tabs"({ options }) {
if (options.length === 0) {

@@ -52,2 +54,13 @@ return false;

const firstOption = options[0];
return Boolean(firstOption && firstOption.allowIndentationTabs);
},
"prefer-arrow-callback": checkEslintPluginPrettier,
"vue/html-self-closing"({ options }) {
if (options.length === 0) {
return false;
}
const firstOption = options[0];
return Boolean(

@@ -60,1 +73,8 @@ firstOption && firstOption.html && firstOption.html.void === "any"

};
function checkEslintPluginPrettier({ source: currentSource }, enabledRules) {
return !enabledRules.some(
({ ruleName, source }) =>
ruleName === "prettier/prettier" && currentSource === source
);
}

178

index.js

@@ -6,91 +6,87 @@ "use strict";

module.exports = {
rules: Object.assign(
{
// The following rules can be used in some cases. See the README for more
// information. (These are marked with `0` instead of `"off"` so that a
// script can distinguish them.)
"arrow-body-style": 0,
curly: 0,
"lines-around-comment": 0,
"max-len": 0,
"no-confusing-arrow": 0,
"no-mixed-operators": 0,
"no-tabs": 0,
"no-unexpected-multiline": 0,
"prefer-arrow-callback": 0,
quotes: 0,
// The rest are rules that you never need to enable when using Prettier.
"array-bracket-newline": "off",
"array-bracket-spacing": "off",
"array-element-newline": "off",
"arrow-parens": "off",
"arrow-spacing": "off",
"block-spacing": "off",
"brace-style": "off",
"comma-dangle": "off",
"comma-spacing": "off",
"comma-style": "off",
"computed-property-spacing": "off",
"dot-location": "off",
"eol-last": "off",
"func-call-spacing": "off",
"function-call-argument-newline": "off",
"function-paren-newline": "off",
"generator-star": "off",
"generator-star-spacing": "off",
"implicit-arrow-linebreak": "off",
indent: "off",
"jsx-quotes": "off",
"key-spacing": "off",
"keyword-spacing": "off",
"linebreak-style": "off",
"multiline-ternary": "off",
"newline-per-chained-call": "off",
"new-parens": "off",
"no-arrow-condition": "off",
"no-comma-dangle": "off",
"no-extra-parens": "off",
"no-extra-semi": "off",
"no-floating-decimal": "off",
"no-mixed-spaces-and-tabs": "off",
"no-multi-spaces": "off",
"no-multiple-empty-lines": "off",
"no-reserved-keys": "off",
"no-space-before-semi": "off",
"no-trailing-spaces": "off",
"no-whitespace-before-property": "off",
"no-wrap-func": "off",
"nonblock-statement-body-position": "off",
"object-curly-newline": "off",
"object-curly-spacing": "off",
"object-property-newline": "off",
"one-var-declaration-per-line": "off",
"operator-linebreak": "off",
"padded-blocks": "off",
"quote-props": "off",
"rest-spread-spacing": "off",
semi: "off",
"semi-spacing": "off",
"semi-style": "off",
"space-after-function-name": "off",
"space-after-keywords": "off",
"space-before-blocks": "off",
"space-before-function-paren": "off",
"space-before-function-parentheses": "off",
"space-before-keywords": "off",
"space-in-brackets": "off",
"space-in-parens": "off",
"space-infix-ops": "off",
"space-return-throw-case": "off",
"space-unary-ops": "off",
"space-unary-word-ops": "off",
"switch-colon-spacing": "off",
"template-curly-spacing": "off",
"template-tag-spacing": "off",
"unicode-bom": "off",
"wrap-iife": "off",
"wrap-regex": "off",
"yield-star-spacing": "off",
},
includeDeprecated && {
rules: {
// The following rules can be used in some cases. See the README for more
// information. (These are marked with `0` instead of `"off"` so that a
// script can distinguish them.)
curly: 0,
"lines-around-comment": 0,
"max-len": 0,
"no-confusing-arrow": 0,
"no-mixed-operators": 0,
"no-tabs": 0,
"no-unexpected-multiline": 0,
quotes: 0,
// The rest are rules that you never need to enable when using Prettier.
"array-bracket-newline": "off",
"array-bracket-spacing": "off",
"array-element-newline": "off",
"arrow-parens": "off",
"arrow-spacing": "off",
"block-spacing": "off",
"brace-style": "off",
"comma-dangle": "off",
"comma-spacing": "off",
"comma-style": "off",
"computed-property-spacing": "off",
"dot-location": "off",
"eol-last": "off",
"func-call-spacing": "off",
"function-call-argument-newline": "off",
"function-paren-newline": "off",
"generator-star": "off",
"generator-star-spacing": "off",
"implicit-arrow-linebreak": "off",
indent: "off",
"jsx-quotes": "off",
"key-spacing": "off",
"keyword-spacing": "off",
"linebreak-style": "off",
"multiline-ternary": "off",
"newline-per-chained-call": "off",
"new-parens": "off",
"no-arrow-condition": "off",
"no-comma-dangle": "off",
"no-extra-parens": "off",
"no-extra-semi": "off",
"no-floating-decimal": "off",
"no-mixed-spaces-and-tabs": "off",
"no-multi-spaces": "off",
"no-multiple-empty-lines": "off",
"no-reserved-keys": "off",
"no-space-before-semi": "off",
"no-trailing-spaces": "off",
"no-whitespace-before-property": "off",
"no-wrap-func": "off",
"nonblock-statement-body-position": "off",
"object-curly-newline": "off",
"object-curly-spacing": "off",
"object-property-newline": "off",
"one-var-declaration-per-line": "off",
"operator-linebreak": "off",
"padded-blocks": "off",
"quote-props": "off",
"rest-spread-spacing": "off",
semi: "off",
"semi-spacing": "off",
"semi-style": "off",
"space-after-function-name": "off",
"space-after-keywords": "off",
"space-before-blocks": "off",
"space-before-function-paren": "off",
"space-before-function-parentheses": "off",
"space-before-keywords": "off",
"space-in-brackets": "off",
"space-in-parens": "off",
"space-infix-ops": "off",
"space-return-throw-case": "off",
"space-unary-ops": "off",
"space-unary-word-ops": "off",
"switch-colon-spacing": "off",
"template-curly-spacing": "off",
"template-tag-spacing": "off",
"unicode-bom": "off",
"wrap-iife": "off",
"wrap-regex": "off",
"yield-star-spacing": "off",
...(includeDeprecated && {
// Deprecated since version 4.0.0.

@@ -102,4 +98,4 @@ // https://github.com/eslint/eslint/pull/8286

"no-spaced-func": "off",
}
),
}),
},
};

62

package.json
{
"name": "eslint-config-prettier",
"version": "6.15.0",
"version": "7.0.0",
"license": "MIT",

@@ -8,61 +8,7 @@ "author": "Simon Lydell",

"repository": "prettier/eslint-config-prettier",
"files": [
"bin/",
"@typescript-eslint.js",
"babel.js",
"flowtype.js",
"index.js",
"react.js",
"standard.js",
"unicorn.js",
"vue.js"
],
"bin": {
"eslint-config-prettier-check": "bin/cli.js"
},
"keywords": [
"eslint",
"eslintconfig",
"prettier"
],
"scripts": {
"doctoc": "doctoc README.md && replace \"\\[\\[([\\w/-]+)\\](?:([^\\[\\]]+)\\[([\\w/-]+)\\])?\\]\" \"[\\$1\\$2\\$3]\" README.md",
"prettier": "prettier --write .",
"test:lint": "eslint . && prettier --check .",
"test:lint-verify-fail": "eslint \"test-lint/*.{js,ts,vue}\" --config .eslintrc.base.js --format json",
"test:lint-rules": "eslint index.js --config test-config/.eslintrc.js --format json",
"test:deprecated": "eslint-find-rules --deprecated index.js",
"test:jest": "jest",
"test:cli-sanity": "eslint --print-config index.js | node ./bin/cli.js",
"test:cli-sanity-warning": "eslint --print-config ./bin/cli.js | node ./bin/cli.js",
"test": "npm run test:lint && npm run test:jest && npm run test:cli-sanity && npm run test:cli-sanity-warning"
},
"dependencies": {
"get-stdin": "^6.0.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "4.6.0",
"@typescript-eslint/parser": "4.6.0",
"babel-eslint": "10.1.0",
"cross-spawn": "7.0.3",
"doctoc": "1.4.0",
"eslint": "7.12.1",
"eslint-config-google": "0.14.0",
"eslint-find-rules": "3.6.1",
"eslint-plugin-babel": "5.3.1",
"eslint-plugin-flowtype": "5.2.0",
"eslint-plugin-prettier": "3.1.4",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-standard": "4.0.2",
"eslint-plugin-unicorn": "23.0.0",
"eslint-plugin-vue": "7.1.0",
"jest": "26.6.1",
"prettier": "2.1.2",
"replace": "1.2.0",
"rimraf": "3.0.2",
"typescript": "4.0.5"
},
"bin": "bin/cli.js",
"keywords": ["eslint", "eslintconfig", "prettier"],
"peerDependencies": {
"eslint": ">=3.14.1"
"eslint": ">=7.0.0"
}
}

38

react.js

@@ -6,25 +6,23 @@ "use strict";

module.exports = {
rules: Object.assign(
{
"react/jsx-child-element-spacing": "off",
"react/jsx-closing-bracket-location": "off",
"react/jsx-closing-tag-location": "off",
"react/jsx-curly-newline": "off",
"react/jsx-curly-spacing": "off",
"react/jsx-equals-spacing": "off",
"react/jsx-first-prop-new-line": "off",
"react/jsx-indent": "off",
"react/jsx-indent-props": "off",
"react/jsx-max-props-per-line": "off",
"react/jsx-one-expression-per-line": "off",
"react/jsx-props-no-multi-spaces": "off",
"react/jsx-tag-spacing": "off",
"react/jsx-wrap-multilines": "off",
},
includeDeprecated && {
rules: {
"react/jsx-child-element-spacing": "off",
"react/jsx-closing-bracket-location": "off",
"react/jsx-closing-tag-location": "off",
"react/jsx-curly-newline": "off",
"react/jsx-curly-spacing": "off",
"react/jsx-equals-spacing": "off",
"react/jsx-first-prop-new-line": "off",
"react/jsx-indent": "off",
"react/jsx-indent-props": "off",
"react/jsx-max-props-per-line": "off",
"react/jsx-one-expression-per-line": "off",
"react/jsx-props-no-multi-spaces": "off",
"react/jsx-tag-spacing": "off",
"react/jsx-wrap-multilines": "off",
...(includeDeprecated && {
// Deprecated since version 7.0.0.
// https://github.com/yannickcr/eslint-plugin-react/blob/master/CHANGELOG.md#700---2017-05-06
"react/jsx-space-before-closing": "off",
}
),
}),
},
};

787

README.md

@@ -9,787 +9,2 @@ # eslint-config-prettier

## Contents
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [Installation](#installation)
- [Excluding deprecated rules](#excluding-deprecated-rules)
- [CLI helper tool](#cli-helper-tool)
- [Special rules](#special-rules)
- [arrow-body-style and prefer-arrow-callback](#arrow-body-style-and-prefer-arrow-callback)
- [curly](#curly)
- [lines-around-comment](#lines-around-comment)
- [max-len](#max-len)
- [no-confusing-arrow](#no-confusing-arrow)
- [no-mixed-operators](#no-mixed-operators)
- [no-tabs](#no-tabs)
- [no-unexpected-multiline](#no-unexpected-multiline)
- [quotes](#quotes)
- [Enforce backticks](#enforce-backticks)
- [Forbid unnecessary backticks](#forbid-unnecessary-backticks)
- [Example double quote configuration](#example-double-quote-configuration)
- [Example single quote configuration](#example-single-quote-configuration)
- [vue/html-self-closing](#vuehtml-self-closing)
- [Other rules worth mentioning](#other-rules-worth-mentioning)
- [no-sequences](#no-sequences)
- [Contributing](#contributing)
- [License](#license)
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
## Installation
Install eslint-config-prettier:
```
npm install --save-dev eslint-config-prettier
```
Then, 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.
<!-- prettier-ignore -->
```json
{
"extends": [
"some-other-config-you-use",
"prettier"
]
}
```
A few ESLint plugins are supported as well:
- [@typescript-eslint/eslint-plugin]
- [eslint-plugin-babel]
- [eslint-plugin-flowtype]
- [eslint-plugin-react]
- [eslint-plugin-standard]
- [eslint-plugin-unicorn]
- [eslint-plugin-vue]
Add extra exclusions for the plugins you use like so:
<!-- prettier-ignore -->
```json
{
"extends": [
"some-other-config-you-use",
"prettier",
"prettier/@typescript-eslint",
"prettier/babel",
"prettier/flowtype",
"prettier/react",
"prettier/standard",
"prettier/unicorn",
"prettier/vue"
]
}
```
If you extend a config which uses a plugin, it is recommended to add `"prettier/that-plugin"` (if available). For example, [eslint-config-airbnb] enables [eslint-plugin-react] rules, so `"prettier/react"` is needed:
<!-- prettier-ignore -->
```json
{
"extends": [
"airbnb",
"prettier",
"prettier/react"
]
}
```
If you’re unsure which plugins are used, you can usually find them in your `package.json`.
### Excluding deprecated rules
Some of the rules that eslint-config-prettier turns off may be deprecated. **This is perfectly fine,** but if you really need to omit the deprecated rules, you can do so by setting the `ESLINT_CONFIG_PRETTIER_NO_DEPRECATED` environment variable to a non-empty value. For example:
```
env ESLINT_CONFIG_PRETTIER_NO_DEPRECATED=true npx eslint-find-rules --deprecated index.js
```
## CLI helper tool
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.
You can run it using `npx`:
```
npx eslint --print-config path/to/main.js | npx eslint-config-prettier-check
```
(Change `path/to/main.js` to a file that exists in your project.)
In theory you need to run `npx eslint --print-config file.js | npx eslint-config-prettier-check` for every single file in your project to be 100% sure that there are no conflicting rules, because ESLint supports having different rules for different files. But usually you’ll have about the same rules for all files, so it is enough to run the command on one file (pick one that you won’t be moving). If you use [multiple configuration files] or [overrides], you can (but you probably don’t need to!) run the above script several times with different `--print-config` arguments, such as:
```
npx eslint --print-config index.js | npx eslint-config-prettier-check
npx eslint --print-config test/index.js | npx eslint-config-prettier-check
npx eslint --print-config legacy/main.js | npx eslint-config-prettier-check
```
Exit codes:
- 0: No problems found.
- 1: Unexpected error.
- 2: Conflicting rules found.
## Special rules
There a few rules that eslint-config-prettier disables that actually can be enabled in some cases.
- Some require certain options. The CLI helper tool validates this.
- Some require special attention when writing code. The CLI helper tool warns you if any of those rules are enabled, but can’t tell if anything is problematic.
- Some can cause problems if using [eslint-plugin-prettier] and `--fix`.
For maximum ease of use, the special rules are disabled by default. If you want them, you need to explicitly specify them in your ESLint config.
### [arrow-body-style] and [prefer-arrow-callback]
**These rules might cause problems if using [eslint-plugin-prettier] and `--fix`.**
If you use any of these rules together with the `prettier/prettier` rule from [eslint-plugin-prettier], you can in some cases end up with invalid code due to a bug in ESLint’s autofix.
These rules are safe to use if:
- You don’t use [eslint-plugin-prettier]. In other words, you run `eslint --fix` and `prettier --write` as separate steps.
- You _do_ use [eslint-plugin-prettier], but don’t use `--fix`. (But then, what’s the point?)
You _can_ still use these rules together with [eslint-plugin-prettier] if you want, because the bug does not occur _all the time._ But if you do, you need to keep in mind that you might end up with invalid code, where you manually have to insert a missing closing parenthesis to get going again.
If you’re fixing large of amounts of previously unformatted code, consider temporarily disabling the `prettier/prettier` rule and running `eslint --fix` and `prettier --write` separately.
See these issues for more information:
- [eslint-config-prettier#31]
- [eslint-config-prettier#71]
- [eslint-plugin-prettier#65]
When the autofix bug in ESLint has been fixed, the special case for these rules can be removed.
### [curly]
**This rule requires certain options.**
If a block (for example after `if`, `else`, `for` or `while`) contains only one statement, JavaScript allows omitting the curly braces around that statement. This rule enforces if or when those optional curly braces should be omitted.
If you use the `"multi-line"` or `"multi-or-nest"` option, the rule can conflict with Prettier.
For example, the `"multi-line"` option allows this line:
<!-- prettier-ignore -->
```js
if (cart.items && cart.items[0] && cart.items[0].quantity === 0) updateCart(cart);
```
However, Prettier might consider the line too long and turn it into the following, which the `"multi-line"` option does _not_ allow:
<!-- prettier-ignore -->
```js
if (cart.items && cart.items[0] && cart.items[0].quantity === 0)
updateCart(cart);
```
If you like this rule, it can be used just fine with Prettier as long as you don’t use the `"multi-line"` or `"multi-or-nest"` option.
Example ESLint configuration:
<!-- prettier-ignore -->
```json
{
"rules": {
"curly": ["error", "all"]
}
}
```
### [lines-around-comment]
**This rule can be used with certain options.**
This rule requires empty lines before and/or after comments. Prettier preserves blank lines, with two exceptions:
- Several blank lines in a row are collapsed into a single blank line. This is fine.
- Blank lines at the beginning and end of blocks, objects and arrays are always removed. This may lead to conflicts.
By default, ESLint requires a blank line above the comment is this case:
<!-- prettier-ignore -->
```js
if (result) {
/* comment */
return result;
}
```
However, Prettier removes the blank line:
<!-- prettier-ignore -->
```js
if (result) {
/* comment */
return result;
}
```
If you like this rule, it can be used just fine with Prettier as long as you add some extra configuration to allow comments at the start and end of blocks, objects and arrays.
Example ESLint configuration:
<!-- prettier-ignore -->
```json
{
"rules": {
"lines-around-comment": [
"error",
{
"beforeBlockComment": true,
"afterBlockComment": true,
"beforeLineComment": true,
"afterLineComment": true,
"allowBlockStart": true,
"allowBlockEnd": true,
"allowObjectStart": true,
"allowObjectEnd": true,
"allowArrayStart": true,
"allowArrayEnd": true
}
]
}
}
```
### [max-len]
(The following applies to [vue/max-len] as well.)
**This rule requires special attention when writing code.**
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.
Keep in mind that you might have to refactor code slightly if Prettier formats lines in a way that the `max-len` rule does not approve of.
Example ESLint configuration:
<!-- prettier-ignore -->
```json
{
"rules": {
"max-len": ["error", {"code": 80, "ignoreUrls": true}]
}
}
```
### [no-confusing-arrow]
**This rule requires certain options.**
For example, the rule could warn about this line:
<!-- prettier-ignore -->
```js
var x = a => 1 ? 2 : 3;
```
With `{allowParens: true}` (the default since ESLint 6.0.0), adding parentheses is considered a valid way to avoid the arrow confusion:
<!-- prettier-ignore -->
```js
var x = a => (1 ? 2 : 3);
```
While Prettier keeps those parentheses, it removes them if the line is long enough to introduce a line break:
<!-- prettier-ignore -->
```js
EnterpriseCalculator.prototype.calculateImportantNumbers = inputNumber =>
1 ? 2 : 3;
```
With `{allowParens: false}`, ESLint instead suggests switching to an explicit return:
<!-- prettier-ignore -->
```js
var x = a => { return 1 ? 2 : 3; };
```
That causes no problems with Prettier.
If you like this rule, it can be used just fine with Prettier as long as the `allowParens` option is off.
Example ESLint configuration:
<!-- prettier-ignore -->
```json
{
"rules": {
"no-confusing-arrow": ["error", { "allowParens": false }]
}
}
```
(Note: The CLI helper tool considers `{allowParens: true}` to be the default, which is the case since ESLint 6.0.0. The tool will produce a warning if you use the default even if you use an older version of ESLint. It doesn’t hurt to explicitly set `{allowParens: false}` even though it is technically redundant. This way you are prepared for a future ESLint upgrade and the CLI tool can be kept simple.)
### [no-mixed-operators]
**This rule requires special attention when writing code.**
This rule forbids mixing certain operators, such as `&&` and `||`.
For example, the rule could warn about this line:
<!-- prettier-ignore -->
```js
var foo = a + b * c;
```
The rule suggests adding parentheses, like this:
<!-- prettier-ignore -->
```js
var foo = a + (b * c);
```
However, Prettier removes many “unnecessary” parentheses, turning it back to:
<!-- prettier-ignore -->
```js
var foo = a + b * c;
```
If you want to use this rule with Prettier, you need to split the expression into another variable:
<!-- prettier-ignore -->
```js
var bar = b * c;
var foo = a + bar;
```
Keep in mind that Prettier prints _some_ “unnecessary” parentheses, though:
<!-- prettier-ignore -->
```js
var foo = (a && b) || c;
```
Example ESLint configuration:
<!-- prettier-ignore -->
```json
{
"rules": {
"no-mixed-operators": "error"
}
}
```
### [no-tabs]
**This rule requires certain Prettier options.**
This rule disallows the use of tab characters at all. It can be used just fine with Prettier as long as you don’t configure Prettier to indent using tabs.
Example ESLint configuration:
<!-- prettier-ignore -->
```json
{
"rules": {
"no-tabs": "error"
}
}
```
Example Prettier configuration (this is the default, so adding this is not required):
<!-- prettier-ignore -->
```json
{
"useTabs": false
}
```
**Note:** Since [ESlint 5.7.0] this rule can be configured to work regardless of your Prettier configuration:
<!-- prettier-ignore -->
```json
{
"rules": {
"no-tabs": ["error", {"allowIndentationTabs": true}]
}
}
```
A future version of eslint-config-prettier might check for that automatically.
### [no-unexpected-multiline]
**This rule requires special attention when writing code.**
This rule disallows confusing multiline expressions where a newline looks like it is ending a statement, but is not.
For example, the rule could warn about this:
<!-- prettier-ignore -->
```js
var hello = "world"
[1, 2, 3].forEach(addNumber)
```
Prettier usually formats this in a way that makes it obvious that a semicolon was missing:
<!-- prettier-ignore -->
```js
var hello = "world"[(1, 2, 3)].forEach(addNumber);
```
However, there are cases where Prettier breaks things into several lines such that the `no-unexpected-multiline` conflicts.
<!-- prettier-ignore -->
```js
const value = text.trim().split("\n")[position].toLowerCase();
```
Prettier breaks it up into several lines, though, causing a conflict:
<!-- prettier-ignore -->
```js
const value = text
.trim()
.split("\n")
[position].toLowerCase();
```
If you like this rule, it can usually be used with Prettier without problems, but occasionally you might need to either temporarily disable the rule or refactor your code.
<!-- prettier-ignore -->
```js
const value = text
.trim()
.split("\n")
// eslint-disable-next-line no-unexpected-multiline
[position].toLowerCase();
// Or:
const lines = text.trim().split("\n");
const value = lines[position].toLowerCase();
```
**Note:** If you _do_ enable this rule, you have to run ESLint and Prettier as two separate steps (and ESLint first) in order to get any value out of it. Otherwise Prettier might reformat your code in such a way that ESLint never gets a chance to report anything (as seen in the first example).
Example configuration:
<!-- prettier-ignore -->
```json
{
"rules": {
"no-unexpected-multiline": "error"
}
}
```
### [quotes]
(The following applies to [babel/quotes] and [@typescript-eslint/quotes] as well.)
**This rule requires certain options and certain Prettier options.**
Usually, you don’t need this rule at all. But there are two cases where it could be useful:
- To enforce the use of backticks rather than single or double quotes for strings.
- To forbid backticks where regular strings could have been used.
#### Enforce backticks
If you’d like all strings to use backticks (never quotes), enable the `"backtick"` option.
Example ESLint configuration:
<!-- prettier-ignore -->
```json
{
"rules": {
"quotes": ["error", "backtick"]
}
}
```
#### Forbid unnecessary backticks
In the following example, the first array item could have been written with quotes instead of backticks.
<!-- prettier-ignore -->
```js
const strings = [
`could have been a regular string`,
`
multiple
lines
`,
`uses ${interpolation}`,
String.raw`\tagged/`,
];
```
If you’d like ESLint to enforce `` `could have been a regular string` `` being written as either `"could have been a regular string"` or `'could have been a regular string'`, you need to use some specific configuration. The `quotes` rule has two options, a string option and an object option.
- The first (string) option needs to be set to `"single"` or `"double"` and be kept in sync with Prettier’s [singleQuote] option.
- The second (object) option needs the following properties:
- `"avoidEscape": true` to follow Prettier’s [string formatting rules].
- `"allowTemplateLiterals": false` to disallow unnecessary backticks.
##### Example double quote configuration
ESLint:
<!-- prettier-ignore -->
```json
{
"rules": {
"quotes": [
"error",
"double",
{ "avoidEscape": true, "allowTemplateLiterals": false }
]
}
}
```
Prettier (this is the default, so adding this is not required):
<!-- prettier-ignore -->
```json
{
"singleQuote": false
}
```
##### Example single quote configuration
ESLint:
<!-- prettier-ignore -->
```json
{
"rules": {
"quotes": [
"error",
"single",
{ "avoidEscape": true, "allowTemplateLiterals": false }
]
}
}
```
Prettier:
<!-- prettier-ignore -->
```json
{
"singleQuote": true
}
```
### [vue/html-self-closing]
**This rule requires certain options.**
This rule enforces whether elements should be self-closing or not.
Prettier generally preserves the way you wrote your elements:
<!-- prettier-ignore -->
```vue
<div />
<div></div>
<MyComponent />
<MyComponent></MyComponent>
<svg><path d="" /></svg>
<svg><path d=""></path></svg>
```
But for known _void_ HTML elements, Prettier always uses the self-closing style. For example, `<img>` is turned into `<img />`.
If you like this rule, it can be used just fine with Prettier as long as you set `html.void` to `"any"`.
Example ESLint configuration:
<!-- prettier-ignore -->
```json
{
"rules": {
"vue/html-self-closing": [
"error",
{
"html": {
"void": "any"
}
}
]
}
}
```
## Other rules worth mentioning
These rules don’t conflict with Prettier, but have some gotchas when used with Prettier.
### [no-sequences]
This rule forbids using JavaScript’s confusing comma operator (sequence expressions). This piece of code is not doing what it looks like:
<!-- prettier-ignore -->
```js
matrix[4, 7];
```
Prettier adds parentheses to the above to make it clear that a sequence expression is used:
<!-- prettier-ignore -->
```js
matrix[(4, 7)];
```
However, the `no-sequences` rule allows comma operators if the expression sequence is explicitly wrapped in parentheses. Since Prettier automatically wraps them in parentheses, you might never see any warnings from ESLint about comma operators.
Ending up with an accidental sequence expression can easily happen while refactoring. If you want ESLint to catch such mistakes, it is recommended to forbid sequence expressions entirely using [no-restricted-syntax] \([as mentioned in the `no-sequences` documentation][no-sequences-full]):
<!-- prettier-ignore -->
```json
{
"rules": {
"no-restricted-syntax": ["error", "SequenceExpression"]
}
}
```
If you still need to use the comma operator for some edge case, you can place an `// eslint-disable-next-line no-restricted-syntax` comment on the line above the expression. `no-sequences` can safely be disabled if you use the `no-restricted-syntax` approach.
You can also supply a custom message if you want:
<!-- prettier-ignore -->
```json
{
"rules": {
"no-restricted-syntax": [
"error",
{
"selector": "SequenceExpression",
"message": "The comma operator is confusing and a common mistake. Don’t use it!"
}
]
}
}
```
## Contributing
eslint-config-prettier has been tested with:
- ESLint 7.12.1
- eslint-config-prettier 6.11.0 and older were tested with ESLint 6.x
- eslint-config-prettier 5.1.0 and older were tested with ESLint 5.x
- eslint-config-prettier 2.10.0 and older were tested with ESLint 4.x
- eslint-config-prettier 2.1.1 and older were tested with ESLint 3.x
- prettier 2.1.2
- @typescript-eslint/eslint-plugin 4.6.0
- eslint-plugin-babel 5.3.1
- eslint-plugin-flowtype 5.2.0
- eslint-plugin-react 7.21.5
- eslint-plugin-standard 4.0.2
- eslint-plugin-unicorn 23.0.0
- eslint-plugin-vue 7.1.0
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`:
<!-- prettier-ignore -->
```js
"use strict";
module.exports = {
rules: {
"foobar/some-rule": "off"
}
};
```
Then, create `test-lint/foobar.js`:
<!-- prettier-ignore -->
```js
/* eslint-disable quotes */
"use strict";
// Prettier does not want spaces before the parentheses, but
// `plugin:foobar/recommended` 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. The file should be formatted according to Prettier, and that formatting should disagree with the plugin.
Finally, you need to mention the plugin in several places:
- Add `"foobar.js"` to the "files" field in `package.json`.
- Add eslint-plugin-foobar to the "devDependencies" field in `package.json`.
- Make sure that at least one rule from eslint-plugin-foobar gets used in `.eslintrc.base.js`.
- Add it to the list of supported plugins, to the example config and to Contributing section in `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, and checks that Prettier has been run on all files.
- `"test:lint-verify-fail"` is run by a test in `test/lint-verify-fail.test.js`.
- `"test:lint-rules"` is run by a test in `test/rules.test.js`.
- `"test:jest"` runs unit tests that check a number of things:
- That eslint-plugin-foobar is mentioned in all the places shown above.
- That no unknown rules are turned off. This helps catching typos, for example.
- That the CLI works.
- `"test:cli-sanity"` and `"test:cli-sanity-warning"` are sanity checks for the CLI.
## License
[MIT](LICENSE).
[@typescript-eslint/eslint-plugin]: https://github.com/typescript-eslint/typescript-eslint
[@typescript-eslint/quotes]: https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/quotes.md
[eslint 5.7.0]: https://eslint.org/blog/2018/10/eslint-v5.7.0-released
[prettier]: https://github.com/prettier/prettier
[arrow-body-style]: https://eslint.org/docs/rules/arrow-body-style
[babel/quotes]: https://github.com/babel/eslint-plugin-babel#rules
[curly]: https://eslint.org/docs/rules/curly
[eslint-config-airbnb]: https://www.npmjs.com/package/eslint-config-airbnb
[eslint-config-prettier#31]: https://github.com/prettier/eslint-config-prettier/issues/31
[eslint-config-prettier#71]: https://github.com/prettier/eslint-config-prettier/issues/71
[eslint-plugin-babel]: https://github.com/babel/eslint-plugin-babel
[eslint-plugin-flowtype]: https://github.com/gajus/eslint-plugin-flowtype
[eslint-plugin-prettier#65]: https://github.com/prettier/eslint-plugin-prettier/issues/65
[eslint-plugin-prettier]: https://github.com/prettier/eslint-plugin-prettier
[eslint-plugin-react]: https://github.com/yannickcr/eslint-plugin-react
[eslint-plugin-standard]: https://github.com/xjamundx/eslint-plugin-standard
[eslint-plugin-unicorn]: https://github.com/sindresorhus/eslint-plugin-unicorn
[eslint-plugin-vue]: https://github.com/vuejs/eslint-plugin-vue
[lines-around-comment]: https://eslint.org/docs/rules/lines-around-comment
[max-len]: https://eslint.org/docs/rules/max-len
[multiple configuration files]: https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
[no-confusing-arrow]: https://eslint.org/docs/rules/no-confusing-arrow
[no-mixed-operators]: https://eslint.org/docs/rules/no-mixed-operators
[no-restricted-syntax]: https://eslint.org/docs/rules/no-restricted-syntax
[no-sequences-full]: https://eslint.org/docs/rules/no-sequences#when-not-to-use-it
[no-sequences]: https://eslint.org/docs/rules/no-sequences
[no-tabs]: https://eslint.org/docs/rules/no-tabs
[no-unexpected-multiline]: https://eslint.org/docs/rules/no-unexpected-multiline
[overrides]: https://eslint.org/docs/user-guide/configuring#configuration-based-on-glob-patterns
[prefer-arrow-callback]: https://eslint.org/docs/rules/prefer-arrow-callback
[quotes]: https://eslint.org/docs/rules/quotes
[singlequote]: https://prettier.io/docs/en/options.html#quotes
[string formatting rules]: https://prettier.io/docs/en/rationale.html#strings
[vue/html-self-closing]: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/html-self-closing.md
[vue/max-len]: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/max-len.md
**[➡️ Full readme](https://github.com/prettier/eslint-config-prettier/)**
CHANGELOG.md
LICENSE

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc