prettier / eslint-config-prettier Goto Github PK

Specifically I am looking to turn on the useTabs argument.

Currently the readme contains a number of rules that are special cases with prettier and mentions that all "styling related lint rules" are disabled by this config.
However as a user of this config I'm interested in what the config is still error-ing on (in other words what kind of bugs/errors will be caught if i use this config?). Would it be possible to add a list of active rules to the readme or another file?

After updating from v3.0.1 to v3.1.0, I see the following behavior in Node v6 with its bundled npm (v3.10.10):

echo '{"rules": {}}' | ./node_modules/.bin/eslint-config-prettier-check

Unexpected error TypeError: Cannot read property 'filter' of undefined
    at processString (/opt/code/demo/node_modules/eslint-config-prettier/bin/cli.js:78:7)
    at getStdin.then.string (/opt/code/demo/node_modules/eslint-config-prettier/bin/cli.js:37:22)
    at process._tickCallback (internal/process/next_tick.js:109:7)

Updating npm and reinstalling eslint-config-prettier-check resolves the problem. For project's using Travis CI, adding the following to .travis.yml does the trick:

before_install:
- npm install -g npm@latest

The problem doesn't occur in Node v8 or v10 (which come bundled with newer versions of npm). The problem also doesn't occur with v3.0.1 or earlier of eslint-config-prettier, even when using Node v6 and its bundled npm v3.10.10.

The root of the problem is that the metadata for v3.1.0 in https://registry.npmjs.org/eslint-config-prettier doesn't include the files key, whereas the metadata for previous versions do. The exclusion of the files key from registry metadata is consistent across other projects starting in late August. I created an npm support topic asking if this change was intentional, but it didn't receive any responses.

The reason the lack of the files key in the registry metadata results in an error when eslint-config-prettier is installed via npm v3.10.10 is because older versions of npm generate node_modules/<package>/package.json based on the metadata from https://registry.npmjs.org/eslint-config-prettier (which is missing the files key). Newer versions of npm instead create that file based on the package.json inside of https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-3.1.0.tgz (which includes the files key).

Note that this problem only presents itself when eslint-config-prettier is installed as a dependency inside of another project. That's why this project's Travis build for Node v6 isn't failing.

I have the following
.eslintrc:

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react"
  ],
  "env": {
    "es6": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "import/no-unresolved": [
      "error",
      { "ignore": ["client/build/asset-manifest.json"] }
    ],
    "max-len": ["error", { "code": 120 }],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": [
          "**/*.test.js"
        ]
      }
    ]
  }
}

and .prettierrc:

semi: true
trailingComma: es5
singleQuote: true
printWidth: 120

Unfortunately. When I run eslint . --ext .js,.jsx i get a bunch of errors like:

  232:1  error  Line 232 exceeds the maximum line length of 100  max-len

Why is the max-len rule looking for lines > 100 chars, and not 120?

I have quite strange error. I set eslint.autoFixOnSave to true. When I save a file once it formats my code successfully:

When I save it again it messes up the indentation.

When I save a 3rd time it fixes the indentation again as in screenshot 1 and so on.

How can this happen?
This is my .eslintrc.json:

{
  "extends": "prettier",
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2017
  },
  "env": {
    "es6": true,
    "node": true
  },
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "semi": false,
        "printWidth": 120
      }
    ]
  }
}

Edit: I recorded a video with the strange behaviour:

In the extends array, if I write it like this

    "extends": [
        "eslint:recommended",
        "prettier"
    ],

This error shows up: Cannot convert undefined or null to object Referenced from: **/.eslintrc

However when I write it like this:

    "extends": [
        "eslint:recommended",
        "plugin:prettier"
    ],

it works fine. Is that valid syntax or will that prevent it from working properly? Thanks!

👋 Would it be appropriate to add prefer-arrow-callback to the list of conflicting rules to be turned off?

I had issues with this rule conflicting with our eslint config (which extends this prettier config). Turning off prefer-arrow-callback solved our issues.

Can I submit a PR?

