Ale: Ale's prettier-eslint formatting different to command line

[jackfranklin]

I have Ale's Prettier-ESLint integration setup like so:

let g:ale_fixers = {}
let g:ale_fixers['javascript'] = [
\ 'prettier_eslint',
\]
let g:ale_fix_on_save = 1
let g:ale_javascript_prettier_eslint_options = '--single-quote --trailing-comma es5 --no-semi'

And when I save JS files it does run.

However if I then, on the command line, run:

./node_modules/.bin/prettier-eslint --no-semi --single-quote --trailing-comma es5 src/foo.js

It gives me different output. Most of the differences seem to relate to desired line length. For example, here you can see a diff. Each line with a - was what ALE wrote, and the + is what the command line changed it to:

-        if (
-          dst[key] &&
-          dst[key].constructor &&
-          dst[key].constructor === Object
-        ) {
+        if (dst[key] && dst[key].constructor && dst[key].constructor === Object) {

I'm not sure if there's some extra settings I need to set but I can't see anything obvious.

[jackfranklin]

Here's my ALEInfo, although it doesn't seem to mention Prettier ESLint in there. I ran this just after I ran ALEFix.

Current Filetype: javascript
Available Linters: ['eslint', 'flow', 'jscs', 'jshint', 'standard', 'xo']
Enabled Linters: ['eslint', 'flow', 'jscs', 'jshint', 'standard', 'xo']
Linter Variables:

let g:ale_javascript_eslint_executable = 'eslint'
let g:ale_javascript_eslint_options = ''
let g:ale_javascript_eslint_use_global = 0
let g:ale_javascript_flow_executable = 'flow'
let g:ale_javascript_flow_use_global = 0
let g:ale_javascript_jshint_executable = 'jshint'
let g:ale_javascript_jshint_use_global = 0
let g:ale_javascript_standard_executable = 'standard'
let g:ale_javascript_standard_options = ''
let g:ale_javascript_standard_use_global = 0
let g:ale_javascript_xo_executable = 'xo'
let g:ale_javascript_xo_options = ''
let g:ale_javascript_xo_use_global = 0
Global Variables:

let g:ale_echo_cursor = 1
let g:ale_echo_msg_error_str = 'Error'
let g:ale_echo_msg_format = '%s'
let g:ale_echo_msg_warning_str = 'Warning'
let g:ale_enabled = 1
let g:ale_keep_list_window_open = 0
let g:ale_lint_delay = 200
let g:ale_lint_on_enter = 1
let g:ale_lint_on_save = 1
let g:ale_lint_on_text_changed = 'never'
let g:ale_linter_aliases = {}
let g:ale_linters = {'html': []}
let g:ale_open_list = 0
let g:ale_set_highlights = 0
let g:ale_set_loclist = 1
let g:ale_set_quickfix = 0
let g:ale_set_signs = 1
let g:ale_sign_column_always = 0
let g:ale_sign_error = '>>'
let g:ale_sign_offset = 1000000
let g:ale_sign_warning = '--'
let g:ale_statusline_format = ['⨉ %d', '⚠ %d', '']
let g:ale_warn_about_trailing_whitespace = 1
Command History:

(finished - exit code 0) ['/bin/zsh', '-c', '''/Users/jackfranklin/git/songkick/ng-store/node_modules/eslint/bin/eslint.js'' -f unix --stdin --stdin-filename ''/Users/jackfranklin/git/songkick/ng-store/src/app/bootstrap.js'' < ''/var/folders/_x/3v71r9wx7t932h0528ww4wh40000gn/T/vhNvuIn/5/bootstrap.js''']

<<>>

(finished - exit code 0) ['/bin/zsh', '-c', '''/Users/jackfranklin/git/songkick/ng-store/node_modules/eslint/bin/eslint.js'' -f unix --stdin --stdin-filename ''/Users/jackfranklin/git/songkick/ng-store/src/app/bootstrap.js'' < ''/var/folders/_x/3v71r9wx7t932h0528ww4wh40000gn/T/vhNvuIn/7/bootstrap.js''']

<<>>

[jackfranklin]

So this does seem to be down to the print-width option that Prettier has. When I set it in Ale to a larger value (say, 120), its formatting matches what I'd expect. But when I set it back to 80 then Ale starts formatting differently.

[jackfranklin]

Got it! It's because we have an ESLint rule that sets max-len to 120, and I would assume that prettier-eslint on the command line is reading that and using it to configure Prettier. I'm not sure why that doesn't happen when ALE runs it though. I'll keep digging.

EDIT: this bug affects all Prettier options - it seems that it's not allowing prettier-eslint-cli to infer the settings. That might be because prettier-eslint can't locate the ESLint config or something due to how Ale runs it but I'm not sure about how this works.

[w0rp]

I recommend using prettier combined with eslint instead.

[w0rp]

let g:ale_fixers['javascript'] = ['prettier', 'eslint']

If you install eslint_d, ALE will run that instead. eslint_d can execute much more quickly, but isn't always up-to-date with the latest version of ESLint.

[jackfranklin]

Great, thank you! I'll try setting up elsint_d.

[jackfranklin]

eslint_d is indeed much quicker, thank you!

I am noticing one thing though; I'm now not seeing ESLint errors appear on save, as I would expect, when I have ESLint enabled for linting + Prettier/ESLint for fixing. Once Prettier has run + the buffer has saved I don't see any new lint errors; just the old ones; and I have to manually run ALELint to trigger them. Maybe if fixing, we should fix + then lint afterwards again?

[w0rp]

It should be doing that. I'll take a look at that later when I look at the file reloading issues.

I'll see if it's possible to set the ESLint config for prettier-eslint like I do for the eslint fixer.

[w0rp]

Now the documentation contains my recommendation. I'll be looking into the other issue.

[ricbermo]

Hello (I'm so sorry for spamming you), this is still happening to me. My setup is:

let g:ale_linters = { 'javascript': ['eslint'] }
let g:ale_sign_column_always = 1
let g:ale_lint_on_text_changed = 'never'
let g:ale_lint_on_enter = 0
let g:ale_fixers = {}
let g:ale_fixers['javascript'] = ['prettier_eslint']

and in package.json

  "devDependencies": {
    "babel-eslint": "^8.0.0",
    "eslint": "^4.7.2",
    "eslint-plugin-prettier": "^2.3.1",
    "eslint-plugin-react": "^7.3.0",
    "prettier": "^1.7.0",
    "prettier-eslint": "^8.1.1"
  }

[w0rp]

You may have to update some of your packages for it to work. I'm not sure myself, as I don't use prettier.

[ricbermo]

yeah, that's why I thought but I/m pretty sure I'm using the latest versions of my dependencies, I even updated my plugins. Sorry for keeping this alive :(

[megalithic]

@ricbermo you get this working?

[ricbermo]

@megalithic well it's working now. You can check my dotfiles. Also, I have this config on my projects:

"devDependencies": {
    "babel-eslint": "^8.0.2",
    "eslint": "^4.12.0",
    "eslint-plugin-prettier": "^2.3.1",
    "prettier": "^1.8.2",
    "prettier-eslint": "^8.2.2",
  },