标签: prettier-vscode

我无法获得更漂亮的扩展来使用我的配置文件。它继续使用全局设置（如 vscode 中的配置路径设置中所定义）。我做了一个示例项目：

https://github.com/Supperhero1/prettierTest

我在 .prettierrc 文件中将 tabWidth 设置为 1。当我运行“npx prettier --write”时。prettier 包正确地格式化了 test.ts 文档，使其缩进为 1，但是如果我保存文件（我打开了保存格式），它会被格式化回全局设置（4 个空格）。我删除了全局设置中的所有设置，但它默认为带有两个空格的选项卡。该扩展似乎完全忽略了配置文件。一位同事有这个扩展，它可以很好地处理配置文件。

我试图弄清楚什么可能会覆盖该设置，扩展描述表示确定设置的优先级是：

Prettier configuration file
.editorconfig
Visual Studio Code Settings (Ignored if any other configuration is present)

在官方文档中，配置文件解析优先级是：

A "prettier" key in your package.json file.
A .prettierrc file written in JSON or YAML.
...

看看我的 package.json 文件中没有 prettier 键，应该没有任何内容可以覆盖我的 .prettierrc 文件。我尝试重新启动 vscode 但没有帮助。有没有其他人遇到过这个问题，我不知道在哪里可以解决这个问题......

所以我今天尝试安装更漂亮的，我直接按照文档中的说明进行操作。

npm install --save-dev --save-exact prettier\necho {}> .prettierrc.json\n

然后我创建一个 .prettierignore 并将 .gitignore 中写入的内容复制粘贴到其中。同时，这是我在 .prettierrc.json 中写的内容：

{\n   "singleQuote": true\n}\n

现在，当我在命令行中运行 prettier 时：

npx prettier --write src/index.js\n

我收到此错误：

