Plugin support?

[kachkaev]

I'm curious if there is anything missing in prettier-atom to support plugins. After locally installing prettier and prettier-plugin-elm (which I developed myself 😃 ), the plugin works from the command line, but not in the editor. In particular, pressing control+option+f while editing a markdown file, does not format ```elm code blocks. Running yarn prettier same-file.md from the terminal does this job perfectly.

What could be causing the issue? Can it be that the way prettier is spawned does not let it search for prettier-plugin-* in node_modules?

Prettier: Debug

Atom version: 1.24.1
prettier-atom version: 0.52.0
prettier version: 1.11.1
prettier-eslint version: 8.8.1
prettier-atom configuration: {
  "formatOnSaveOptions": {
    "enabled": true,
    "isDisabledIfNoConfigFile": true,
    "showInStatusBar": true,
    "respectEslintignore": true,
    "excludedGlobs": [],
    "whitelistedGlobs": [],
    "isDisabledIfNotInPackageJson": false
  },
  "silenceErrors": true,
  "useEditorConfig": false,
  "useEslint": false,
  "useStylelint": false,
  "prettierOptions": {
    "singleQuote": false,
    "bracketSpacing": true,
    "semi": true,
    "useTabs": false,
    "jsxBracketSameLine": false,
    "printWidth": 80,
    "tabWidth": "auto",
    "trailingComma": "none",
    "parser": "babylon",
    "arrowParens": "avoid"
  },
  "prettierEslintOptions": {
    "prettierLast": false
  },
  "scopes": {
    "javascript": [
      "source.js",
      "source.jsx",
      "source.js.jsx",
      "source.babel",
      "source.js-semantic",
      "text.html.basic",
      "text.html.vue"
    ],
    "typescript": [
      "source.ts",
      "source.tsx",
      "source.ts.tsx"
    ],
    "css": [
      "source.css",
      "source.less",
      "source.css.less",
      "source.scss",
      "source.css.scss",
      "source.css.postcss"
    ],
    "json": [
      "source.json"
    ],
    "graphQl": [
      "source.graphql"
    ],
    "markdown": [
      "source.md",
      "source.gfm",
      "text.md"
    ],
    "vue": [
      "text.html.vue"
    ]
  }
}

UPD: Same issue in prettier/prettier-vscode#395 (even the same id 😄)

[olsonpm]

wanna push a sample github repo that reproduces your issue? Mine formatted your hello world content just fine.

[olsonpm]

ha nevermind I didn't look at the output correctly. It's gotta do with the executable directory. Note when you do prettier elm.md the plugin isn't grabbed, but if you do npx elm.md it does (I assume yarn <pkg> <args> is doing the same thing as npx)

Anyway, I'd first take this to prettier. Seems to me which executable is used shouldn't matter - what should matter is the filepath being formatted.

example calls from my machine:

❯ npx prettier elm.md    # <--- npx formats as expected
# Hello world in Elm

\`\`\`elm
import Html exposing (text)


main =
    text "Hello, World!"
\`\`\`




❯ prettier elm.md    # <--- global prettier doesn't
# Hello world in Elm

\`\`\`elm
import  Html exposing     (text)

main = text      "Hello, World!"
\`\`\`

[kachkaev]

There is an upstream problem with detecting global plugins indeed, however, I'm not sure this is the same issue. My expectation is that when prettier and prettier-plugin-XYZ are installed locally, the plugin should successfully pick this bundle and behave exactly the same as ./node_modules/.bin/prettier ./path/to/file.md (which works). However, this does not seem to be happening.

Can it be that a locally installed prettier is given a wrong cwd when plugin launches it? That's the only differences I can think of compared to ./node_modules/.bin/prettier ./path/to/file.md.

[olsonpm]

but we don't search for the plugin, we just tell prettier the filepath and contents. It does the rest. How prettier finds what plugins to apply is up to prettier. Seems to me you first need to understand how prettier finds and applies the plugins.

[olsonpm]

here's another failing test

Edit: Btw prettier-atom uses prettier's 'format' api like below. We don't fire off the cli

// package.json

  "devDependencies": {
    ...
    "prettier": "^1.11.1",
    "prettier-plugin-elm": "^0.1.2"
    ...
  }

// test.js

const prettier = require('prettier')

const content = `
\`\`\`elm
import  Html exposing     (text)

main = text      "Hello, World!"
\`\`\`
`

console.log(prettier.format(content))

outputs

import  Html exposing     (text)

main = text      "Hello, World!"
```;

[kachkaev]

Here's how the plugins are searched:

Plugins are automatically loaded if you have them installed in your package.json. Prettier plugin package names must start with @prettier/plugin- or prettier-plugin- to be registered.

https://prettier.io/docs/en/plugins.html#using-plugins

That is true when I call ./node_modules/.bin/prettier ./path/to/file.md or yarn prettier ./path/to/file.md in a project that has prettier and prettier-plugin-x – all works as advertised. However, I'm not sure why things are not working in your example above.

🤔

[olsonpm]

might be time to file a prettier issue :)

[kachkaev]

So test.js is a file in the same project where you have prettier and prettier-plugin-x? It just sits in the root, just like package.json? I'll try to reproduce.

[olsonpm]

/test.js
/package.json