Prettier-vscode: `printWidth` not enforced on save

[philsinatra]

Today, when saving a document, prettier is not respecting the printWidth value in my application settings.

I added a .prettierrc file to my project to try to force the desired (default) printWidth of 80:

{
  "printWidth": 80,
  "indent": 2
}

I setup rulers at 80 and 120 to test, and 120 is being used for all files.

[philsinatra]

More details: appears to be specifically related to using Airbnb recommended eslint configuration.

// extends: 'airbnb',
  extends: 'eslint:recommended',

Switching back to eslint.recommended causes the format on save to work as expected. Is there a config around this?

[CiGit]

Using eslintIntegration makes your settings nearly useless (fallback).
printWidth is inferred from your eslint config file. I think it's from max-len

[philsinatra]

That's what I thought. Using the max-len in the eslint config generates the error message for long lines, but vscode prettier does not use this value for the formatOnSave feature. Something about the AirBnb settings is forcing prettier to use 120 instead of my preferred 80.

module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true
    },
    // "extends": "eslint:recommended",
    extends: "airbnb",
    parserOptions: {
        sourceType: "module"
    },
    rules: {
        "comma-dangle": 0,
        "consistent-return": 0,
        "func-names": 0,
        "linebreak-style": ["error", "unix"],
    'max-len': [1, {
      'code': 80,
      'tabWidth': 2
    }],
        "no-console": 0,
        "no-unused-vars": [1, {
            argsIgnorePattern: "^err"
        }],
        import: 0,
        indent: 0,
        quotes: ["error", "single"],
        semi: ["error", "always"]
    }
};

[CiGit]

You mean you have a different output between a Format Document action and a formatOnSave ?

[philsinatra]

No, my issue is formatOnSave wraps my code @120 if I extends: "airbnb", but it wraps @80 if I extends: "eslint:recommended". I want to use Airbnb's style guide, but formatOnSave to 80 characters, not 120.

[CiGit]

I think you have to add: "max-len": ["error", 80]

[philsinatra]

I've tried using both error and warning for the max-length rule, either way the result is the same. formatOnSave always wraps @120 and the linter reports the error/warning message.

[CiGit]

I mean
'max-len': [1, { 'code': 80, 'tabWidth': 2 }]
vs
"max-len": ["error", 80]

I'm sure this worked in the past at least. Never tried myself with _advanced_ configuration

[philsinatra]

Warning message displays in the lint report, but formatOnSave still wraps @120.

  10:1  warning  Line 10 exceeds the maximum line length of 80  max-len
  56:1  warning  Line 56 exceeds the maximum line length of 80  max-len

[CiGit]

@RobinMalfait may know better than I do. :disappointed:

[philsinatra]

It seems integrating eslint-config-prettier as the last config gets formatOnSave working with the max-len @80.

[Clement-Bresson]

I've noticed that sometimes some rules from airbnb rules prevent prettier from formating.

For example, try setting "implicit-arrow-linebreak": "off" in your eslint config rules. This one was a problem for me for oneline functions.

From what I've seen same problem occurs with other rules. Try checking which airbnb rule may be taking precedence and preventing prettier from formating.

[aecorredor]

For me, I still can't get this to work. It still wraps at 120.

This is my .eslintrc.js:

module.exports = {
  extends: [
    'airbnb',
    'airbnb/hooks',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    project: `${__dirname}/tsconfig.eslint.json`,
  },
  plugins: ['@typescript-eslint', 'prettier'],
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      typescript: {},
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
  rules: {
    '@typescript-eslint/camelcase': 0,
    '@typescript-eslint/explicit-function-return-type': 0,
    '@typescript-eslint/no-use-before-define': 0,
    'consistent-return': 0,
    'import/prefer-default-export': 0,
    'max-len': ['error', { code: 80, ignoreUrls: true }],
    'no-console': 0,
    // 'acc' is disabled because that is the convention we use in reducer
    // 'req' is disabled because we can attach props to an express request
    // functions, and that value can usually be safely mutated.
    'no-param-reassign': [
      'error',
      { props: true, ignorePropertyModificationsFor: ['acc', 'req'] },
    ],
    'prettier/prettier': 'error',
    'react/jsx-curly-newline': 0,
    'react/jsx-filename-extension': 0,
    'react/jsx-one-expression-per-line': 0,
    'react/jsx-props-no-spreading': 0,
    'react/jsx-wrap-multilines': 0,
    'react/prop-types': 0,
    'react/state-in-constructor': 0,
  },
};

I see the error reported by eslint, but prettier does not format files accordingly.

I've tried what you guys have suggested with no luck.

[ntotten]

I will need somebody to provide a sample project with all the settings, etc. for me to reproduce. If you can do that I will investigate, but I expect that this is an issue with either prettier-eslint and not this extension.

[SleepyWeirdo]

I've had the same problem and fixed it by changing configuration of eslintrc:
"extends": [ "prettier", "prettier/react", "airbnb" ],

Instead I placed prettier as a first extention and it started working again.

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.