Bug (?) : prettier and eslint rules indent conflicting on interpolated strings

StephanePiresPro commented 4 years ago

Hi,

I'm actually implementing prettier inside projects. Until now everything has been fine, but i have recently encounter an issue.

Some files using interpolated string are not indented properly.

Files (prettier config, eslint config, package.json, etc..)

//package.json
{
"name": "prettier-template-pb",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"eslint": "^5.13.0",
"prettier": "1.19.1"
},
"dependencies": {
"eslint-config-prettier": "^6.11.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-node": "^8.0.1",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0"
}
}

//.prettierrc.json
{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "quoteProps": "consistent",
  "printWidth": 120,
  "arrowParens": "always"
}

//.eslintrc.json
{
    "extends": [
    "standard",
    "prettier/standard",
    "plugin:prettier/recommended"
],
    "env": {
    "browser" : true,
        "node": true
},
    "rules": {
    "eqeqeq": ["error", "always"],
        "object-curly-spacing"  : [2, "always"],
        "no-console"            : 2,
        "prefer-const"          : 2,
        "no-var"                : 2,
        "comma-dangle"          : ["error", "always-multiline"],
        "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
        "indent": ["error", 2, {
        "SwitchCase": 1,
        "VariableDeclarator": 1,
        "outerIIFEBody": 1,
        "MemberExpression": 1,
        "CallExpression": {
            "arguments": 1
        },
        "FunctionDeclaration": {
            "parameters": 1,
            "body": 1
        },
        "FunctionExpression": {
            "parameters": 1,
            "body": 1
        }
    }],
        "no-unused-vars": "off"
}
}

//index.js
// File i try to format with eslint --fix
//This file is a placeholder, it's not intended to run
/* Config */
import { SOMEIMPORT_THREE, SOMEIMPORT_FOUR } from '../../../../../config/template-strings'

/* Common */
import { SOMEIMPORT } from '../../../../../common/string-transform/key/key-to-class-string'

export function someFunction() {
  // DO
  const classStringDOItems = 'something'

  // Parent
  const parentRangeKeys = 'something'
  const parentKeysParamNumberString = 'something'
  const parentKeysParamNumberStringWithThis = 'something'

  // Child
  const childInstanceStringDO = 'something'
  const childClassStringDO = 'something'

  // Range
  const rangeKeyUppercase = 'something'
  const instanceRangeKey = 'something'

  return `
export default class ${classStringDOItems} extends ${SOMEIMPORT_THREE.BASE_DO} {
  ${SOMEIMPORT_FOUR.CONSTRUCTOR} (appManager${parentKeysParamNumberString}) {
    super(appManager)${parentRangeKeys
      .map(
      (key) => `
    this.${key} = ${key}`
      )
    .join('')}
    this.${SOMEIMPORT.DO_ITEMS.ITEM_KEYS} = []
  }

  get ${SOMEIMPORT.DO.ITEM_KEYS} () {
    return this.${SOMEIMPORT.DO_ITEMS.ITEM_KEYS}
  }

  ${SOMEIMPORT_FOUR.INIT} () {
    const source = ${SOMEIMPORT_THREE.VAR_DIMS}.${rangeKeyUppercase}.${SOMEIMPORT.SOURCE}
    let enumKeys

    if (source) {
      const minIndex = source.${SOMEIMPORT.ORDER}.indexOf(${SOMEIMPORT_THREE.VAR_DIMS}.${rangeKeyUppercase}.${
    SOMEIMPORT.MIN
})
      const maxIndex = source.${SOMEIMPORT.ORDER}.indexOf(${SOMEIMPORT_THREE.VAR_DIMS}.${rangeKeyUppercase}.${
  SOMEIMPORT.MAX
})
      enumKeys = source.${SOMEIMPORT.ORDER}.slice(minIndex, maxIndex + 1)
    } else {
      enumKeys = []
      for (let i = ${SOMEIMPORT_THREE.VAR_DIMS}.${rangeKeyUppercase}.${SOMEIMPORT.MIN}; i <= ${
    SOMEIMPORT_THREE.VAR_DIMS
}.${rangeKeyUppercase}.${SOMEIMPORT.MAX}; i++) {
        enumKeys.push(i.toString())
      }
    }

    this.${SOMEIMPORT.DO_ITEMS.ITEM_KEYS} = []

    for (const ${instanceRangeKey} of enumKeys) {
      const ${SOMEIMPORT(childInstanceStringDO)} = new ${childClassStringDO}(this.${
    SOMEIMPORT.APP_MANAGER
}${parentKeysParamNumberStringWithThis}, ${instanceRangeKey})
`
}

Terminal Output

Using eslint -- fix index.js output

Repository to reproduce the issue

I'm using eslint-config-prettier in order to disable the eslint rules that are conflicting with prettier. But it seems that it's not working for some interpolated strings

Expected behavior

I'm expecting prettier to format everything without conflicting with eslint rules indent

Thanks for reading :smiley:

lydell commented 4 years ago

Hi!

indent conflicts with Prettier – don’t use it. Remove it from your config.

Use the CLI helper tool to find other unnecessary/conflicting rules in your config. Remember, "extends" can never win over "rules".

StephanePiresPro commented 4 years ago

Ok thanks a lot everything seems to be working now :+1:

I closed this issue

sethidden commented 3 years ago

If anyone has the same problem: This plugin disables rules in eslint and makes prettier take over (as lydell said above) If you have something set in .eslintrc.js in the "rules" property, it cannot be overwritten by this plugin.

For me, in vscode I had these lines:

    disabledWhen(
      ({ something }) =>
        something.condition ||
        something.condition1 <---- 'eslint(comma-dangle) Missing trailing semicolon)
    ),

and when I added the semicolon, the eslint(comma-dangle) warning turned into a eslint(prettier/prettier) warning saying "Remove trailing comma" or something like that. So it was an endless loop - I have autofix on save so when I pressed CTRL+S the warnings would toggle between comma-dangle and prettier/prettier

For me, it was the comma-dangle rule in eslint in the "rules" section. I just removed it from .eslintrc.js and added the (almost) equivalent trailingCommas: 'all' in .prettierrc

prettier / eslint-config-prettier