vue3+ts项目保存自动格式化以及通过配置 prettier实现多人协作下统一代码格式

wangshuo0520ai

于 2022-08-09 14:27:40 发布

阅读量3.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签： vscode javascript 前端

本文链接：https://blog.csdn.net/wangshuo0520ai/article/details/126244833

在多人协作的Vue3+TypeScript项目中，为确保代码格式统一，文章介绍了如何使用VSCode及其插件Prettier、Ant Design Vue helper、Vue Language Features (Volar) 和 ESLint。通过开启'Editor: Format on Save'，配合设置.json文件和prettier.config.js，实现保存时自动格式化代码，促进团队协作效率。

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

背景：多个成员协作开发一个项目的时候需要统一代码格式和规范，避免出现一些不必要的问题
首先: 需要安装几个vscode编辑器插件
1、Prettier - Code formatter
2、Ant Design Vue helper（这个插件视个人情况，因为我的项目上基于antdv开发的）
3、Vue Language Features(Volar)
4、Eslint
在这里插入图片描述然后需要找到vscode 设置-格式化，把 Editor: Format on Save勾选上

然后需要找到setting.json文件，去配置一些我们需要的项，给大家说一个快速找到setting.json文件的方法，请看下方图片：
打开设置界面后，点这个小图标即可快速打开setting.json文件
setting配置项：

{
   
    
  // 文件保存自动格式化 
  "editor.formatOnSave": true, 
    // 格式化插件设置为 prettier 
    "[html]": {
   
    "editor.defaultFormatter": "esbenp.prettier-vscode" },
    "[javascript]": {
   
    "ed