electrovir/prettier-plugin-multiline-arrays

How to configure in a prettierrc.json

gee4vee opened this issue · 4 comments

gee4vee commented

I have a simple prettier config with only this plugin:

{
  "trailingComma": "none",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "consistent",
  "printWidth": 140,
  "plugins": ["prettier-plugin-multiline-arrays"],
  "multilineArrayWrapThreshold": 1
}

However, the wrapping isn't happening on an array when saving (formatter is set to run on save). Am I missing something? Here is my package.json:

{
  "name": "blueprint4ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "test",
    "test:watch": "jest --watch",
    "lint": "npx eslint ./",
    "lint:watch": "npx esw --ext .js,.ts ./app --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@types/jest": "^27.4.1",
    "@typescript-eslint/eslint-plugin": "^5.16.0",
    "@typescript-eslint/parser": "^5.16.0",
    "babel-loader": "^8.2.3",
    "babel-preset-env": "^1.7.0",
    "eslint": "^8.11.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-watch": "^8.0.0",
    "jest": "^27.5.1",
    "prettier": "2.6.0",
    "prettier-plugin-multiline-arrays": "^0.0.4",
    "ts-jest": "^27.1.3",
    "typescript": "^4.6.2"
  }
}
electrovir commented

Likely a bug with this plugin. Could you please provide a minimal snippet of code that isn't getting formatted? Then I will troubleshoot.

gee4vee commented

Here it is. I figure something must be wrong in my install or config because it's pretty basic. I installed the plugin with yarn.

const greeting = 'Hello World!';
alert(greeting);

const myArray = [
  'a',
  'b',
  'c'
];
electrovir commented

I think you're right in that it's a config issue. I've had many issues with getting Prettier to load plugins in the past so this is not surprising...

Things I can think of to try:

  • Instead of prettier-plugin-multiline-arrays in plugins, use a relative path to the plugin. So something like ./node_modules/prettier-plugin-multiline-arrays.
  • If you're using VS Code, you can view the Prettier output to see if anything obvious is going wrong.
    1.Press ctrl+shift+p in VS Code.
    2. Type >View: Toggle Output (the > will already be there).
    3. You'll see a dropdown in the top right of new pane that popped up. It probably defaults to Tasks. Change this to Prettier.
    4. Right click on the output text and click Clear Output (this just helps remove clutter).
    5. Trigger a format by saving a file.
    6. See if any errors are printed.

I actually use a .js file for my Prettier config to workaround plugin pathing issues. You can see mine here, though it's probably much more complex than you need: https://github.com/electrovir/prettier-plugin-multiline-arrays/blob/b1fb14403fb94cd1a25e8e0ac6e72e982bcdcb79/.prettierrc.js

gee4vee commented

Using the relative path with node_modules worked. Thanks so much!

  • 🎉1