Eslint with Prettier. Unable to prevent eslint-config-prettier line-length errors

Question

See Edits at bottom

I have a JavaScript file that I am linting with Eslint. I am using Prettier to format the code.

My personal choice on this file is to increase the line-length beyond the 80 chars that Prettier has as a default to 2000 chars.

So I have a prettierrc.config.js:

module.exports = {
  printWidth: 2000
};

Which works when I format the code, and I have a .eslintrc.js

module.exports = {
  "parserOptions": {
    "ecmaVersion": 6
  },
  "env": {
    "es6": true,
    "browser": true
  },
  "extends": [
    "eslint-config-airbnb-base",
    "eslint-config-prettier"
  ],
  "plugins": [
    "eslint-plugin-import",
    "eslint-plugin-prettier"
  ],
  "rules": {
    "prettier/prettier": ["error", {}],
    "max-len": ["error", {"code": 2000, "ignoreUrls": true}],
    "linebreak-style": 0,
    "no-use-before-define": ["error", { "functions": false, "classes": false }],
    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
    "no-underscore-dangle": 0,
    "import/no-amd": 0,
    "import/no-dynamic-require": 0,
  },
  "globals": {
    "define": true
  }
};

Everytime I lint the file, it complains about the length of certain lines.

Edit for clarity:

I am using eslint v4.19.1 and prettier 1.10.2. Config files are being read and used correctly.

Edit for additional information 2018/05/30

I have discovered the distinction in the lint errors. Max-len is working correctly, and the value I have provided as an override in rules is being respected.

What the prettier config has a problem with is the length of some of my conditional expressions. I can see it is wanting to put them on new lines with additional white space. This is now the config I am looking to override. it seems to be a different rule to max-len. The example below is a conditional expression with a length of 60 characters and it is triggering a lint error. The whole line is only 84 characters long (* to represent spaces).

**********} else if (firstSessionDate > this.sessionsData[i].SessionStartDateTime) {

Lucas Lucas · Accepted Answer · 2018-04-23T13:06:08

Based on ESLint's docs, anything you include in rules take precedence over the rules inherited from extends, meaning you can change the rule's behavior partially or completely.

That means the max-len rule you specified is picked up over the max-len rule from eslint-config-prettier. You have to delete this rule from your config file and ESLint will stop complaining.

Eslint with Prettier. Unable to prevent eslint-config-prettier line-length errors

1 Answers