vscode配置Volar对vue3的格式化支持

9月前作者：牧也の旅行分类：Toy博客阅读(59) 违法举报

这篇具有很好参考价值的文章主要介绍了vscode配置Volar对vue3的格式化支持。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

起因

在浏览vue的官方文档时，看到了一句Volar VSCode 插件为 Vue SFC 提供了开箱即用的格式化功能，官方推荐的，立马试试

方法一

在vscode中启用volar时，鼠标右键会显示使用…进行格式化
vscode vue3格式化,vue3,vscode,vue.js,javascript
选择volar

方法二

通过项目vscode编辑器配置来保存时自动进行格式化
在项目根目录下创建以下文件并配置

.vscode/settings.json

{
  "[vue]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Vue.volar"
  }
}

自动保存时会按照volar进行格式化
(ps: 其实提供的格式化相当有限，比如限定单引号啥的都没有，想要完整功能还是得上eslint+prettier)文章来源地址https://www.toymoban.com/news/detail-537186.html

到了这里，关于vscode配置Volar对vue3的格式化支持的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

vscode-vue项目格式化

Prettier Vetur

2024年02月11日
浏览(49)
vue3 之数据格式化函数

在很多项目中，都会有数据字典表，前端通过请求后端拿到数据字典表里的数据，一般在页面列表上面状态数据都会是返回的数字，前端需要把数字转换成字典表里对应的数据值，下面写了一个前端写死的数据，stateMap里的数据可以换成从接口请求过来的数据

2024年02月19日
浏览(41)
解决方案：VSCode中配置自动格式化实现Ctrl+S自动格式化代码

一致的代码风格不仅仅有助于提高可读性，还可以减少错误和漏洞的产生。在编码中，在VSCode中配置Prettier插件并实现使用Ctrl+S自动格式化代码，其可以：根据事先定义的规则自动调整代码的缩进、换行、空格等格式，从而让所有开发人员的代码风格保持一致。这有助于提高

2024年02月06日
浏览(76)
Webstorm和VsCode 统一格式化配置

一。下载依赖包 package.json package.json //提交代码进行eslint校验二。webstorm 1. 2. 3. 4.根目录新建.eslintrc.js 5.根目录新建.prettierrc.js 6.根目录新建lint-staged.config.js 7.重启项目 tips webstorm scss url报红三。vscode配置 1.安装prettier、eslint 2.配置.vscode settings.json 3.重启vscode

2024年02月02日
浏览(70)
vscode调教配置：快捷修复和格式化代码

配置vscode快捷键，让你像使用idea一样使用vscode，我们最常用的两个功能就是格式化代码和快捷修复，所以这里修改一下快捷修复和格式化代码的快捷键。在设置中，找到快捷键配置：然后搜索：快捷修复在快捷键绑定的地方，双击一下，然后输入你的快捷键，就可以了

2024年02月10日
浏览(49)
vscode 配置rust、golang代码格式化方法

点击左下角齿轮按钮，点击Settings，如下图：点击右上角切换到Settings.json文件。如下图增加rust、golang 配置如下，假如存在默认格式化配置请注释或删除。重启vscode ide，尝试编写rust、golang 代码，然后按cmd/control+s 按钮保存，即可自动格式化代码。

2024年02月08日
浏览(58)
VSCode C/C++ 格式化配置【最完整准确版本】

一、下载Clang-format 1、在VSCode插件商店下载 C/C++插件和 Clang-format 插件二、生成 .clang-format 文件 2、去到: C:Users你的用户名.vscodeextensionsms-vscode.cpptools-1.14.4-win32-x64LLVMbin 3、打开终端，cd到此处，执行以下代码： .clang-format.exe -style=\\\"llvm\\\" -dump-config .clang-format 4、然后就会得

2024年02月05日
浏览(42)
vscode自动格式化插件配置说明（Prettier - Code formatter）

1、在应用商店搜索Prettier并下载 2、下载完成之后点击扩展设置 3、点击右上角json配置文件 4、在文件中添加如下代码 5、如果需要格式化vue文件，建议配合ESLint、Vetur两个插件一起使用一款好用的eslint自动修复插件：eslint-config

2024年02月12日
浏览(57)
VSCode 配置 python 代码格式化工具（yapf，autopep8）

需要注意的是，yapf的配置选项都是可选的，你可以根据自己的需要选择使用哪些选项。不过，使用太多选项可能会导致代码格式化的规则变得复杂，对代码的可读性有影响。因此，建议尽量使用最少的选项来保持代码的简洁性。 aggressive: 这个选项表示在格式化代码时使用更

2024年02月09日
浏览(95)
vscode配置文件-vutur自动格式化-eslint校验-属性换行

效果

2024年02月03日
浏览(69)