PS C:\\file-directory> npx prettier --write src/index.js\n[error] Invalid configuration file `src\\index.js`: JSON Error in C:\\file-directory\\.prettierrc.json:\n[error]\n[error] > 1 | \xef\xbf\xbd\xef\xbf\xbd{\n[error]     | ^\n[error]   2 |\n[error]   3 |    "singleQuote": true\n[error]   4 |\n[error]\n[error] Unexpected token "\xef\xbf\xbd" (0xFFFD) in JSON at position 0 while parsing near "\xef\xbf\xbd\xef\xbf\xbd{\\u0000\\r\\u0000\\n\\u0000 \\u0000 \\u0000 \\u0000\\"\\u0000s\\u0000i\\u0000..."\n[error]\n[error] > 1 …

我想使用 typescript 的新 satisfies 运算符，但 VS code Prettier 扩展似乎无法识别它并停止工作。

我已将 Typescript、Eslint、Prettier 和 VS code Prettier 扩展更新到最新版本，但仍然收到错误。

有没有办法修复或忽略它？

package.json 文件

{\n    "name": "react-playground",\n    "private": true,\n    "version": "0.0.0",\n    "type": "module",\n    "scripts": {\n        "build": "tsc && vite build",\n        "dev": "vite",\n        "format": "prettier --write ./**/*.{cjs,ts,tsx,json,md,css,html}",\n        "lint": "eslint --ext .js,.jsx,.ts,.tsx src --fix",\n        "preview": "vite preview"\n    },\n    "dependencies": {\n        "@headlessui/react": "^1.7.9",\n        "@hookform/error-message": "^2.0.1",\n        "@hookform/resolvers": "^2.9.10",\n        "@tanstack/react-table": "^8.7.9",\n        "clsx": "^1.2.1",\n        "d3": "^7.8.2",\n        "date-fns": "^2.29.3",\n        "downshift": "^7.2.0",\n        "lodash": "^4.17.21",\n        "react": "^18.2.0",\n        "react-dom": "^18.2.0",\n        "react-hook-form": …

当我使用内置格式化程序时，我有这个 HTML 。不好。我希望每个标签都级联。在这里，我们有 span 和 svg 以及 a 在同一行。

用 prettier 格式化后（此版本）

我明白了。这几乎更糟。（请参阅稍后的编辑部分，解释为什么它\xe2\x80\x99 实际上是 prettier 的明智选择。）

更漂亮的配置是

我可以使用什么来正确自动格式化此 HTML\xe2\x80\xaf？

编辑：我\xc2\xa0得到了我\xc2\xa0想要的美化扩展并编辑其内联配置。\n

这就是为什么 Prettier 会这样格式化。这是一种不破坏内容显示的解决方法。事实上，一旦你习惯了它就非常聪明。

您可以使用以下选项覆盖它

"prettier.htmlWhitespaceSensitivity": "ignore",\n

请参阅上面的链接以了解更多相关信息。

我需要每天重新启动 Visual Studio Code 几次，因为 Prettier 格式化程序扩展 ( esbenp.prettier-vscode) 会引发错误。就好像扩展在经过多次成功的格式化后变得混乱一样。重新打开编辑器后，格式设置将再次按预期工作。有什么想法可能导致这种情况吗？

我在输出窗口中看到以下内容：

["DEBUG" - 6:17:02 AM] Using bundled version of prettier.
["DEBUG" - 6:17:04 AM] Using bundled version of prettier.
["INFO" - 6:17:08 AM] Formatting file:///Users/soemthing/src/components/Unicorn/index.stories.mdx
["INFO" - 6:17:08 AM] Using config file at '/Users/something/.prettierrc'
["INFO" - 6:17:08 AM] Attempted to determine module path from package.json
["ERROR" - 6:17:08 AM] Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run `npm install`
["ERROR" …

我正在尝试让 Prettier 使用printWidth80 个字符（我理解为默认值）来格式化我的文件。但是，即使配置了我的用户设置：

"prettier.printWidth": 80

.prettierrc并在项目中使用配置：

{
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80
}

...当我保存文件时没有任何变化（实施了其他设置，这让我认为某处存在冲突）。

甚至 VS Code 中的 Prettier 输出也显示它正在拉入配置：

["INFO" - 8:27:53 PM] Using config file at '/Users/username/Documents/whatever/.prettierrc'
["INFO" - 8:27:53 PM] Prettier Options:
{
  "filepath": "/Users/username/Documents/whatever/project/file.mdx",
  "parser": "mdx",
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 80
}
["INFO" - 8:27:53 PM] Formatting completed in 93.855083ms.

有没有办法配置更漂亮来防止非多行三元运算？

想要这个：

const route = routeModule.config ? routeModule.config(router) : routeModule(router);

不是这个：

  const route = routeModule.config
        ? routeModule.config(router)
        : routeModule(router);

我的prettier.config.js：

module.exports = {
    trailingComma: 'es5',
    tabWidth: 4,
    semi: true,
    singleQuote: true,
    printwidth: 200,
    bracketspacings: true,
};

我目前在 Visual Studio Code 上的项目中使用 Prettier。每当我保存时，它都会格式化。但是，我最近想忽略格式化中的特定文件，所以我做了一些研究并找到了该.prettierignore文件。但由于某种原因，它对我不起作用。我使用终端中的命令来调试问题，并且“保存格式”功能似乎忽略或覆盖了该文件。

我试图忽略src/main.tsx，下面我可以看到它在 Prettier 方面有效：

PS C:\Users\X> npx prettier --debug-check src/main.tsx
PS C:\Users\X> npx prettier --debug-check src/main.css
src\main.css

.prettierignore我可以以某种方式让它在格式化之前检查文件吗？

我在 VS code 上安装了 prettier，但它似乎没有任何功能。我通过 VS code 扩展安装了 Prettier - Code formatter (6.4.0)，我使用的是最新版本的 VScode 并且没有可用的更新。

保存时的格式和 cmd-shift-p 对于 .php 文件没有任何作用，但对于 .js 文件则完美。

我的 VS 代码 settings.json 文件如下所示：

{
"editor.codeActionsOnSave": null,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}

这是我安装的唯一 VS 代码扩展，因此它与另一个 VS 代码扩展不存在兼容性问题，但是我还使用以下命令全局安装了plugin-php 格式化程序：

npm install --global prettier @prettier/plugin-php

我有一个 Markdown 文件：

<!-- omit in toc -->
## Title name

但是当我用 Prettier 格式化它时，它会自动添加换行符：

<!-- omit in toc -->

## Title name

有什么方法可以阻止 Prettier 这样做，从而保留其其他格式化功能吗？因为我喜欢使用 Prettier 将大文本块分解为 80 个字符宽度的行。

如果没有，是否有任何 vscode 格式化程序可以将行分成 80 个字符宽度的行而不添加换行符？