Prettier-atom: incorrect JSON formatting

Created on 29 Jun 2017  路  25Comments  路  Source: prettier/prettier-atom

After running Prettier: Format with prettier-atom, JSON is incorrectly formatted. This does not seem to happen when using the CLI.

Looks to me like perhaps it's formatted as JS? See screen recording.

prettier-atom


Atom version: 1.18.0

prettier-atom version: undefined (<--this is the output from debug, actual version is 0.35.0)

prettier version: undefined

prettier-eslint version: undefined

prettier-atom configuration: {

"formatOnSaveOptions": {

    "enabled": false,

    "respectEslintignore": true,

    "showInStatusBar": false,

    "javascriptScopes": [

        "source.js",

        "source.jsx",

        "source.js.jsx",

        "source.babel",

        "source.js-semantic",

        "text.html.basic",

        "text.html.vue"

    ],

    "typescriptScopes": [

        "source.ts",

        "source.tsx",

        "source.ts.tsx"

    ],

    "cssScopes": [

        "source.css",

        "source.less",

        "source.css.less",

        "source.scss",

        "source.css.scss"

    ],

    "jsonScopes": [

        "source.json"

    ],

    "excludedGlobs": [],

    "whitelistedGlobs": [],

    "isDisabledIfNotInPackageJson": false

},

"prettierOptions": {

    "bracketSpacing": false,

    "singleQuote": true,

    "trailingComma": "es5",

    "useTabs": true,

    "semi": true,

    "jsxBracketSameLine": false,

    "printWidth": 80,

    "tabWidth": "auto",

    "parser": "babylon"

},

"silenceErrors": false,

"useEslint": false,

"useEditorConfig": true,

"prettierEslintOptions": {

    "prettierLast": false

}

}

bug
Source
picture poacher2k
👍1

Most helpful comment

I just started getting this error - upgrading to prettier-atom 0.35 with no local installation of prettier, and suddenly prettier wants to format package.json with trailing commas. After saving again, it chokes on the selfsame file (like, I delete all the trailing commas manually, hit save, and it adds them, then I hit save again and it errors parsing the json).

For the time being I created an .eslintignore file and added *.json to it.

picture ericeslinger on 29 Jun 2017
👍3

All 25 comments

@poacher2k Are you using the package's version of prettier or a local version of prettier? Even though this is obviously happening as I can see in your GIF, I'm having trouble reproducing locally.

robwise picture robwise on 29 Jun 2017

@robwise: I'm using the package's version - no node_modules exist in the project folder, nor do I have prettier installed globally.

How strange that you can't reproduce it locally :confused:

poacher2k picture poacher2k on 29 Jun 2017

@robwise: Just tried this on a coworker's computer with the same results

poacher2k picture poacher2k on 29 Jun 2017

Maybe this will help

prettier-atom failed!

package.json

