[v4 beta] incorrect formatting of destructured object

[the-vampiire]

Describe the bug

with this code:

const {
  SERVICE_NAME_API_BASE_URL,
  SERVICE_NAME_API_PORT,
  SERVICE_NAME_TOKEN,
} = process.env;

previously it was left in this multi-line destructure

after using the v4 beta it is now fixing to:

const { SERVICE_NAME_API_BASE_URL, SERVICE_NAME_API_PORT, SERVICE_NAME_TOKEN } =
  process.env;

for comparison here is how it looks unformatted (runs to column 94)

const { SERVICE_NAME_API_BASE_URL, SERVICE_NAME_API_PORT, SERVICE_NAME_TOKEN } = process.env;

Expected behavior
expected to preserve previous multi-line destructure format

Versions (please complete the following information):

• Visual Studio Code: 1.64.2
• Node: 17.3.1
• Package Manager: npm 8.3.0
• prettier-eslint: ^13.0.0 (previously was using 10.1.0 but issue happens in both)
• prettier: ^2.4.1
• eslint: ^7.32.0

System Specifications (please complete the following information):

• OS: macOS Monterey 12.1
• Processor: Apple M1 Max
• RAM Size: 64GB

Additional context

• i installed the deps defined in the v4 beta readme prerequisites
• there was no info about prettier-eslint so i kept 10.1.0. however, after seeing this issue i tried upgrading to latest (13.0.0) and the issue persists
• in another file with a similar destructure (pulling out env vars from process.env) it does preserve the multi-line. in that file it un-formatted it runs to column 100

here are my configs for reference

.prettierrc

{
  "singleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always"
}

.eslintrc.js

module.exports = {
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "tsconfigRootDir": __dirname,
    "project": "./tsconfig.json"
  },
  "env": {
    "es6": true,
    "jest": true
  },
  "ignorePatterns": [
    "node_modules",
    "build",
    "coverage"
  ],
  "plugins": [
    "import",
    "eslint-comments",
    "jest"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:eslint-comments/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "prettier",
    "prettier/@typescript-eslint",
    "plugin:jest/recommended",
    "plugin:jest/style"
  ],
  "globals": {
    "BigInt": true,
    "console": true,
    "WebAssembly": true
  },
  "rules": {
    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "return" }],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "eslint-comments/disable-enable-pair": [
      "error",
      {
        "allowWholeFile": true
      }
    ],
    "import/order": [
      "error",
      { "newlines-between": "always", "alphabetize": { "order": "asc" } }
    ],
    "eslint-comments/no-unused-disable": "warn",
    "jest/valid-title": "off",
  }
}

[idahogurl]

@the-vampiire I ran your code through the CLI Engine of prettier-eslint and got the same effect. The issue is not with the extension. It's only doing what prettier is telling it to do. See prettier/prettier#2550

I did find this plugin that may get you closer to what you desire. https://www.npmjs.com/package/eslint-plugin-newline-destructuring or you could write your own plugin.

Second, I was able to get the rules you mentioned in #27 (comment) to work. The value you set was invalid for ESLint. By running eslint --print-config .eslintrc.js I was able to figure this out.

Third, I removed prettier:@typescript/eslint from plugins. That option is not longer supported in v8 of eslint-config-prettier (see https://github.com/prettier/eslint-config-prettier/blob/main/CHANGELOG.md#version-800-2021-02-21)

Here is the fixed and working ESLint config.

.eslintrc.js

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: "./tsconfig.json",
  },
  env: {
    es6: true,
    jest: true,
  },
  ignorePatterns: ["node_modules", "build", "coverage"],
  plugins: ["import", "eslint-comments", "jest"],
  extends: [
    "eslint:recommended",
    "plugin:eslint-comments/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "prettier",
    "plugin:jest/recommended",
    "plugin:jest/style",
  ],
  globals: {
    BigInt: true,
    console: true,
    WebAssembly: true,
  },
  rules: {
    "padding-line-between-statements": [
      "error",
      { blankLine: "always", prev: "*", next: "return" },
    ],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "eslint-comments/disable-enable-pair": [
      "error",
      {
        allowWholeFile: true,
      },
    ],
    "import/order": [
      "error",
      { "newlines-between": "always", alphabetize: { order: "asc" } },
    ],
    "eslint-comments/no-unused-disable": "warn",
    "jest/valid-title": "off",
    "import/order": [
      "error",
      {
        "newlines-between": "always",
        alphabetize: {
          order:
            "asc" /* sort in ascending order. Options: ['ignore', 'asc', 'desc'] */,
          caseInsensitive: false /* ignore case. Options: [true, false] */,
        },
      },
    ],
    "sort-imports": [
      "error",
      {
        memberSyntaxSortOrder: ["none", "all", "single", "multiple"],
      },
    ],
  },
};

[the-vampiire]

wow @idahogurl thank you so much for this. it had been driving me nuts. you are a wizard!

[the-vampiire]

i tried out the plugin and its almost exactly what i needed. unfortunately it does some funky stuff with indentation that i cant figure out:

goes from this

const {
  SERVICE_NAME_API_BASE_URL,
  SERVICE_NAME_API_PORT,
  SERVICE_NAME_TOKEN,
} = process.env;

to this ?

const {
SERVICE_NAME_API_BASE_URL,
SERVICE_NAME_API_PORT,
SERVICE_NAME_TOKEN
} =
  process.env;

what a bummer. i created an issue in the plugin repo to see if they can help me sort it out. thank you again for your help

[the-vampiire]

@idahogurl thank you for that plugin suggestion. after working with the maintainer i was able to get the perfect (imo) settings! in case anyone else needs this

issue thread