Playground link

# Options (if any):
--fix

Input:

const a = 1
      (() => {
        const c = 1;
        console.log(c)
      })()

Output:

const a = 1(() => {
  const c = 1;
  console.log(c);
})();

Expected behavior:

I dont like semi ,but it in default;
When i want to add rule to ban semi , then i cant pass the check

{
  "parser": "babel-eslint",
  "parserOptions": {
    "sourceType": "module", 
    "allowImportExportEverywhere": true 
  },
  "extends": [
    "standard",    
    "eslint:recommended",
    "plugin:react/recommended",
    "standard-react",
    "prettier",
    "prettier/react",
    "prettier/standard"
  ], 
  "rules": {
    "semi":"error",
    "no-extra-semi":"error",
    "prettier/prettier": "error",
    "react/prop-types": 0 
  },
  "plugins": [
    "html",
    "react",
    "prettier",
    "standard"
  ]
}

got error on my laravel-vue project

Error:

Error: Cannot find module 'eslint-config-prettier/vue'
Referenced from: C:\xampp\htdocs\numcell-generator\.eslintrc.json
    at ModuleResolver.resolve (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\util\module-resolver.js:72:19)
    at resolve (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:484:28)
    at load (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:556:26)
    at configExtends.reduceRight (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:430:36)
    at Array.reduceRight (<anonymous>)
    at applyExtends (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:408:26)
    at loadFromDisk (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:528:22)
    at Object.load (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config\config-file.js:564:20)
    at Config.getLocalConfigHierarchy (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config.js:227:44)
    at Config.getConfigHierarchy (C:\Users\DIKA\AppData\Roaming\npm\node_modules\eslint\lib\config.js:179:43)

.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/recommended",
        "plugin:prettier/recommended",
        "prettier",
        "prettier/vue"
    ],
    "parserOptions": {
        "sourceType": "module"
    },
    "plugins": ["vue", "prettier"],
    "rules": {
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "no-console": "off",
        "no-empty": 0,
        "no-unused-vars": 0,
        "no-undef": 0,
        "no-mixed-spaces-and-tabs": 0
    }
}

package.json

{
    "private": true,
    "scripts": {
        "eslint-check": "eslint --print-config . | eslint-config-prettier-check",
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.18",
        "cross-env": "^5.1",
        "eslint": "^5.13.0",
        "eslint-config-airbnb-base": "^13.1.0",
        "eslint-config-standard": "^12.0.0",
        "eslint-plugin-import": "^2.16.0",
        "eslint-plugin-node": "^8.0.1",
        "eslint-plugin-prettier": "^3.0.1",
        "eslint-plugin-promise": "^4.0.1",
        "eslint-plugin-standard": "^4.0.0",
        "eslint-plugin-vue": "^5.1.0",
        "laravel-mix": "^4.0.14",
        "lodash": "^4.17.5",
        "prettier": "1.16.1",
        "prettier-eslint": "^8.8.2",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.17.0",
        "sass-loader": "^7.1.0",
        "vue": "^2.6.3",
        "vue-template-compiler": "^2.6.3"
    },
    "dependencies": {
        "@vue/eslint-config-prettier": "^4.0.1",
        "ag-grid-community": "^20.0.0",
        "ag-grid-vue": "^20.0.0",
        "moment": "^2.24.0",
        "sweetalert": "^2.1.2",
        "vee-validate": "^2.1.7",
        "vue-infinite-loading": "^2.4.3",
        "vue-multiselect": "^2.1.3",
        "vue-property-decorator": "^7.3.0",
        "vue-router": "^3.0.2",
        "vue-server-renderer": "^2.6.3",
        "vuetify": "^1.5.0",
        "vuex": "^3.1.0"
    },
    "eslintConfig": {
        "root": true,
        "extends": [
            "plugin:vue/essential",
            "plugin:prettier/recommended",
            "eslint:recommended"
        ]
    }
}

While trying to compile my project, I get the following error

Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Failed to load config "plugin:vue/no-layout-rules" to extend from.
Referenced from Referenced from: /node_modules/eslint-config-prettier/vue.js

