当我在Vue组件上执行格式化文档命令时。vue文件VSCode将所有单引号字符串替换为双引号字符串。
在我的具体情况下,该规则与要求单引号的electronic -vue lint配置冲突。
我没有安装更漂亮的扩展(没有更漂亮。singleQuote在我的设置)
如何定制VSCode来避免这种情况?
当我在Vue组件上执行格式化文档命令时。vue文件VSCode将所有单引号字符串替换为双引号字符串。
在我的具体情况下,该规则与要求单引号的electronic -vue lint配置冲突。
我没有安装更漂亮的扩展(没有更漂亮。singleQuote在我的设置)
如何定制VSCode来避免这种情况?
当前回答
对于像我这样的新手:
在顶部导航栏的菜单中:选择“文件->首选项->设置”。 在搜索文本框中,输入Quote 在下面的过滤列表中,寻找齿轮图标,并在它旁边-“Prettier”。点击复选框启用“更漂亮:单引号”
其他回答
After struggling with the issue I found a useful tool. If you click on the Prettier word in the right lower corner you will get the Output window opened. In that window once you run formatting (in my case it is Alt + Shift + F) you will see all the configurations which prettier will use to format the document. So, we can clearly see that specifying the prettier in the prettier.singleQuote is wrong. It should just be singleQuote. Hence, having the .prettierrc file in my user root folder with the following contents produced the desired result:
{
"trailingComma": "none",
"useEditorConfig": false,
"singleQuote": true
}
此外,请确保已安装了Prettier扩展。
正如@attdona所指出的,Vetur扩展包括了prettier。
虽然您可以根据接受的答案更改更漂亮的设置,但您也可以更改vue组件特定区域的格式化程序。
例如,在这里,我设置Vetur使用vcode -typescript格式化器,因为它默认使用单引号:
对于像我这样的新手:
在顶部导航栏的菜单中:选择“文件->首选项->设置”。 在搜索文本框中,输入Quote 在下面的过滤列表中,寻找齿轮图标,并在它旁边-“Prettier”。点击复选框启用“更漂亮:单引号”
对我有用的是设置。prettierrc。Json配置文件。把它放在你的项目的根,像这样的示例配置:
{
"singleQuote": true,
"trailingComma": "all",
"tabWidth": 2,
"semi": true,
"arrowParens": "always"
}
触发Format Document命令后,一切都能正常工作。
旁注:这个解决方案的一个好处是,由于目前的配置文件,每个团队成员都获得了相同的格式化输出。
我在控制毛边和更漂亮的排版方面有很多问题。我有自己的规矩,让自己看起来更漂亮
"prettier/prettier": [
"error",
{ "singleQuote": true, "trailingComma": "none" }
],
和。prettierrc文件中的规则
{
"tabWidth": 2
}
但是我的.prettierrc文件没有得到处理。我的解决方案是在开发依赖中安装prettier作为一个包。所以对我有效的解决方案是安装所有这些包eslint-config-prettier eslint-plugin-prettier and prettier。