How to add Prettier JS as a formatter

How To
1

I have tried adding in a custom formatter for Javascript, using Prettier (http://prettier.io)

I installed prettier globally via npm
npm install -g prettier

In the preferences I added a new custom formatter for .jsx files.

Name: Prettier
Language: JSX
Formatter: Other / Generic Command Line Formatter

Executable To Use: C:\path\to\npm\node_modules\prettier\bin-prettier.js (Also tried standalone.js and index.js)
Command Line Arguments: write

When I try to format code I get a windows script host error dialog box pointing to line 169 char 2 of prettier index.js. Expected identifier, string or number.

I get the particular error is not anything to do with Komodo but I’m wondering if all my config is correct and if anyone else has had success setting up a custom formatter for Prettier?

2

@stereofx, Komodo can only run a binary in this context. I believe the binaries live in .../node_modules/.bin. Point to the Prettier binary that should be there.

That should get you closer.

  • Carey
3

@careyh thanks for the suggestion. Looks like Prettier’s binary just executes the JS index file, so same error - just thought I would let you know. I could add this to the feature ideas section.

4

That is what I’d expect it to do. What errors are you getting?

5

In Komodo here is the error output:

[2018-10-17 10:49:08,548] [ERROR] ko.formatters: Formatting failed
– EXCEPTION START –
[Exception… “Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [koIFormatter.format]” nsresult: “0x80004005 (NS_ERROR_FAILURE)” location: “JS frame :: chrome://komodo/content/formatters/formatters.js :: _formatViewWithFormatterAndContext :: line 135” data: no]

  • toString (function) 3 lines
  • message (string) ‘Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [koIFormatter.format]’
  • result (number) 2147500037
  • name (string) ‘NS_ERROR_FAILURE’
  • filename (string) ‘chrome://komodo/content/formatters/formatters.js’
  • lineNumber (number) 135
  • columnNumber (number) 0
  • inner (object) null
    | + data (object) null
    | + stack (string) ‘_formatViewWithFormatterAndContext@chrome://komodo/content/formatters/formatters.js:135:16
    formatVie’…477 chars
  • location (object) JS frame :: chrome://komodo/content/formatters/formatters.js :: _formatViewWithFormatterAndContext :: line 135
    | + QueryInterface (function) 3 lines
    | + language (number) 2
    | + languageName (string) ‘JavaScript’
    | + filename (string) ‘chrome://komodo/content/formatters/formatters.js’
    | + name (string) ‘_formatViewWithFormatterAndContext’
    | + lineNumber (number) 135
    | + columnNumber (number) 16
    | + sourceLine (string) ‘’
    | + caller (object) JS frame :: chrome://komodo/content/formatters/formatters.js :: formatView :: line 728
    | + formattedStack (string) ‘_formatViewWithFormatterAndContext@chrome://komodo/content/formatters/formatters.js:135:16
    formatVie’…477 chars
    | + stack
    _formatViewWithFormatterAndContext@chrome://komodo/content/formatters/formatters.js:135:16
    formatView@chrome://komodo/content/formatters/formatters.js:728:20
    FormattersController.prototype.do_cmd_format@chrome://komodo/content/formatters/formatters.js:71:12
    xtk.Controller.prototype.doCommand@chrome://xtk/content/controller.js:61:8
    command_doCommand@chrome://komodo/content/library/commands.js:239:0
    command_doCommandAsync/<@chrome://komodo/content/library/commands.js:196:12
    – EXCEPTION END –
    [2018-10-17 10:49:08,671] [ERROR] socket-tcp: Error occurred: error : NetworkError
    Traceback from ERROR in ‘socket-tcp’ logger:
    Logger.prototype.error@chrome://komodo/content/sdk/logging.js:411:27
    connection/onError@chrome://komodo/content/sdk/socket/tcp.js:101:17
    ts_callListener@file:///C:/Program%20Files%20(x86)/ActiveState%20Komodo%20IDE%2011/lib/mozilla/components/TCPSocket.js:340:5
    TCPSocket.prototype._maybeReportErrorAndCloseIfOpen@file:///C:/Program%20Files%20(x86)/ActiveState%20Komodo%20IDE%2011/lib/mozilla/components/TCPSocket.js:828:7
    ts_onStopRequest@file:///C:/Program%20Files%20(x86)/ActiveState%20Komodo%20IDE%2011/lib/mozilla/components/TCPSocket.js:885:5

And I get a windows script execution error as well. See screenshot.

script-error.png1322×987 52.7 KB

6

Could you try the command in the terminal and see what happens? The fact that you’re getting a Windows error tells me there is something wrong with the way you’re using the formatter.

Given the fields you filled in for the custom formatter it would be something like:

> bin-prettier.cmd write path\to\file.js
  • Carey
7

By terminal, I assume you are referring to the windows terminal (not Komodo terminal).

bin-prettier.cmd errors because the file in the node_modules bin directory is just a symlink to Prettier’s index js file, not an actual cmd file - I guess that could be a problem.

You should be able to see the commands I entered in the screenshot, none of them worked and I keep getting the windows error, but slightly different now.

win-error.png1904×900 65 KB

8

So they are putting a non-binary/terminal ready file into the bin folder? I can’t help there then. You need a file that is executable by your terminal. If you can figure out how to install the prettier formatter that way then you’ll be set.

9

FYI: this works excellently for me. (linux / komodo-ide 11.1.1)

  1. install prettier globally
    $ npm i prettier -g

  2. Komodo: Preferences -> Formatters -> [+]
    Name: Prettier
    Language: JavaScript
    Formatter: Generic command-line formatter

  3. In “Configurable Options”
    Executable to use:
    ~/.npm-global/bin/prettier
    Command-line arguments:
    --stdin-filepath %f

  4. Click “OK”

  5. Click “Apply”

Right click in a JS file -> Format -> Document using -> Prettier

1 Like