小开

这不是pretty本身的问题，而是VSCode扩展prettier-vscode的问题。根据它的文档, Vue格式默认是禁用的:

更漂亮。disableLanguages(默认值:["vue"])

要禁用此扩展的语言id列表。需要重新启动。注意:禁用父文件夹中启用的语言将阻止格式化，而不会让任何其他格式化程序运行

在这种情况下，为了启用，你应该设置"prettier.disableLanguages": []。由于这是一个扩展配置，你应该在VSCode设置文件，而不是.prettierrc。

小开

有时候，当代码中出现语法错误时，“漂亮”就会停止工作。你可以通过点击右下角更漂亮旁边的x按钮来查看错误

小开

你可以试着把这个部分添加到你的VS Code设置中吗?json文件吗?

"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
},

小开

有时与自动插件更新所需的文件，由漂亮的可能会丢失。

如果这里有文件或文件夹为空，请检查此路径

C:\Users\ YOURUSERNAME \ esbenp.prettier-vscode-2.2.2 \ \ .vscode \扩展

如果丢失，卸载并重新安装更漂亮

小开

1 .使用其他扩展漂亮的是不为我工作，我只是使用另一个VSCODE扩展名为PrettierNow，我认为这将有所帮助，为我

从prettier的最新更新中，如果你想坚持使用prettier，你需要在项目的根目录中添加.prettierrc文件。 .prettierrc的一个例子是-

{
"tabWidth": 4,
"singleQuote": true,
"semi": false
}

小开

Prettier还可以在保存时格式化文件。

但是，安装和启用并不会导致工作。

你必须在VSCode: 设置>>用户>>文本编辑器>>格式化中检查“format on Save”

小开

最佳答案

选择File -> Preferences -> Settings (Ctrl + comma)并搜索表单formatter
将Prettiers设置为默认格式化程序。李 < / >

小开

更漂亮地回滚到1.7.3并修复了它

小开

启用格式在Save"在VSCode中:设置>用户在祝辞文本编辑器>格式化对我有用!

Print

小开

我没有使用Vue，但遇到了同样的问题。

我已经设置好了

Editor: default formatter变得更漂亮
Editor: Format on Save到true

.eslintrc.js

.prettierrc

我的问题的解决方案是，我已经正确设置，除了我需要:

__abc0 + __abc1 + __abc2
类型format document with
选择Configure Default Formatter...
选择Prettier作为默认值。

我不知道为什么Editor: Format on Save设置为true是不够的。我需要使用上面的步骤选择默认格式化器，这样它就可以工作了

小开

对我来说，它与ESlint有关，ESlint也与Prettier一起工作。Eslint没有工作(本地安装与全局安装冲突)，这破坏了Prettier。

小开

如果做什么@Simin Maleki提到的不能解决你的问题，有一个机会，你的默认格式化器没有设置:

File > Preferences > Settings > Search for "default formatter"

确保你的Editor: Default Formatter字段不是null而是Prettier - Code formatter (esbenp.prettier-vscode)，并且下面所有的语言都勾选了。这解决了我的问题。

一步一步的演练

.

同时确保保存时的格式是启用的:

小开

不要忘记启用“editor.defaultFormatter"在VSCode的设置中。在我的例子中，它是空的，因此甚至“editor. formatonsave”;似乎也没能解决问题。

小开

我遇到了这个问题，这三个步骤解决了我的问题:

小开

如果其他答案都无效，请检查工作目录中是否存在冲突的漂亮配置.prettierrc或检查.prettierignore以确保文件/文件夹没有被忽略。

小开

在Windows上:

我们可以使用以下命令打开下面的文件:

Start > Run

文件路径:

%AppData%\Code\User\settings.json

改变来自:

"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},

:

"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},

注意:

如果上述内容不存在，请添加而不是更改。
您应该已经安装了“更漂亮的代码格式化器”。来查看上述更改的效果- https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

小开

