Failing to format JSON files

[stepankuzmin]

I can't format files using

./node_modules/.bin/precise-commits

My dependencies

"devDependencies": {
  "eslint": "4.17.0",
  "eslint-config-airbnb": "16.1.0",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "6.0.3",
  "eslint-plugin-react": "7.6.1",
  "husky": "0.14.3",
  "precise-commits": "1.0.0",
  "prettier": "1.10.2",
  "prettier-eslint": "8.8.1",
  "prettier-eslint-cli": "4.7.0",
}

.eslintrc

{
  "extends": "airbnb",
  "plugins": ["import", "react"],
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "jsx-quotes": ["error", "prefer-single"],
    "comma-dangle": ["error", "never"],
    "function-paren-newline": ["error", "consistent"],
    "react/jsx-no-bind": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/forbid-prop-types": [1, { "forbid": ["any", "array"] }]
  }
}

Output:

✔  precise-commits: 21 modified file(s) found
✔  [1/21] Processing file: package.json
✖  precise-commits: An Error occurred

{ SyntaxError: Unexpected token, expected ";" (2:9)
  1 | {
> 2 |   "name": "@urbica/celldata",
    |         ^
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "scripts": {
    at createError (/Users/stepan/projects/celldata/node_modules/prettier/parser-babylon.js:1:110)
    at Object.parse (/Users/stepan/projects/celldata/node_modules/prettier/parser-babylon.js:1:986)
    at Object.parse$4 [as parse] (/Users/stepan/projects/celldata/node_modules/prettier/index.js:24274:19)
    at formatWithCursor (/Users/stepan/projects/celldata/node_modules/prettier/index.js:33650:27)
    at format (/Users/stepan/projects/celldata/node_modules/prettier/index.js:33695:10)
    at Object.format (/Users/stepan/projects/celldata/node_modules/prettier/index.js:33945:12)
    at /Users/stepan/projects/celldata/node_modules/precise-commits/lib/precise-formatters/prettier.js:42:64
    at Array.forEach (<anonymous>)
    at Object.formatRanges (/Users/stepan/projects/celldata/node_modules/precise-commits/lib/precise-formatters/prettier.js:41:25)
    at ModifiedFile.formatCharacterRangesWithinContents (/Users/stepan/projects/celldata/node_modules/precise-commits/lib/modified-file.js:25:61)
    at /Users/stepan/projects/celldata/node_modules/precise-commits/lib/index.js:72:26
    at Array.forEach (<anonymous>)
    at main (/Users/stepan/projects/celldata/node_modules/precise-commits/lib/index.js:45:27)
    at Object.<anonymous> (/Users/stepan/projects/celldata/node_modules/precise-commits/bin/index.js:74:1)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
  loc: { start: { line: 2, column: 9 } },
  codeFrame: '\u001b[0m \u001b[90m 1 | \u001b[39m{\u001b[0m\n\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 2 | \u001b[39m  \u001b[32m"name"\u001b[39m\u001b[33m:\u001b[39m \u001b[32m"@urbica/celldata"\u001b[39m\u001b[33m,\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m   | \u001b[39m        \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 3 | \u001b[39m  \u001b[32m"version"\u001b[39m\u001b[33m:\u001b[39m \u001b[32m"0.1.0"\u001b[39m\u001b[33m,\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 4 | \u001b[39m  \u001b[32m"private"\u001b[39m\u001b[33m:\u001b[39m \u001b[36mtrue\u001b[39m\u001b[33m,\u001b[39m\u001b[0m\n\u001b[0m \u001b[90m 5 | \u001b[39m  \u001b[32m"scripts"\u001b[39m\u001b[33m:\u001b[39m {\u001b[0m' }

[JamesHenry]

Interesting, I would not expect it to throw on a package.json, because in theory prettier would just pick the right parser behind the scenes for the file type.

Please could you try adding a .prettierignore file with *.json as the contents and see if that temporarily gets rid of the issue?

[mfru]

Adding package.json to the .prettierignore file is resolving this issue for me

[wild-lotus]

I am having the same issue with package-lock.json and README.md. Adding them to .prettierignore does the trick for now.

[mfru]

So it seems like one has to ignore all json files. Just confirmed by changing another one which led to an error. Thanks @JamesHenry for the advice!

[JamesHenry]

Thanks for confirming @mfru. I will need to dig into why this is happening, as I mentioned above, I would have expected Prettier to "just work" with JSON files. I'll update this issue with progress.

[SimeonC]

As a workaround I found you can use this setup to workaround the json (and md) parsing issues (this example from package.json).

"prettier": {
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.md",
      "options": {
        "parser": "markdown"
      }
    },
    {
      "files": "*.json",
      "options": {
        "parser": "json"
      }
    }
  ]
}