final .eslintrc.js

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: "./tsconfig.json",
  },
  env: {
    es6: true,
    jest: true,
  },
  ignorePatterns: ["node_modules", "build", "coverage", ".eslintrc.js", "jest.config.js"],
  plugins: ["import", "eslint-comments", "eslint-plugin-newline-destructuring"],
  extends: [
    "eslint:recommended",
    "plugin:eslint-comments/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "prettier",
  ],
  globals: {
    BigInt: true,
    console: true,
    WebAssembly: true,
  },
  rules: {
    "padding-line-between-statements": [
      "error",
      { blankLine: "always", prev: "*", next: "return" },
    ],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "eslint-comments/disable-enable-pair": [
      "error",
      {
        allowWholeFile: true,
      },
    ],
    "eslint-comments/no-unused-disable": "warn",
    "jest/valid-title": "off",
    "import/order": [
      "error",
      {
        "newlines-between": "always",
        groups: ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
        alphabetize: {
          order: "ignore",
          caseInsensitive: false
        },
      },
    ],
    "newline-destructuring/newline": [
      "error",
      {
        items: 2,
      }
    ],
    "operator-linebreak": [
      "error",
      "after",
      { overrides: { "=": "none" } }
    ],
    "no-multi-spaces": "error",
    "indent": "off",
    "@typescript-eslint/indent": ["error", 2]
  },
};

[davidmondok]

@the-vampiire did you get this to work with fixing on save in vscode?

Once I add 'prettier/prettier': ['error'], to my eslint rules destructured objects are changed from inline to multiline and vice versa on every save and there's always an error, no matter the styling.

[the-vampiire]

@davidmondok yes i did

.eslintrc.js

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: "./tsconfig.json",
  },
  env: {
    es6: true,
    jest: true,
  },
  ignorePatterns: ["node_modules", "build", "coverage", ".eslintrc.js", "jest.config.js"],
  plugins: ["import", "eslint-comments", "eslint-plugin-newline-destructuring"],
  extends: [
    "eslint:recommended",
    "plugin:eslint-comments/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:import/typescript",
    "prettier",
  ],
  globals: {
    BigInt: true,
    console: true,
    WebAssembly: true,
  },
  rules: {
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unused-vars": "off",
    "no-unused-vars": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "padding-line-between-statements": [
      "error",
      { blankLine: "always", prev: "*", next: "return" },
    ],
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "eslint-comments/disable-enable-pair": [
      "error",
      {
        allowWholeFile: true,
      },
    ],
    "eslint-comments/no-unused-disable": "warn",
    "jest/valid-title": "off",
    "import/order": [
      "error",
      {
        "newlines-between": "always",
        groups: ["builtin", "external", "internal", "parent", "sibling", "index", "object", "type"],
        alphabetize: {
          order: "ignore",
          caseInsensitive: false
        },
      },
    ],
    "newline-destructuring/newline": [
      "error",
      {
        items: 2,
      }
    ],
    "operator-linebreak": [
      "error",
      "after",
      { overrides: { "=": "none" } }
    ],
    "no-multi-spaces": "error",
    "indent": "off",
    "@typescript-eslint/indent": ["error", 2]
  },
};

.prettierrc

{
  "singleQuote": false,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always"
}

dev deps

  "devDependencies": {
    "@types/node": "^16.11.7",
    "@typescript-eslint/eslint-plugin": "^5.0.1",
    "@typescript-eslint/parser": "^5.0.1",
    "eslint": "^7.3.2",
    "eslint-config-prettier": "^8.0.0",
    "eslint-plugin-eslint-comments": "^3.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jest": "^25.2.4",
    "eslint-plugin-newline-destructuring": "^1.0.1",
    "prettier": "^2.4.1",
    "prettier-eslint": "^13.0.0",
    "prettier-eslint-cli": "^5.0.1",
    "ts-jest": "^27.0.7",
    "typescript": "^4.4.4"
  },

[davidmondok]

@the-vampiire Thanks for the quick reply! I arrived at the same solution yesterday 😄 Don't update to eslint 8 yet btw because prettier-eslint-cli is not yet compatible with it. We're waiting for this PR prettier/prettier-eslint-cli#431

[the-vampiire]

@davidmondok No problem. Yes it's delicate but I always bring those exact devdeps over to new projects.

Silly question but as a sanity check you are using the beta version of the extension right? And this is undocumented but I've found if you make any changes to packages (wrt linting) if I close out of vscode completely and reopen then they are activated.

What is your prettier/eslint extension output when you save?

[davidmondok]

@the-vampiire Exactly, I tried using the 5.0.1 Pre-Release version of Prettier ESLint but receive this output on every save Error: r is not a constructor which will pretty much mean the same as CLIEngine is not a constructor which I receive when running pretter-eslint in the terminal.

[the-vampiire]

@davidmondok Not sure what you mean by the prerelease version. Are we talking about the extension version? I just checked and the one I have installed is 4.0.0-beta

[the-vampiire]

hmm now i am not sure i even got this beta version lol. it is no longer in the beta instructions doc.

but anyways i tried switching to the "pre-release" version (v5.0.1) and i am still having it working:

• i am using the eslint/prettier configs shown above
• i am using the dev deps shown above
• i am using ESLint v2.2.2 extension
• i am (now) using Pretter ESLint v5.0.1
• VSCode v1.66.2 on macOS

by "it is working" i mean:

• invoking file format (i have it set to trigger on save) is working without error output
• running npm run fix (prettier-eslint "src/**/*.ts" --write) is working

some thoughts:

1. wipe out the node_modules
2. replace all eslint/ts/prettier devdeps with the ones i showed above
3. install
4. quit VSC and reopen

if it still doesnt work then maybe @idahogurl can help.