project build from few days back works fine. Its the latest build which is failing. Any suggestions

ESLint 4.6.0 added function-paren-newline:
https://eslint.org/blog/2017/09/eslint-v4.6.0-released

In Atom I want to display inline ESLint errors for stuff that will be corrected by prettier-eslint. I expected this config to be a set of ESLint rules describing prettier preferences, not disabling those rules. Am I missing something?

From prettier/prettier#5120 by @npetruzzelli:

module.exports = {
    "rules": {
        quotes: ["error", "single", { avoidEscape: true, allowTemplateLiterals: false }],
        "prettier/prettier": ["error", { singleQuote: true }]
    }
}

// OR


module.exports = {
    "rules": {
        quotes: ["error", "double", { avoidEscape: true, allowTemplateLiterals: false }],
        "prettier/prettier": ["error", { singleQuote: false }]
    }
}

Will work. The trick is to keep quotes in sync with singleQuote's value. This makes ESLint turn `string` into "string" or 'string'.

We need to document this, and make sure that the CLI helper tool is smart about this case.

You probably know about typescript-eslint project. The problem is that Prettier rules are conflicting with those from typescript.

As I understand, this config just disables all rules that possibly conflict with Prettier rules. I'd be happy to open a PR with a fix (disable all conflicting typescript-eslint rules).

Will you consider this solution or you have other ideas regarding this issue?

This scenario is relevant when a shareable config like airbnb-base is combined with prettier. If the rule no-unexpected-multiline is enabled, it ends up resulting in a error which can only be resolved by switching off the rule.

.eslintrc.yml

extends: prettier
plugins:
  - prettier
parserOptions:
  ecmaVersion: 8
  sourceType: script
rules:
  no-undef: off
  no-unused-vars: off
  no-unexpected-multiline: error
  prettier/prettier:
    - error
    -
      trailingComma: none
      singleQuote: true
      printWidth: 80
      tabWidth: 4

code snippet

const value =
    Array.isArray(param) && spread
        ? getInstance()
              [methodName](...param)
              .toJSON()
        : getInstance()
              [methodName](param)
              .toJSON();

Eslint output:

  4:15  error  Unexpected newline between object and [ of property access  no-unexpected-multiline
  7:15  error  Unexpected newline between object and [ of property access  no-unexpected-multiline

If I fix the errors:

  3:24  error  Insert `⏎··············`  prettier/prettier
  5:24  error  Insert `⏎··············`  prettier/prettier

When using the arrow-body-style rule along with the Prettier, the output can result in invalid code.
Here's a thread with a working example: airbnb/javascript#1987

Since prettier handles arrow style well, can we switch this rule off in this repo?

arrow-body-style config that results in invalid code:

['error', 'as-needed', { requireReturnForObjectLiteral: false, }],

code

const foo = (paramA, paramB, paramC) => {
  return Object.keys(paramB.prop.nestedProp[0])
    .filter(attribute => paramC.includes(attribute))
    .map(attribute => {
      return Object.keys(paramB.prop.nestedProp[0][attribute]).map(
        attributeKey => {
          return {
            key: `${paramA.name} ${paramB.type} ${attribute} ${attributeKey}`,
            value: paramB.prop.nestedProp[0][attribute][attributeKey],
          }
        }
      )
    })
}

eslint config:

{
  "parser": "babel-eslint",
  "plugins": ["prettier", "react", "jest"],
  "env": {
    "browser": true,
    "node": true,
    "jasmine": true,
    "jest/globals": true
  },
  "parserOptions": {
    "ecmaVersion": 2017,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "webpack.common.js"
      }
    }
  },
  "rules": {},
  "extends": ["airbnb", "plugin:prettier/recommended"]
}

I'm using eslint-config-prettier together with eslint-config-prettier-standard which works great except for this:

prettier wants

    const { whatever } = loooooooooooooooooooooooong[
      something
    ].some.thiiiiiiiiiiiiing[0]

