Prettier in Javascript is forcing variable Definition onto next line

Question

I am using typescript, prettier and eslint and I'm trying to define a multiline string variable like so:

const text = 'Some really long interesting text' + 
    ' some more really really long text' +
    ' and some even more really long text';

However, when I run eslint with the fix option, prettier is forcing my code to look like this.

const text =
    'Some really long interesting text' +
    ' some more really long interesting text' +
    ' and some even more really long text';

I would prefer the + operators to be before the text but I understand that prettier won't let me do that due to it's opinion. Fine. But I don't understand the variable definition starting on the next line. I've never seen the variable definition start on the next line before.

Can anyone help me answer either of these questions:

1. Where this came from? I've never seen this standard before and how did Prettier decide to adopt it? The documentation about this is rather bleak.
2. Is there anyway I can override it?

Here's my .eslintrc.js:

module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
        sourceType: 'module', // Allows for the use of imports
    },
    plugins: ['@typescript-eslint'],
    extends: [
        'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
        'plugin:prettier/recommended',
        'prettier/@typescript-eslint',
    ],
    rules: {
        // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
        // e.g. "@typescript-eslint/explicit-function-return-type": "off",
        '@typescript-eslint/ban-ts-comment': 'off'
    },
};

And here is my .prettierrc.js:

module.exports = {
    semi: true,
    trailingComma: "es5",
    singleQuote: true,
    printWidth: 120,
    tabWidth: 4
};

Thank you!

Answer 1

You may not be able to change that, since prettier plugin disables all its conflicting rules with eslint.

You may want to try prettier-eslint instead. It formats the code first via prettier and then passes to eslint.

This formats your code via prettier, and then passes the result of that to eslint --fix. This way you can get the benefits of prettier's superior formatting capabilities, but also benefit from the configuration capabilities of eslint.

Add eslint operator-linebreak rule and --fix should do the work.

Rule

'operator-linebreak': ['error', 'before']

Where this came from? I've never seen this standard before and how did Prettier decide to adopt it? The documentation about this is rather bleak.

It is not a standard. It is a style that Prettier has adopted. Line breaks are accepted in javascript. Line breaks are ignored until

• when the next line starts with code that breaks the current one (code can spawn on multiple lines)
• when the next line starts with a }, closing the current block
• when the end of the source code file is reached
• when there is a return statement on its own line
• when there is a break statement on its own line
• when there is a throw statement on its own line
• when there is a continue statement on its own line

Source: Javascript Automatic Semicolons

Also see Why Prettier