documentation update for prettier-eslint

[basaran]

Hello, thanks for the package. I was finally able to use prettier-eslint with sublime which before I had to run prettier through eslint but had to give up on some of the nice eslint rules (such as space in parens).

Could you please mention this in your readme so others can possibly benefit from your package as well?

Here's the tweak I made:

a. create a new executable somewhere such as /bin/beauty with the following content

#!/bin/bash
/bin/node $HOME/.yarn/bin/prettier-eslint --parser babel --stdin <&0

and set /bin/beauty as executable. chmod +x /bin/beauty.

b. the settings for fmt package

{
   "rules": [
       {"selector": "source.js", "cmd": ["/bin/beauty"]},
   ],
   "cwd_mode": "auto",
}

with the cwd mode set to auto, it's reading the project .eslintrc and prettier.config.js as one would except.

Thanks again,

[mitranim]

Glad you're finding this useful.

I don't mind adding recipes to the docs. Could we simplify this first?

"cwd_mode": "auto" is the default.

For a command configured to read from stdin, <&0 is redundant.

The script is not necessary unless you use it elsewhere. You could:

{
  "selector": "source.js",
  "cmd": ["node", "$HOME/.yarn/bin/prettier-eslint", "--parser=babel", "--stdin"],
}

This avoids spawning a subshell and runs node directly. Most of the time this doesn't matter, but may be handy in pathological conditions. Avoiding an intermediary shell process allows Fmt to reliably kill the subprocess on a timeout. If the subprocess is a shell, then its subprocess may not be killed. I should probably address this in Fmt by using subprocess groups. Also, I haven't tested if there's a difference in Python; just speaking from experience with similar APIs in other languages.

[basaran]

Yes, I just confirmed this works as well. I was too eager to get it working, I forgot to use cmd as array to pass in the extra args. Thank you.

I made the following draft for you if you would like to use it. Sublime is a great text editor, and with prettier-eslint possible, I believe it will help some to move away from the "great" vscode.

prettier-eslint integration

I. install prettier, eslint, prettier-eslint globally

yarn global add prettier, eslint, prettier-eslint,  prettier-eslint-cli

II. update sublime-fmt configuration ( preferences -> package settings -> fmt )

{
    "rules": [
        {
            "cmd": [ "node", "$HOME/.yarn/bin/prettier-eslint", "--parser=babel", "--stdin" ],
            "selector": "source.js"
        }
    ],
 }

III. add your shortcut (preferences -> key bindings)

{"keys":["ctrl+k", "f"], "command": "fmt_format_buffer" },

IV. if you are using Node Version Manager (NVM)

You need to specify the exact path to your node executable.

which node
# /home/user/.nvm/versions/node/v16.0.0/bin/node

As an alternative, you can export your default version in your rc file (.bashrc, .zshrc etc)

export NVM_SYMLINK_CURRENT=true
# Reference: https://github.com/nvm-sh/nvm/blob/master/README.md#use-a-mirror-of-node-binaries

NVM_SYMLINK_CURRENT should allow you to use whichever is default node on your system. By doing so, you won't have to update sublime-fmt config when you change your nvm settings. It will always point to the current node version.

V. finalizing your configuration and testing

You will keep your files in your project root like you do with any other ide.

prettier.config.js

module.exports = {
    trailingComma: "es5",
    tabWidth: 4,
    semi: true,
    printWidth: 100,
    singleQuote: false,
    quoteProps: "consistent",
};

.eslintrc

module.exports = {
    root: true,
    env: {
        node: true,
        es6: true,
    },
    parserOptions: {
        ecmaVersion: 2019,
    },
    rules: {
        "quotes": ["error", "double", { allowTemplateLiterals: true }],
        "quote-props": ["error", "consistent"],
        "space-in-parens": ["error", "always"],
        "array-bracket-spacing": ["error", "never"],
        "no-unexpected-multiline": ["off"],
        "no-unused-vars": ["off"],
        "brace-style": "off",
        "indent": ["error", 4, { SwitchCase: 1 }],
    },
};

If all went well, once you execute your sublime-fmt, you will notice you have space in your parens which means, prettier-eslint successfully executed through sublime-fmt.

Notes

Using prettier through eslint plugins via LSP-eslint will give you faster formatting times as the LSP-server is always running. But you will have issues with conflicting rules between prettier and eslint (such as space-in--parens).

While executing prettier-eslint through cmd will be slightly slower, you will not have any conflicting rule issues between prettier and eslint. Perhaps in the future, a prettier-eslint daemon will be possible.

[mitranim]

That's a big instruction. :) Where do you think such recipes should be located? It could make it harder to skim the readme for info about the plugin itself. Perhaps a folder with examples, listed from the readme...

[basaran]

I started with a single paragraph, and next thing you know it was a full page :) But I think it covers pretty much any issues someone might have.

I agree, this should be inside a recipes folder linked from the initial readme. I think it would also be better to update the markdown of the readme to have an index at the beginning going to each heading. I can do it over the weekend if you like.

[mitranim]

My apologies for being slow, got a lot happening. 🙂

Sounds perfectly good. If you could PR this, that would be nice. 👍