最近我也遇到了同样的问题，那就是在保存代码时，pretty不会自动格式化代码。检查pretty，我看到一个错误:无效的"arrowParens"值。预计“always"或者“avoid”，但是收到了true。

当我点击这个时，看到错误消息:

结果我也安装了“现在更漂亮”。这在我的配置文件中有一个布尔值。卸载“现在更漂亮”后，一切正常。

小开

转到管理(位于左下角)->设置→用户 tab ->的文本编辑器→格式化→在保存时检查格式

如果不能工作，请关闭并再次打开vscode编辑器

小开

对我来说，问题是HTML文件的格式有一天停止工作。我已经配置了格式保存，它可以在除HTML之外的所有文件中工作。

然后我意识到我在实验中将保存模式下格式设置为modification而不是file，并忘记了它。这对HTML文件中的任何内容都没有格式化的影响，令人惊讶的是，即使是我的更改也没有格式化。将其设置回file解决了这个问题。

小开

尽管有这些设置，你仍然会遇到问题。在这种情况下，正如之前的回答中所指出的，那么在VSCode的底部状态栏中检查更漂亮的通知将是一个好点。

当单击该状态时，输出面板应该在HTML文件中报告该问题。对我来说，问题是我在p标签里面有一个div，我认为更漂亮的/VSCode惯例是反对的。当我删除它(并结合上面所有的设置，即默认格式化程序和保存时格式)，我变得更漂亮了。

.prettierrc不是必需的，除非你想覆盖VSCode设置

小开

检查是否有.vscode/settings。Json文件在您的项目目录(工作空间)。在我的案例中，有人签入了这个文件:

{
"editor.formatOnSave": false
}

解决方案:删除文件(也从源代码控制中删除它)，并将.vscode/添加到.gitignore(如果你使用git)。

小开

在我的案例中，我必须做到以下几点:

从命令行安装pretty (npm install --save-dev --save-exact prettier prettier-plugin-custom)
重载VSCode

voilà，一切都开始运转了。

<强>提示: 为了确保安装良好，我检查了版本:

npx prettier --version

小开

我试着开启“格式保存”。并设置“自动保存延迟”;为0。它成功了，所以我猜你也可以试试这个。

编辑:你可以通过这些步骤看到它们。

Manage(齿轮图标左下角)

Settings(在管理下拉列表中)

搜索Format On Save并启用它(勾选复选框)

向下滚动并寻找Auto Save Delay并将其设置为0

小开

在. pretierrc中检查requirePragma，它说你需要为要格式化的文件添加一个顶级注释

去掉这个规则，它就会起作用

小开

如果Prettier在保存时自动格式化除HTML文件外的所有其他文件:

按Cmd + P或Ctrl + P打开命令面板，并在其中键入以下文本:

> open settings

从建议下拉列表中单击Preferences: Open Settings (JSON)。在settings.json文件中，检查"[html]"键是否存在。如果该键存在并且其值指示使用Visual Studio Code中安装的另一个格式化扩展，则应将其重置为使用更漂亮.

"[html]": {
"esbenp.prettier-vscode"
}

对于一个实例，有时，当你安装了pretty Now扩展时，"[html]"键的值可能是"remimarsal.prettier-now"。

如果你没有安装任何其他格式扩展，除了pretty，你也可以从settings.json文件中完全删除"[html]"键。

小开

有一些语法是pretty无法解析的。??就是其中之一。去掉那个符号后，我的美女就像施了魔法一样。你应该看看vscode中Prettier扩展的输出。这应该指出的行和语法是造成的问题，更漂亮的格式正确。

小开

在某些情况下，prettier是作为依赖项提供的，您可能需要在prettier vscode使用以下命令之一识别它之前安装它，这取决于您正在使用的包管理器
npm i或yarn

小开

禁用和启用prettier扩展解决了我的问题

小开

这就是我的工作(我的默认格式化器已经设置为更漂亮)