while standard wants

    const { whatever } = loooooooooooooooooooooooong[something].some.thiiiiiiiiiiiiing[0]

I wonder if this is due to computed-property-even-spacing not being turned off.

eslint-config-prettier-check reports "No rules that are unnecessary or conflict with Prettier were found."

For example

but with 28 spaces:

Environment

• ESLint Version: 5.6.1
• Prettier Version: 1.14.3
• eslint-config-prettier: "3.1.0",
• Node Version: 10.11.0
• npm Version: 6.4.1

Full configuration:

{
    "env": {
        "node": true,
        "es6": true
    },
    "extends": [
        "airbnb-base",
        "plugin:node/recommended",
        "prettier"
    ],
    "parser": "esprima",
    "plugins": [
        "node",
        "prettier"
    ],
    "root": true,
    "rules": {
        "indent": ["error", 4, { "SwitchCase": 1 }],
        "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
        "no-underscore-dangle": 0,
        "node/exports-style": ["error", "module.exports"],
        "prettier/prettier": ["error", {
            "singleQuote": true,
            "tabWidth": 4
        }]
    }
}

And for .prettierrc

{
    "singleQuote": true,
    "tabWidth": 4
}

Source code causing the issue.*

Any code that has a long a ? b : c statement will trigger the conflict:

            new PageComponent({
                tool: 'textbox',
                top: 380,
                left: 80,
                width: 380,
                height: 100,
                properties: {
                    question: options.question,
                    solution: solutions[0],
                    validation:
                        solutions.length > 1
                            ? `// ignoreCaseMatch ${JSON.stringify([
                                `^(?:${escaped.join('|')})$`
                            ])}`
                            : '// ignoreCaseEqual'
                }
            })

This runs In WebStorm with the following config:

But also using grunt-eslint configured in grunfile.js as follows:

        eslint: {
            files: [
                '*.js',
                'templates/*.es6',
                'src/js/**/*.es6',
                'test/**/*.es6'
            ],
            options: {
                config: '.eslintrc'
            }
        },

https://eslint.org/docs/rules/linebreak-style

I think we can add this one to eslint-config-prettier since Prettier 1.15+ has the end-of-line option.

See #79

ESLint recently announced that eslint-plugin-typescript would be moving to typescript-eslint.

When starting a project with the new typescript-eslint and eslint-config-prettier, eslint-config-prettier does not disable styling rules in typescript-eslint. It seems like this because the scopes in typescript.js need to be updated from typescript/ to @typescript-eslint/.

Happy to send a PR over doing that myself if this would suffice!

In a fairly large codebase I've found these rules to be unnecessary/conflicting when using prettier:

no-spaced-func

Prettier fixes callback(/* foo */) to callback /* foo */() at which point the rule warns.

no-confusing-arrow with allowParens option

/*eslint no-confusing-arrow: ["error", {"allowParens": true}]*/
/*eslint-env es6*/
var x = a => (1 ? 2 : 3);
var x = (a) => (1 ? 2 : 3);

Prettier removes the brackets which would avoid the error.

react/wrap-multilines

No example here.

no-unexpected-multiline

Prettier transforms

wrapper.find('FilterBy').prop('activeFilters')[1].filters.map(_ => _.key),

to

        wrapper
          .find('FilterBy')
          .prop('activeFilters')
          [1].filters.map(_ => _.key),

At which point the rule warns. But I'd maybe keep it as this can be solved by extracting the stuff into a variable. Wanted to mention it anyways.

Any thoughts on disabling these?

Hi there,

I ran into a small problem. For the following eslint config:

{
  "extends": ["airbnb-base", "prettier"]
}

and this non-pretty code:

const objectWithFunctions = {
  foo: (value) => Promise.resolve(value)
};

const functionThatReturnsObject = () => objectWithFunctions;

const someVariableThatGivesUsTheKey = 'foo';

functionThatReturnsObject()[someVariableThatGivesUsTheKey]('hello world').then(res => console.log(res))

Prettier outputs the following:

