vscode 中的 vue 格式化（一）

最新推荐文章于 2023-11-14 20:26:26 发布

转载最新推荐文章于 2023-11-14 20:26:26 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/tianma3798/blog/2249022

文章标签：

#javascript #开发工具 #python #ViewUI

本文介绍在VSCode中开发Vue项目的必备插件，如vetur和prettier，详细说明了如何配置以实现代码高亮、自动补全、格式化等功能，并调整预设以符合个人编码习惯。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

使用 vscode 开发 vue, 必不可少的插件包括 vetur, prettier

vetur 提供了下面一系列的功能：

Features

Syntax-highlighting 高亮
Snippet 代码片段
Emmet 缩写语法
Linting / Error Checking 代码格式检查
Formatting 代码格式化
Auto Completion 自动补全
Debugging debug

这些功能挺齐全了，但是 vetur 使用的代码格式化工具是 prettier ，所以如果不安装 prettier 的话也是不能正常完成格式化的。

不过 prettier 的默认是 tab 占两个空格，不符合我的习惯，所以要改成 4 个空格。

另外 vscode 自身的 html 和 js 的格式化就已经挺符合我的习惯了，因此也改为使用 vscode 的。

最终的设置如下：

"vetur.format.defaultFormatter.js": "vscode-typescript",

"vetur.format.defaultFormatter.html": "js-beautify-html",

"vetur.format.defaultFormatter.ts": "vscode-typescript",

"vetur.format.defaultFormatter.css": "prettier",

"prettier.disableLanguages": [],

"prettier.tabWidth": 4

配置截图：