Edit On some playing around it actually seems that prettier can't work on partial commits of JSON files. This worked fine when adding a new json file but when editing the same file I get this:

{ SyntaxError: Unexpected token (1:9)
> 1 | "format": "precise-commits",
    |         ^
  2 |     "precommit": "precise-commits --check-only"
    at createError (/Users/simeoncheeseman/Development/react-system/node_modules/prettier/parser-babylon.js:1:110)
    at Object.parse (/Users/simeoncheeseman/Development/react-system/node_modules/prettier/parser-babylon.js:1:986)
    at Object.parse$4 [as parse] (/Users/simeoncheeseman/Development/react-system/node_modules/prettier/index.js:24274:19)

[JamesHenry]

I think it's possible that the prettier parser inference is just not working correctly when formatting ranges, hence the need to explicitly specify it as you have above. I will do some digging :)

[SunburnedGoose]

I've got v1.0.2 and I'm getting similar errors.

λ git commit -m "Formatting changes."
husky > npm run -s precommit (node v9.3.0)

√  precise-commits: 2 modified file(s) found
√  [1/2] Processing file: package.json
×  precise-commits: An Error occurred

{ SyntaxError: Unexpected token (1:17)
> 1 | "precisecommits": "precise-commits",
    |                 ^
  2 |     "precommit": "precise-commits"
    at createError (C:\workspace\prettier\node_modules\prettier\parser-babylon.js:1:110)
    at Object.parse (C:\workspace\prettier\node_modules\prettier\parser-babylon.js:1:986)
    at Object.parse$4 [as parse] (C:\workspace\prettier\node_modules\prettier\index.js:24274:19)
    at formatWithCursor (C:\workspace\prettier\node_modules\prettier\index.js:33650:27)
    at format (C:\workspace\prettier\node_modules\prettier\index.js:33695:10)
    at formatRange (C:\workspace\prettier\node_modules\prettier\index.js:33922:26)
    at formatWithCursor (C:\workspace\prettier\node_modules\prettier\index.js:33654:30)
    at format (C:\workspace\prettier\node_modules\prettier\index.js:33695:10)
    at Object.format (C:\workspace\prettier\node_modules\prettier\index.js:33945:12)
    at C:\workspace\prettier\node_modules\precise-commits\lib\precise-formatters\prettier.js:42:64
    at Array.forEach (<anonymous>)
    at Object.formatRanges (C:\workspace\prettier\node_modules\precise-commits\lib\precise-formatters\prettier.js:41:25)
    at ModifiedFile.formatCharacterRangesWithinContents (C:\workspace\prettier\node_modules\precise-commits\lib\modified-file.js:25:61)
    at C:\workspace\prettier\node_modules\precise-commits\lib\index.js:72:26
    at Array.forEach (<anonymous>)
    at main (C:\workspace\prettier\node_modules\precise-commits\lib\index.js:45:27)
  loc: { start: { line: 1, column: 17 } },
  codeFrame: '> 1 | "precisecommits": "precise-commits",\n    |                 ^\n  2 |     "precommit": "precise-commits"' }



husky > pre-commit hook failed (add --no-verify to bypass)

Adding package.json to the ignore file will let the commit proceed. The commit has the following:

λ git status
On branch master
Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

        modified:   package.json
        modified:   src/index.js

[erik-inkapool]

@SunburnedGoose Can you provide the exact diff?

[erik-inkapool]

This is likely an issue with prettier rather than with this package, see prettier/prettier#4009

[SunburnedGoose]

Probably. If precise-commits is just trying to prettify the delta, it could have this issue. When I switched back to husky and lint-staged, it was fine, but it was also processing the entire document. I'll try it again when prettier is updated.

[erik-inkapool]

Interestingly if you include some form of jspn (like closing curly-bracket) it will not error. Probably difficult to guess the json context.

[SunburnedGoose]

I'll get you the diff when I'm at my home PC. Was using a local git to test.

[SunburnedGoose]

Most likely, it was a diff that only included one line in package.json to add the script to run precise-commits.

"precisecommits": "precise-commits",

[JamesHenry]

Thanks a lot for triaging @erik-lundgren :)

[erik-inkapool]

@JamesHenry Happy to help :) EDIT: Should this be reopened with "reported prettier issue" label?

@SunburnedGoose Yeah I believe you're running into the prettier issue linked above. I'll try to keep this place updated whem something happens to that issue

[ibio]

I'm still having the issue with .scss files.

{ SyntaxError: Unexpected token @ (1:1)
> 1 | @import "~bootstrap/dist/css/bootstrap";
    | ^
  2 | 
  3 | 
  4 | body {