const objectWithFunctions = {
  foo: value => Promise.resolve(value),
};

const functionThatReturnsObject = () => objectWithFunctions;

const someVariableThatGivesUsTheKey = 'foo';

functionThatReturnsObject()
  [someVariableThatGivesUsTheKey]('hello world')
  .then(res => console.log(res));

and ESLint complains with the following:

error  Unexpected newline between object and [ of property access  no-unexpected-multiline

Not sure if this is an issue with the config here or maybe even with Prettier itself. If it's something with the config I could help out with a PR.

Using:

• [email protected]
• [email protected]
• [email protected]
• [email protected]

eslint-config-prettier 3.3.0

I use vim-prettier will generate semi automatically , but cause error ,how do I configure it?

Input:

<com @click="$emit('click');"></comp>

Output:

error  Delete `;`  prettier/prettier

Expected behavior:

No error;

I am finding it difficult to understand the supported plugins section in README

In my eslint config for a react project I am using
extends: ["airbnb", "prettier"], plugins: ["prettier"],

when do i need to add prettier/react in extends ?

eslint-plugin-babel contains rules that conflict with Prettier, so it might be a good idea to add another ESLint config called prettier/babel. This seems easy, so I might be able to submit a PR for this.

If I run the tests on windows, I get a couple of errors:

λ yarn test
yarn run v1.2.1
$ npm run test:lint && npm run test:ava && npm run test:cli-sanity

> [email protected] test:lint E:\Projects\repos\eslint-config-prettier
> eslint .

> [email protected] test:ava E:\Projects\repos\eslint-config-prettier
> ava

  23 passed
  2 failed

  lint-verify-fail » test-lint/ causes errors without eslint-config-prettier
  E:\Projects\repos\eslint-config-prettier\test\lint-verify-fail.js:21
   20:   t.is(
   21:     output.length,
   22:     ruleFiles.length,
  Error thrown in test:
  TypeError {
    message: 'Cannot read property \'length\' of null',
  }

  rules » There are no unknown rules
  E:\Projects\repos\eslint-config-prettier\test\rules.js:127
   126:
   127:   output[0].messages.forEach(message => {
   128:     t.notRegex(message.message, /rule\s+'[^']+'.*not found/);
  Error thrown in test:
  TypeError {
    message: 'Cannot read property \'0\' of null',
  }

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test:ava: `ava`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test:ava script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\suhas.karanth\AppData\Roaming\npm-cache\_logs\2017-11-01T07_36_09_833Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This only affects contributors on windows as the tests run fine on travis. cross-spawn might fix this issue.

Because of prettier/prettier#1182 this might not need to be disabled anymore, or at least not be a special rule. Need to look into, and think about whether this is a breaking change. I guess it is.

When I write this code:

const { caretPosition: [selectionStart, selectionEnd] } = this.state;

the prettier reformats it to

const {
  caretPosition: [selectionStart, selectionEnd]
} = this.state;

live demo

But the eslint wants it to be a single line.

package.json

...
    "babel-eslint": "^7.2.3",
...
    "eslint": "^4.13.1",
    "eslint-config-prettier": "^2.9.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-prettier": "^2.4.0",
    "eslint-plugin-react": "^7.5.1",
...
    "prettier": "^1.9.2",

prettier/prettier#1450 wants to change this:

var x = a =>
  (1 ? 2 : 3);

into:

var x = a =>
  1 ? 2 : 3;

which would violate no-confusing-arrow.

Potentially suggest this to ESLint as well – that’s not really a confusing case, is it?

Prettier converts ' to ' in JSX text (test case), but react/no-unescaped-entities complains that it should be an HTML entity.

https://github.com/prettier/eslint-config-prettier#example-configuration

Currently the manual is showing an example config that recommends redundant configuration options.

This config is equivalent to what is in the manual:

{
  "extends": [
    "standard",
    "plugin:flowtype/recommended",
    "plugin:react/recommended",
    "prettier",
    "prettier/flowtype",
    "prettier/react",
    "prettier/standard"
  ],
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

To test this you can set up a blank project and install the required dependencies.

yarn init -y && \
yarn add --dev \
  babel-eslint \
  eslint@^4 \
  eslint-config-prettier \
  eslint-config-standard \
  eslint-plugin-flowtype \
  eslint-plugin-import \
  eslint-plugin-node \
  eslint-plugin-prettier \
  eslint-plugin-promise \
  eslint-plugin-react \
  eslint-plugin-standard \
  prettier

Now you can view the final exported config:

npx eslint --print-config .eslint.json > final.json

If you compare that output with the output generated by the example configuration it is exactly the same.

Prettier converts bool to boolean

http://eslint.org/blog/2017/06/eslint-v4.0.0-released

I'm not really sure how the plugin works, but if I upgrade to the new prettier, linting fails.
I'm not sure what I need to do to make it work. :/

Basically, it complains that some newlines should not be there anymore:
error Delete ⏎··· prettier/prettier

Even if I run the new version of prettier on my code however, nothing changes, and linting still fails.

This is the report I got from greenkeeper: ZeeCoder/container-query#39 (comment)

Cheers

With [email protected] we were successfully configuring ESLint with "curly": ["error", "all"]. After f7a4b4e, eslint-config-prettier-check now exits with an error code and this message:

The following rules can be enabled in some cases. See:
https://github.com/prettier/eslint-config-prettier#special-rules

- curly

The readme still says this is a valid rule config:

{
  "rules": {
    "curly": ["error", "all"]
  }
}

Should eslint-config-prettier-check really be failing with this config?

I seem to have an infinite loop of "please add commas", "please remove commas"

https://travis-ci.org/emotion-js/emotion/builds/326929845?utm_source=github_status&utm_medium=notification

emotion-js/emotion#526

Any idea what could be the cause here?

There don't seem to be any obvious changes regarding this recently though 🙃

Hello,

I think this is a great project - been trying to get a handle on using prettier with eslint. I was already using the Prettier extension in my project, and found the default formatting to work well. I came across this article on Medium and ended up looking into your plugin more closely, it seemed like a great way to manage everything.

Unfortunately, when I added this package along with eslint-plugin-react and eslint-plugin-standard (and the example .eslintrc from eslint-config-prettier's README) to my existing create-react-app project, my JSX code went from this:

        }) => (
          <Form
            id={this.state.requiredFieldsProps.formId}
            onSubmit={handleSubmit}
          >
            <Row>
              <Col xs="12" sm="6">
                <FormGroup>
                  <Label for={this.state.requiredFieldsProps.fields.lob.name}>
                    Foo
                  </Label>
                  <Field
                    component={Select}
                    name={this.state.requiredFieldsProps.fields.lob.name}
                    id={this.state.requiredFieldsProps.fields.lob.name}
                    change={handleChange}
                    value={values.lob}
                    options={requiredFieldsDropdowns.lob.options}
                  />

to this:

        }) => ( <
          Form id = {
            this.state.requiredFieldsProps.formId
          }
          onSubmit = {
            handleSubmit
          } >
          <
          Row >
          <
          Col xs = "12"
          sm = "6" >
          <
          FormGroup >
          <
          Label
          for = {
            this.state.requiredFieldsProps.fields.lob.name
          } > {
            this.state.requiredFieldsProps.fields.lob.label
          } <
          /Label> <
          Field component = {
            Select
          }
          name = {
            this.state.requiredFieldsProps.fields.lob.name
          }
          id = {
            this.state.requiredFieldsProps.fields.lob.name
          }
          change = {
            this.handleSelectChange
          }
          value = {
            values.lob
          }
          options = { 
            this.state.requiredFieldsDropdowns.lob
          }
          /> <

Obviously, this isn't very readable and actually causes linter errors. What's really odd to me is that prior to adding these packages, I was just using the prettier extension with no modifications and it was formatting my JSX nicely, as well as handling indentation and semicolons, etc.
I tried adding a .prettierrc with settings like:

{ "useTabs": false, "printWidth": 80, "tabWidth": 2, "singleQuote": true, "trailingComma": "none", "jsxBracketSameLine": false }

but that didn't seem to help.
I'm guessing that CRA has some default eslint config that it's trying to apply which conflicts with the settings Prettier and the packages/plugins I've installed are conflicting with. Any ideas on how I might get this all to work together? I'm trying to come up with a flexible, simple linter setup that can be used on a project with several developers using different code editors and this seems like a really promising solution, if I can work out the kinks.

Thanks!

So I want to use stroustrup for my brace-style, I updated my .eslintrc file as per below but prettier keeps complaining and I can only suppress the prettier/prettier rule in WebStorm.

  rules: {

    ...

    'brace-style': [
      'error',
      'stroustrup',
      {
        'allowSingleLine': true
      }
    ],

    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        trailingComma: 'all',
      },
    ],
  },

It keeps complaining about this:

  if (isMeow()) {
    meow();
  }
  else {
    bork();
  }

Thanks for reading my question 👍

🍰

I am currently using prettier through eslint run and there is a (tricky) rule that seems to break.

I am using JS without semicolons which implies declaration of IIFE with a semicolon before parenthesis. Then I have the following case:

• Ok for prettier, not ok for eslint that will consider that first line is ending after the ";" and then eslint returns an "import/newline-after-import" error

const EventStore = require('../service/eventStore')

;(async () => {
  const eventBus = await EventBus.getInstance()
  eventBus.stanConnection.on('connect', registerCommandHandlers)
})()

• Ok for eslint, not ok for prettier that returns a "Delete ↵" on line 3.

const EventStore = require('../service/eventStore')
;

(async () => {
  const eventBus = await EventBus.getInstance()
  eventBus.stanConnection.on('connect', registerCommandHandlers)
})()

Could not find a suitable solution for this particular use case.

[I'm pretty sure this issue goes here, and not with prettier/prettier-eslint, but please let me know otherwise]

When using both prettier/prettier-eslint and prettier-eslint-config-prettier, ESLint's Autofix-On-Save converts hex values to uppercase automatically, and then complains that they aren't lowercase, with e.g. Replace `FFFFFF` with `ffffff` (prettier/prettier).

Using ESLint VSCode Plugin, with { "eslint.autoFixOnSave": true }, and the following configs:

.eslintrc

{
	"env": {
		"browser": true,
		"node": true
	},
	"extends": [
		"airbnb",
		"plugin:promise/recommended",
		"plugin:unicorn/recommended",
		"plugin:prettier/recommended",
		"prettier/react"
	],
	"plugins": ["import", "promise", "unicorn"],
	"rules": {
		"prettier/prettier": "error",
		"quotes": ["error", "backtick"],
		"no-console": "off",
		"no-plusplus": "off",
		"prefer-const": "error",
		"prefer-template": "error",
		"import/first": "off",
		"unicorn/filename-case": "off",
		"radix": "off",
		"import/prefer-default-export": "off",
		"no-use-before-define": "off",
		"no-underscore-dangle": "off",
		"class-methods-use-this": "off"
	}
}

.prettierrc

{
	"printWidth": 72,
	"tabWidth": 4,
	"useTabs": true,
	"semicolons": true,
	"singleQuote": false,
	"trailingComma": "es5",
	"bracketSpacing": true,
	"arrowParens": "always"
}

https://github.com/gajus/eslint-plugin-flowtype/

Rule provided by eslint-plugin-react used by eslint-config-standard.

As specified by https://prettier.io/docs/en/eslint.html I used

{
  "extends": ["plugin:prettier/recommended"]
}

with

  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-eslint": "^10.0.1",
    "babel-preset-flow": "^6.23.0",
    "eslint": "^5.12.1",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-config-prettier": "^3.6.0",
    "eslint-plugin-flowtype": "^3.2.1",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-prettier": "^3.0.1",
    "flow-bin": "^0.91.0",
    "flow-typed": "^2.5.1",
    "prettier": "1.16.0"
  }

and eslintrc

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "parser": "babel-eslint",
  "plugins": ["flowtype"],
  "extends": [
    "plugin:prettier/recommended",
    "plugin:flowtype/recommended",
    "prettier/babel",
    "prettier/flowtype"
  ],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "rules": {
    "indent": ["error", "tab"],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "flowtype/no-types-missing-file-annotation": 0
  }
}

The problem is that eslint's indent rule expects a tab and prettier's recommended configuration expects two spaces. This leads to a conflict. To be clear, the eslint website specifies only the use of "extends": ["plugin:prettier/recommended"] only. When removing this and using prettier extension with airbnb it works just fine.

It still gives me formatting errors, even though I thought I'd followed all the instructions:

/Users/stian/src/FROG/frog/imports/ui/Activities.jsx
  39:9  error  Missing parentheses around multilines JSX  react/jsx-wrap-multilines

Here is my entire .eslintrc file (many of the items should be unnecessary with this config

{
	'plugins': ['flowtype', 'prettier'],
	"globals": {
		"window": true
	},
	'rules': {

		'import/extensions': 'off',
		'import/no-extraneous-dependencies': 'off',
		'import/no-unresolved': 'off',
		'no-underscore-dangle': 'off',
		'no-unused-vars': ["error", { "varsIgnorePattern": "_" }],
		'import/prefer-default-export': 'off',
		'prefer-template': 'off',
		'react/prop-types': 'off',
		'react/no-multi-comp': 'off',
		'jsx-a11y/href-no-hash': 'off',
		"react/jsx-filename-extension": 'off',
		'react/jsx-closing-bracket-location': 'off',
		'react/jsx-indent-props': 'off',
		'react/jsx-indent': 'off',
		'no-return-assign': 'off',
		'no-throw-literal': 'off',
		'no-use-before-define': 'off',
		'no-param-reassign': ['error', { 'props': false }],
		"prettier/prettier": ['warn', {'singleQuote': true}],
		'no-nested-ternary': 'off',
		'no-constant-condition': 'off'

	},
	"parserOptions": {
		"ecmaVersion": 2016,
		"sourceType": "module",
		"ecmaFeatures": {
			"jsx": true
		}
	},
	"env": {
		"es6": true,
		"node": true
	},
	'extends': ['airbnb', 'plugin:flowtype/recommended', 'prettier', 'prettier/react' ]
}

Thank you!

I have some files that are not TypeScript, but Prettier has no problem formatting them. When I install eslint-config-prettier, ESLint also is not telling me about syntax errors on TypeScript syntax. I'd like for ESLint to tell me that any Type-related stuff is a syntax error in js or jsx files.

Prettier can emit this:

function test() {
  const {quantity = quantities[cartType], delta = 0} = changes[
    cartType
  ] || {};
}

which seems to violate the standard/computed-property-even-spacing rule.

ESLint 5.7 added the allowIndentationTabs option. This might turn the rule from a special rule to a validatable one.

https://eslint.org/blog/2018/10/eslint-v5.7.0-released

eslint gives me the error: Cannot find module 'eslint-config-prettier/react' with the following config, anything I'm doing wrong?

{
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "prettier",
      "prettier/react"
    ],
    "parser": "babel-eslint",
    "plugins": [
        "react",
        "prettier"
    ],
    "parserOptions": {
      "ecmaVersion": 2016,
      "sourceType": "module",
      "ecmaFeatures": {
        "jsx": true
      }
    },
    "env": {
      "es6": true,
      "node": true
    },
    "globals": {
        "localStorage": true,
        "ga": true,
        "fetch": true,
        "window": true,
        "document": true,
        "Raven": true,
        "ENV": true
    },
    "rules": {
        "prettier/prettier": ["error", {"trailingComma": true, "singleQuote": true}],
        "no-console": 0,
        "react/sort-comp": [1, {
            "order": [
                "type-annotations",
                "static-methods",
                "lifecycle",
                "everything-else",
                "render"
            ]
        }]
    }
}