SyntaxError: Unexpected token, expected ; (2:9)
  1 | {
> 2 |   "name": "mobile",
    |         ^
  3 |   "version": "4.6.28",
  4 |   "versionCode": "28",
  5 |   "private": true,
    at createError$1 (./node_modules/prettier/src/parser-babylon.js:1:129)
    at parse (./node_modules/prettier/src/parser-babylon.js:1:684)
    at Object.parse (/Users/me/.atom/packages/prettier-atom/node_modules/prettier/index.js:12569:12)
    at formatWithCursor (/Users/me/.atom/packages/prettier-atom/node_modules/prettier/index.js:12767:22)
    at format (/Users/me/.atom/packages/prettier-atom/node_modules/prettier/index.js:12807:10)
    at Object.format (/Users/me/.atom/packages/prettier-atom/node_modules/prettier/index.js:12978:12)
    at prettify (/Users/me/.atom/packages/prettier-atom/node_modules/prettier-eslint/dist/index.js:146:29)
    at format (/Users/me/.atom/packages/prettier-atom/node_modules/prettier-eslint/dist/index.js:113:12)
    at /Users/me/.atom/packages/prettier-atom/dist/executePrettier/executePrettierOnBufferRange.js:23:12
    at exports.allowUnsafeNewFunction (/Users/me/.atom/packages/atom-beautify/node_modules/loophole/lib/loophole.js:25:14)
    at executePrettierEslint (/Users/me/.atom/packages/prettier-atom/dist/executePrettier/executePrettierOnBufferRange.js:22:10)
    at executePrettierOrPrettierEslint (/Users/me/.atom/packages/prettier-atom/dist/executePrettier/executePrettierOnBufferRange.js:29:32)
    at executePrettierOnBufferRange (/Users/me/.atom/packages/prettier-atom/dist/executePrettier/executePrettierOnBufferRange.js:38:21)
    at formatOnSaveIfAppropriate (/Users/me/.atom/packages/prettier-atom/dist/formatOnSave/index.js:14:122)
    at lazyFormatOnSave (/Users/me/.atom/packages/prettier-atom/dist/main.js:39:15)
    at /Users/me/.atom/packages/prettier-atom/dist/main.js:103:14
    at Function.module.exports.Emitter.simpleDispatch (/Applications/Atom.app/Contents/Resources/app/node_modules/event-kit/lib/emitter.js:25:1)
    at Emitter.module.exports.Emitter.emit (/Applications/Atom.app/Contents/Resources/app/node_modules/event-kit/lib/emitter.js:141:1)
    at TextBuffer.module.exports.TextBuffer.saveAs (/Applications/Atom.app/Contents/Resources/app/node_modules/text-buffer/lib/text-buffer.js:1119:1)
    at TextBuffer.module.exports.TextBuffer.save (/Applications/Atom.app/Contents/Resources/app/node_modules/text-buffer/lib/text-buffer.js:1108:1)
    at TextEditor.module.exports.TextEditor.save (/Applications/Atom.app/Contents/Resources/app/src/text-editor.js:925:1)
    at Pane.module.exports.Pane.saveItem (/Applications/Atom.app/Contents/Resources/app/src/pane.js:780:1)
    at Pane.saveItem (/Applications/Atom.app/Contents/Resources/app/src/pane.js:3:1)
    at Pane.module.exports.Pane.saveActiveItem (/Applications/Atom.app/Contents/Resources/app/src/pane.js:763:1)
    at Workspace.saveActivePaneItem (/Applications/Atom.app/Contents/Resources/app/src/workspace.js:1498:1)
    at atom-workspace.core:save (/Applications/Atom.app/Contents/Resources/app/src/register-default-commands.js:236:1)
    at CommandRegistry.module.exports.CommandRegistry.handleCommandEvent (/Applications/Atom.app/Contents/Resources/app/src/command-registry.js:265:1)
    at /Applications/Atom.app/Contents/Resources/app/src/command-registry.js:3:1
    at KeymapManager.module.exports.KeymapManager.dispatchCommandEvent (/Applications/Atom.app/Contents/Resources/app/node_modules/atom-keymap/lib/keymap-manager.js:610:1)
    at KeymapManager.module.exports.KeymapManager.handleKeyboardEvent (/Applications/Atom.app/Contents/Resources/app/node_modules/atom-keymap/lib/keymap-manager.js:401:1)
    at WindowEventHandler.module.exports.WindowEventHandler.handleDocumentKeyEvent (/Applications/Atom.app/Contents/Resources/app/src/window-event-handler.js:100:1)
    at HTMLDocument.<anonymous> (/Applications/Atom.app/Contents/Resources/app/src/window-event-handler.js:3:1)

$ ./node_modules/.bin/prettier --version
1.5.2
mordaha picture mordaha on 29 Jun 2017

@mordaha The only way I'm able to get that error is if I purposely use a pre-1.5 version of prettier? If you run prettier-eslint-cli on that file with the parser set to json, does it still happen?

robwise picture robwise on 29 Jun 2017
👍1

@robwise: now testing on my home computer that runs windows 7 (mine and my coworkers work computer runs linux), and I get the exact same error that I posted above.

d50739d274ceb96b25b5941354d1eb34

poacher2k picture poacher2k on 29 Jun 2017

I'm getting this error as well. Prettier-atom 0.35.0 and Atom 1.19.0-beta1.

Edit: The only other JSON package that is installed is core package language-json 0.19.1.
Edit: OSX 10.12.3 Sierra

todgru picture todgru on 29 Jun 2017
👍1

@robwise At home comp (now) prettier-eslint-cli does the same error.
But prettier-atom in Atom doesn't.
Hmmmm.

$ ./node_modules/.bin/prettier-eslint --version
4.1.1

$ ./node_modules/.bin/prettier-eslint package.json
prettier-eslint [ERROR]: prettier formatting failed due to a prettier error
prettier-eslint-cli [ERROR]: There was an error formatting "package.json": 
    SyntaxError: Unexpected token, expected ; (2:9)
      1 | {
    > 2 |   "name": "mobile",
        |         ^
      3 |   "version": "4.6.28",
      4 |   "versionCode": "28",
      5 |   "private": true,
        at createError$1 (./node_modules/prettier/parser-babylon.js:1:112)
        at parse (./node_modules/prettier/parser-babylon.js:1:681)
        at Object.parse (./node_modules/prettier/index.js:3491:12)
        at formatWithCursor (./node_modules/prettier/index.js:13694:22)
        at format (./node_modules/prettier/index.js:13734:10)
        at Object.format (./node_modules/prettier/index.js:13942:12)
        at prettify (./node_modules/prettier-eslint/dist/index.js:131:29)
        at format (./node_modules/prettier-eslint/dist/index.js:106:20)
        at MapSubscriber.project (./node_modules/prettier-eslint-cli/dist/format-files.js:255:55)
        at MapSubscriber._next (./node_modules/rxjs/operator/map.js:77:35)
failure formatting 1 file with prettier-eslint

prettier (1.5.2) from node_modules formats this file just fine.

Atom 1.18

mordaha picture mordaha on 29 Jun 2017

I just upgraded Prettier to 1.5.2. I am still able to reproduce the error.

todgru picture todgru on 29 Jun 2017

I just started getting this error - upgrading to prettier-atom 0.35 with no local installation of prettier, and suddenly prettier wants to format package.json with trailing commas. After saving again, it chokes on the selfsame file (like, I delete all the trailing commas manually, hit save, and it adds them, then I hit save again and it errors parsing the json).

For the time being I created an .eslintignore file and added *.json to it.

ericeslinger picture ericeslinger on 29 Jun 2017
👍3

Still trying to figure out what's going on, I was able to reproduce by turning the eslint integration off. I'm not really sure why that makes a difference. In the meantime I'd recommend changing the json scopes option in your prettier-atom settings to be just blank or source.foo or something. That's probably better than .gitignoring your package.json which is generally inadvisable.

robwise picture robwise on 1 Jul 2017

I got this error and a ton more - the entire thing has broken for me as posted in the prettier repo issues with screenshots. It started by giving me errors on json -- it wants all my : to be ; and adds trailing commas.

Then i noticed HTML formatting was happening and it appears the 0.35 version of atom-pretier shipped the HTML parser which is apparently not ready at this time

Then all the sudden any dynamic imports I had broke prettier completely as well and my whole project went to hell essentially and I really could not do anything at all ...

deleted prettier :(

bradennapier picture bradennapier on 1 Jul 2017

@mordaha @poacher2k Could you check which version of prettier-eslint you have? (not prettier-eslint-cli) See .atom/packages/prettier-atom/node_modules/prettier-eslint/package.json.

prettier-eslint 6.4.1 has a fix for that trailing comma issue (see https://github.com/prettier/prettier-eslint/pull/99), so you should only get that bug if you had an older version.

Looking at the stack traces you provided, with version 6.4.1, it's not supposed to use Babylon to parse JSON.

@robwise Do we only pick prettier and not prettier-eslint from local project dependencies?

darahak picture darahak on 1 Jul 2017

If ESLint integration is disabled, we should also force disable the trailingComma option.
I see that @poacher2k had it enabled in the original post.

darahak picture darahak on 1 Jul 2017

@darahak 

$ cat .atom/packages/prettier-atom/node_modules/prettier-eslint/package.json|grep versio
  "version": "6.4.1"
mordaha picture mordaha on 1 Jul 2017

@darahak: 6.4.1 here too.

poacher2k picture poacher2k on 1 Jul 2017

ok... ummm it fixed itself this morning?? literally zero changes. Maybe I coded some fixes while I slept? sleep-coding is real!

bradennapier picture bradennapier on 1 Jul 2017

@robwise Do we only pick prettier and not prettier-eslint from local project dependencies?

Correct, the guy who originally coded that made it that way and I never updated it. It uses local prettier but not prettier-eslint.

robwise picture robwise on 1 Jul 2017

I'm seeing the sameunexpected token, expected ; issue in JSON files.

@poacher2k did you find a fix?

tjshipe picture tjshipe on 3 Jul 2017

@tjshipe Could you post your config (run prettier:debug) and the call stack for the exception?
I think we have two separate issues here:

  • trailingComma being added even for JSON (fixed in latest release)
  • unexpected token probably because it's reading JSON with a JS parser, don't know why
darahak picture darahak on 3 Jul 2017

@darahak prettier-atom version is 0.35.1. Here is the config:

Atom version: 1.18.0
prettier-atom version: undefined
prettier version: undefined
prettier-eslint version: undefined
prettier-atom configuration: {
  "formatOnSaveOptions": {
    "enabled": true,
    "showInStatusBar": true,
    "respectEslintignore": true,
    "javascriptScopes": [
      "source.js",
      "source.jsx",
      "source.js.jsx",
      "source.babel",
      "source.js-semantic",
      "text.html.basic",
      "text.html.vue"
    ],
    "typescriptScopes": [
      "source.ts",
      "source.tsx",
      "source.ts.tsx"
    ],
    "cssScopes": [
      "source.css",
      "source.less",
      "source.css.less",
      "source.scss",
      "source.css.scss"
    ],
    "jsonScopes": [
      "source.json"
    ],
    "excludedGlobs": [],
    "whitelistedGlobs": [],
    "isDisabledIfNotInPackageJson": false
  },
  "prettierEslintOptions": {
    "prettierLast": false
  },
  "prettierOptions": {
    "parser": "flow",
    "printWidth": 120,
    "singleQuote": true,
    "bracketSpacing": true,
    "semi": true,
    "useTabs": false,
    "jsxBracketSameLine": false,
    "tabWidth": "auto",
    "trailingComma": "none"
  },
  "useEditorConfig": false,
  "silenceErrors": false,
  "useEslint": false
}

Here is the stack trace:

SyntaxError: Unexpected token, expected ; (2:10)
  1 | {
> 2 |   "extends": [
    |            ^
  3 |     "plugin:flowtype/recommended",
  4 |       "airbnb",
  5 |       "prettier",
    at Parser.pp$5.raise (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:4429:13)
    at Parser.pp.unexpected (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:1739:8)
    at Parser.pp.semicolon (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:1720:38)
    at Parser.pp$1.parseExpressionStatement (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:2214:8)
    at Parser.parseExpressionStatement (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:5803:20)
    at Parser.pp$1.parseStatement (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:1889:17)
    at Parser.parseStatement (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:5781:22)
    at Parser.pp$1.parseBlockBody (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:2246:21)
    at Parser.pp$1.parseBlock (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:2225:8)
    at Parser.pp$1.parseStatement (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:1846:19)
    at Parser.parseStatement (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:5781:22)
    at Parser.pp$1.parseBlockBody (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:2246:21)
    at Parser.pp$1.parseTopLevel (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:1756:8)
    at Parser.parse (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:1651:17)
    at Object.parse (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/node_modules/babylon/lib/index.js:7082:37)
    at parseWithBabylon (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/src/parser.js:33:18)
    at parse (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/index.js:32:12)
    at format (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/index.js:80:15)
    at formatWithShebang (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/index.js:91:12)
    at Object.format (/Users/shipe/workspace/javascript/complete-react/node_modules/prettier/index.js:105:12)
    at executePrettier (/Users/shipe/.atom/packages/prettier-atom/dist/executePrettier/executePrettierOnBufferRange.js:18:38)
    at executePrettierOrPrettierEslint (/Users/shipe/.atom/packages/prettier-atom/dist/executePrettier/executePrettierOnBufferRange.js:29:70)
    at executePrettierOnBufferRange (/Users/shipe/.atom/packages/prettier-atom/dist/executePrettier/executePrettierOnBufferRange.js:38:21)
    at formatOnSaveIfAppropriate (/Users/shipe/.atom/packages/prettier-atom/dist/formatOnSave/index.js:14:122)
    at lazyFormatOnSave (/Users/shipe/.atom/packages/prettier-atom/dist/main.js:39:15)
    at /Users/shipe/.atom/packages/prettier-atom/dist/main.js:107:14
    at Function.module.exports.Emitter.simpleDispatch (/Applications/Atom.app/Contents/Resources/app/node_modules/event-kit/lib/emitter.js:25:20)
    at Emitter.module.exports.Emitter.emit (/Applications/Atom.app/Contents/Resources/app/node_modules/event-kit/lib/emitter.js:141:34)
    at TextBuffer.module.exports.TextBuffer.saveAs (/Applications/Atom.app/Contents/Resources/app/node_modules/text-buffer/lib/text-buffer.js:1119:26)
    at TextBuffer.module.exports.TextBuffer.save (/Applications/Atom.app/Contents/Resources/app/node_modules/text-buffer/lib/text-buffer.js:1108:25)
    at TextEditor.module.exports.TextEditor.save (/Applications/Atom.app/Contents/Resources/app/src/text-editor.js:925:32)
    at Pane.module.exports.Pane.saveItem (/Applications/Atom.app/Contents/Resources/app/src/pane.js:780:24)
    at Pane.saveItem (/Applications/Atom.app/Contents/Resources/app/src/pane.js:3:65)
    at Pane.module.exports.Pane.saveActiveItem (/Applications/Atom.app/Contents/Resources/app/src/pane.js:763:25)
    at Workspace.saveActivePaneItem (/Applications/Atom.app/Contents/Resources/app/src/workspace.js:1548:46)
    at atom-workspace.core:save (/Applications/Atom.app/Contents/Resources/app/src/register-default-commands.js:236:38)
    at CommandRegistry.module.exports.CommandRegistry.handleCommandEvent (/Applications/Atom.app/Contents/Resources/app/src/command-registry.js:265:35)
    at /Applications/Atom.app/Contents/Resources/app/src/command-registry.js:3:65
    at KeymapManager.module.exports.KeymapManager.dispatchCommandEvent (/Applications/Atom.app/Contents/Resources/app/node_modules/atom-keymap/lib/keymap-manager.js:610:22)
    at KeymapManager.module.exports.KeymapManager.handleKeyboardEvent (/Applications/Atom.app/Contents/Resources/app/node_modules/atom-keymap/lib/keymap-manager.js:401:28)
    at WindowEventHandler.module.exports.WindowEventHandler.handleDocumentKeyEvent (/Applications/Atom.app/Contents/Resources/app/src/window-event-handler.js:100:42)
    at HTMLDocument.<anonymous> (/Applications/Atom.app/Contents/Resources/app/src/window-event-handler.js:3:65)

tjshipe picture tjshipe on 3 Jul 2017

@tjshipe Which version of Prettier do you have in /Users/shipe/workspace/javascript/complete-react/node_modules/prettier?

darahak picture darahak on 3 Jul 2017

@darahak 1.3.1

tjshipe picture tjshipe on 3 Jul 2017

I just updated Prettier to 1.5.1 and that fixed the issue. Thanks @darahak

tjshipe picture tjshipe on 3 Jul 2017

@tjshipe < 1.5.0 doesn't have JSON support.
You can either update that dependency or if you don't care about formatting JSON, erase the JSON scopes in prettier-atom's settings.

Users requested to be able to use their locally installed prettier, but we have nothing to prevent them from using obsolete versions.
We should at least display a warning or something.

Edit: Too slow 馃槃

darahak picture darahak on 3 Jul 2017
❤1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

tleunen picture tleunen  路  7Comments
erbridge picture erbridge  路  3Comments
silvenon picture silvenon  路  5Comments
vyrruss picture vyrruss  路  5Comments
kentcdodds picture kentcdodds  路  5Comments