问题描述
我正在尝试使用 Prettier 在 VSCode 中格式化 JSON 文件.但是，我没有格式化任何 JSON 文件.我在谷歌上搜索了可能的修复或想法，但没有运气.
I'm trying to format a JSON file in VSCode using Prettier. However, I've had no luck formatting any JSON files. I've Googled for possible fixes or ideas with no luck.
我想弄清楚如何让 Prettier 格式化 JSON 文件，或者如何禁用使用 Prettier 格式化 JSON 并使用内部 VSCode 格式化程序.
I'm trying to figure out how do I get Prettier to format a JSON file or how to disable using Prettier to format JSON and use the internal VSCode formatter.
以下是 JSON 文件后跟 Prettier 错误的示例:
Below is an example of the JSON file followed by the Prettier error:
{
"Requester": {
"City": "USBOS",
"PostCode": "02143"
}
}
>["INFO" - 7:14:16 AM] Extension Name: "prettier-vscode". ["INFO" - 7:14:16 AM] Extension Version: "3.18.0". ["INFO" - 7:14:17 AM] Loaded
> module '[email protected]' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:14:17 AM]
> Loaded module '[email protected]' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:14:17 AM]
> Enabling prettier for languages [ "css", "graphql", "html",
> "javascript", "javascriptreact", "json", "json5", "jsonc",
> "less", "markdown", "mdx", "mongo", "postcss", "scss",
> "typescript", "typescriptreact", "vue", "yaml" ] ["INFO" -
> 7:14:17 AM] Enabling prettier for range supported languages [
> "graphql", "javascript", "javascriptreact", "json",
> "typescript", "typescriptreact" ] ["INFO" - 7:14:22 AM] Loaded
> module '[email protected]' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:14:24 AM]
> Loaded module '[email protected]' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:14:26 AM]
> Formatting C:\JSONTest\cypress\fixtures\request-form-data.json ["INFO"
> - 7:14:26 AM] Loaded module '[email protected]' from 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:14:26 AM]
> Using ignore file (if present) at C:\JSONTest\.prettierignore ["INFO"
> - 7:14:26 AM] File Info: { "ignored": false, "inferredParser": "json" } ["INFO" - 7:14:26 AM] Detected local configuration (i.e.
> .prettierrc or .editorconfig), VS Code configuration will not be used
> ["INFO" - 7:14:26 AM] Prettier Options: { "filepath":
> "d:\\TFS.Git\\Portal\\Develop\\Portal.Web\\cypress\\fixtures\\request-form-data.json",
> "parser": "typescript", "useTabs": false, "tabWidth": 2,
> "printWidth": 120, "trailingComma": "none", "singleQuote": true,
> "bracketSpacing": true, "jsxBracketSameLine": false,
> "arrowParens": "always", "endOfLine": "auto",
> "htmlWhitespaceSensitivity": "css", "insertPragma": false,
> "jsxSingleQuote": false, "proseWrap": "preserve", "quoteProps":
> "as-needed", "requirePragma": false, "semi": true } ["ERROR" -
> 7:14:26 AM] Error formatting document. ';' expected. (2:12) 1 | {
> > 2 | "Requester": {
> | ^ 3 | "City": "USBOS", 4 | "PostCode": "02143" 5 | }, SyntaxError: ';' expected. (2:12) 1 | {
> > 2 | "Requester": {
> | ^ 3 | "City": "USBOS", 4 | "PostCode": "02143" 5 | },
> at t (C:\JSONTest\node_modules\prettier\parser-typescript.js:1:285)
> at Object.parse (C:\JSONTest\node_modules\prettier\parser-typescript.js:14:180461)
> at Object.parse (C:\JSONTest\node_modules\prettier\index.js:9739:19)
> at coreFormat (C:\JSONTest\node_modules\prettier\index.js:13252:23)
> at format (C:\JSONTest\node_modules\prettier\index.js:13510:73)
> at formatWithCursor (C:\JSONTest\node_modules\prettier\index.js:13526:12)
> at C:\JSONTest\node_modules\prettier\index.js:44207:15
> at Object.format (C:\JSONTest\node_modules\prettier\index.js:44226:12)
> at c:\Users\mmartins.BROKER\.vscode\extensions\esbenp.prettier-vscode-3.18.0\src\PrettierEditService.ts:382:30
> at t.default.safeExecution (c:\Users\mmartins.BROKER\.vscode\extensions\esbenp.prettier-vscode-3.18.0\src\PrettierEditService.ts:414:27)
> at t.default.<anonymous> (c:\Users\mmartins.BROKER\.vscode\extensions\esbenp.prettier-vscode-3.18.0\src\PrettierEditService.ts:381:17)
> at Generator.next (<anonymous>)
> at s (c:\Users\mmartins.BROKER\.vscode\extensions\esbenp.prettier-vscode-3.18.0\dist\extension.js:1:346242)
> ["INFO" - 7:14:26 AM] Formatting completed in 405.797699ms. ["INFO" -
> 7:25:14 AM] Loaded module '[email protected]' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:25:16 AM]
> Loaded module '[email protected]' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:27:53 AM]
> Loaded module '[email protected]' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:28:36 AM]
> Loaded module '[email protected]' from
> 'C:\JSONTest\node_modules\prettier\index.js' ["INFO" - 7:29:00 AM]
> Loaded module '[email protected]' from
> 'C:\JSONTest\node_modules\prettier\index.js'
推荐答案
所以我决定回答这个问题，因为设置解析器有正确和错误的方法.如果您阅读了 有关解析器设置的更漂亮的文档 它会看到它清楚地说明:
So I decided to answer this question because there is a right, and a wrong way to set a parser. If your read the Prettier Documentation about the parser setting it will see that it clearly states:
"永远不要将解析器选项放在配置的顶层.仅在覆盖中使用它.否则，您将有效地禁用 Prettier 基于自动文件扩展名的解析器推理.这会强制 Prettier 使用您为所有类型的文件指定的解析器——即使它没有意义，例如尝试将 CSS 文件解析为 JavaScript."
如果您正在解析打字稿，您应该使用打字稿解析器，确保您将其与 ESLint 正确耦合，否则可能会出现不同的错误，其中之一是上面这篇文章的问题中显示的分号错误.
If you are parsing typescript, you should use the typescript parser, make sure that you correctly couple it with ESLint or you will vary likely get errors, one of them being the Semi-Colon error displayed in this post's question above.
这是正确配置的 ./.prettierrc 文件的样子.
Here is what a properly configured ./.prettierrc file looks like.
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
"overrides": [
{
"files": ["*.js", "*.cjs", "*.mjs"],
"options": {
"parser": "javascript"
}
},
{
"files": "*.ts",
"options": {
"parser": "typescript"
}
},
{
"files": ["*.json", "*.jsonc", ".babelrc", ".prettierrc"],
"options": {
"parser": "json"
}
},
]
}
以上是解决更漂亮的解析配置问题的正确解决方案.
如果你不要以这种方式配置你的
.prettierrc文件，你会得到古怪的结果和一堆错误格式化时，否则您可能根本得不到任何结果.Above is what the correct solution for solving a prettier parsing-configuration issue looks like.
If you DO NOT configure your
.prettierrcfile this way, you will get wacky results, and a bunch of errors when you format, or you might not get any results at all.当您DO以这种方式配置您的
.prettierrc文件时，您可以格式化 prettier 支持的每种文件类型，无需更改 prettierrc 配置文件的解析器"；每次都有财产.When you DO configure your
.prettierrcfile this way, you are able to format every file type that prettier supports, without having to change the prettierrc configuration file's "parser" property each, and every time.这篇关于更漂亮的 VSCode JSON 格式错误 - SyntaxError: ';'预期的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！