将默认格式化器更改为default
重启vscode
将默认格式化器改回Prettier。

小开

如果你已经设置了所有的东西，你可以在设置和更漂亮的是不工作。尝试通过这个命令行安装它。 npm install --save-dev prettier

小开

如何通过VScode的ESlint插件格式化你的代码

好吧，与其给出如何使用VScode的pretty扩展的指南，我宁愿解释如何依赖ESlint并拥有两个世界:检查你的代码是正确的(ESlint)，然后格式化它(pretty)。

这样做的好处是什么?

不要强迫你的整个团队使用VScode的pretty扩展，也许有些人更喜欢Vim, IntelliJ的Webstorm, Emacs等…在我看来，与工具无关的解决方案总是更好的。
我认为检测代码比格式化代码更重要，但如果同时使用两个扩展，则可能会在格式化和检测之间发生冲突。
如果您运行的扩展较少，那么您的硬件就不会那么困难(主要是因为它可以阻止冲突)
使用ESlint + Prettier组合将剥离需要有一个特定的个人配置的代码库(untracked)。你也会受益于Vue/Nuxt特定的ESlint规则和更简单/更通用的配置。
ESlint配置可以配置为在提交之前运行，在CI/CD或任何地方。

如何实现这种设置?

让我们首先安装ESlint扩展，只有它，不安装更漂亮的一个。

尚未安装Vetur ?

我强烈推荐ve2应用程序使用它(Nuxt目前正在运行)，你可以在下面找到它。它将允许快速和简单地ESlint (+ pretty)任何.vue文件。

完成后，使用ctrl + shift + p (Windows/Linux)或cmd + shift + p (Mac)访问Command Palette，并键入Preferences: Open Default Settings (JSON)

在那里，你应该有这样的东西

{
"workbench.colorTheme": "Solarized Dark", // example of some of your own configuration


"editor.codeActionsOnSave": {
"source.fixAll": true,
},
"eslint.options": {
"extensions": [
".html",
".js",
".vue",
".jsx",
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"html",
"vue",
],
}

如何尝试您的配置现在正在工作?

看看我的解决方案是否工作，请下载这个Github回购，获得最新的稳定节点版本(例如:14)，并运行yarn让它工作。否则，只需打开VScode。
这个回购也可以用来通过检查我的文件来检查您的配置是否正确!

然后，你可以访问任何.js或.vue文件并查看那里的问题(命令面板:Problems: Focus on Problems View)。nuxt.config.js和/pages/index.vue是很好的例子，下面是index.vue文件。

你可以看到，我们确实有几个东西可以被pretty修复，但我们也有一个eslint(vue/require-v-for-key)错误。顺便说一句，解决方案可作为下面的评论。

PS:如果你想有内联ESlint警告/错误，如截图所示，你可以安装错误的镜头，如果你想摆脱错误，这是一个超级神奇的扩展。

保存此文件，你应该看到每一个自动修复的事情都为你做。通常它主要是漂亮的问题，但有时也可以是ESlint。因为我们有来自Nuxt的ESlint规则，你也会得到一些很好的实践!

塔达，起作用了!如果不是，请阅读我答案后面的部分。

如果你想创建一个全新的项目

你可以运行npx create-nuxt-app my-super-awesome-project并在那里选择一些东西，最重要的当然是Linting tools: Eslint + Prettier(点击空格来选择其中之一)。

警告:到今天为止，要让ESlint + Prettier正常工作，还需要额外的一步，如Github的问题所示。修复应该很快就会发布，然后下面的配置将不再需要!

要解决这个问题，请运行yarn add -D eslint-plugin-prettier并再次检查您的.eslintrc.js文件是否是以下文件

module.exports = {
root: true,
env: {
browser: true,
node: true
},
parserOptions: {
parser: '@babel/eslint-parser',
requireConfigFile: false
},
extends: [
'@nuxtjs',
'plugin:prettier/recommended', // this line was updated
'prettier'
],
plugins: [
],
// add your custom rules here
rules: {}
}

然后，您可以让它完全正常工作，如上所述。保存文件，它应该会运行ESlint，然后一个接一个地变得更漂亮!

如果你还有问题

尝试再次使用Command Palette和ESLINT: restart ESLint Server甚至Developer: Reload Window
如果你需要帮助，请留下评论或联系我

小开

这里我的漂亮配置工作在vue.js文件，typescript文件和json文件。

arrowParens: 'always'
bracketSpacing: true
endOfLine: 'crlf'
htmlWhitespaceSensitivity: 'css'
insertPragma: false
jsxBracketSameLine: false
jsxSingleQuote: true
overrides:
- files: '*.json'
options:
semi: true
parser: 'json'
parser: 'babel'
printWidth: 120
proseWrap: 'preserve'
quoteProps: 'truepreserve'
requirePragma: false
semi: false
singleQuote: true
tabWidth: 8
trailingComma: 'es5'
useTabs: true
vueIndentScriptAndStyle:

不要忘记更新你的vscode设置

{
"extensions.ignoreRecommendations": false,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "octref.vetur"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"vetur.format.options.useTabs": true}

那是所有人的事!

小开

你只需要配置你的默认格式化程序并勾选设置中的格式保存复选框，在安装prettier后使其工作。不要乱动其他配置文件。

1 -选择Default Formatter

打开Files -> Preferences -> Settings(或Windows中的Ctrl +)。
搜索Editor: Default Formatter
选择你的默认格式化程序为Prettier - Code Formatter;

见下图;

2 -保存格式

打开Files -> Preferences -> Settings(或Windows中的Ctrl +)。
搜索Editor: Format on Save
单击Format On Save下的复选框;

见下图;

.

小开

在我的情况下，我使用的是一台windows机器，原来文件系统已经损坏，因此漂亮的提出了一个错误，因为它无法打开配置文件，由于文件系统损坏。

为了解决这个问题，我在终端上运行chkdsk /f h:，其中h是文件分区。

这解决了文件腐败和漂亮的现在工作正常。

小开

从菜单中导航到:view -> Command Palette 形成命令面板搜索Format Document，然后选择pretty作为你的格式引擎

我已经在另一个项目中工作了，但对于新的项目，我必须通过这种方式使其再次用于新项目。

小开

在我的例子中，我使用一个不存在的配置文件(见下面的屏幕截图)配置得更漂亮。这很难找到，因为没有任何错误消息，但漂亮的只是没有工作。也许这也能帮助到别人。

小开

在我的例子中，它被typescript格式化器劫持了。

它把我逼疯了，因为它一直在重新格式化我的空间!

为了修复我做了cmd+. (settings) type ->“默认formatter"

还有未检查的typescript

小开

对我来说，在VS Code设置中禁用了这个选项(然后使用默认配置更漂亮):

更漂亮:需要配置

小开

我需要做的唯一一件事就是用简单的更新包

npm install

我试了这里所有的东西，还是不行。就好像它不存在一样。pretty也作为依赖项添加到项目中。原来是其他人添加或更新了任何软件包，导致我的美容器停止工作。

希望能让别人免去我的头疼。

小开

我在WSL工作(也将为只在自定义工作区中有问题的人工作)，我尝试了所有可能的修复，直到我在vscode设置上发现这个选项卡:

选择与您的问题相关的选项卡，并再次更改所有您想要的设置，并更改设置“文件:自动保存”;onFocusChange"或“;onWindowChange"。

小开

对我来说，当我在. preterrc文件中去掉parser: json时，它起作用了。

小开

检查你的package.json文件中prettier的属性，因为这将优先。

{
"name": "example",
"scripts": { ... },


"prettier": {},


"dependencies": { ... },
"devDependencies": { ... },
}

删除此属性，将使用.prettierrc文件。

优先级顺序在漂亮的文档中声明。

为什么在VS code中pretty没有格式化代码?