首页 > 其他分享 >vscode设置vue3代码格式化

vscode设置vue3代码格式化

时间:2024-01-10 10:14:58浏览次数:42  
标签:vue 格式化 esbenp vscode defaultFormatter editor vue3 prettier

下载插件
可以使用Volar或Prettier

 

 

设置格式化时选用的插件
mac:【shift】+【option】+【f】
win:【shift】+【alt】+【f】

 

选择其中之一


左下角选择【设置】

 


点击右上角的文件切换图标,可以切换到setting.json

 


实际使用
假设这是默认代码状态

 

使用Prettier默认配置
"[vue]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
<template>
  <div class="page-all">
    <div
      v-for="itemc in item.children"
      :key="itemc.name"
      :class="{ one: itemc.level == 1, two: itemc.level == 2 }"
    >
      <div class="two-block">
        {{ itemc.name }}
      </div>
    </div>
  </div>
</template>

 

使用Prettier添加自定义配置

在项目根目录新建文件.prettierrc

{
  "printWidth": 200
}

或在setting.json添加设置

  //配置对 .vue 文件的格式化
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.printWidth": 200, // 超过最大值换行

其他属性

  "prettier.enable": true,
  "prettier.semi": false, // 句尾添加分号
  "prettier.singleQuote": true, // 使用单引号代替双引号
  "prettier.printWidth": 100, // 超过最大值换行
  "prettier.tabWidth": 4, // 缩进字节数
  "prettier.useTabs": false, // 缩进不使用tab,使用空格
<template>
  <div class="page-all">
    <div v-for="itemc in item.children" :key="itemc.name" :class="{ one: itemc.level == 1, two: itemc.level == 2 }">
      <div class="two-block">
        {{ itemc.name }}
      </div>
    </div>
  </div>
</template>

 

使用Volar
"[vue]": {
  "editor.defaultFormatter": "Vue.volar"
},
<template>
  <div class="page-all">
    <div v-for="itemc in item.children" :key="itemc.name" :class="{ one: itemc.level == 1, two: itemc.level == 2 }">
      <div class="two-block">
        {{ itemc.name }}
      </div>
    </div>
  </div>
</template>

 

完整配置文件

{
  "editor.fontSize": 14,
  "debug.console.fontSize": 14,
  "terminal.integrated.fontSize": 14,
  // 使用主题
  "workbench.colorTheme": "Solarized Light (no bold)",
  "window.openFilesInNewWindow": "on",
  //配置对 .vue 文件的格式化
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.printWidth": 200, // 超过最大值换行
  // "[vue]": {
  //   "editor.defaultFormatter": "Vue.volar"
  // },
  //配置对 .ts 文件的格式化
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //配置对 .js 文件的格式化
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  //配置对 .json 文件的格式化
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[xml]": {
    "editor.defaultFormatter": "DotJoshJohnson.xml"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.codeActionsOnSave": null,
  "workbench.editorAssociations": {
    "*.woff2": "default",
    "*.vsdx": "default",
    "*.sqlite": "default"
  },
  "[python]": {
    "editor.formatOnType": true
  },
  "git.autofetch": true,
  "markdown-pdf.breaks": true,
  "window.zoomLevel": 0.5,
}

https://blog.csdn.net/qq_23858785/article/details/134406992

标签:vue,格式化,esbenp,vscode,defaultFormatter,editor,vue3,prettier
From: https://www.cnblogs.com/j-a-h/p/17955902

相关文章

  • java8日期时间格式化DateTimeFormatter多个格式
    原文地址:datetimeformatter.ofpatternmultipleformats-掘金DateTimeFormatter 是一个用于日期时间格式化和解析的类。使用 ofPattern 方法可以创建一个格式化器,该方法接受一个日期时间格式的字符串作为参数。如果您需要在同一个 DateTimeFormatter 对象中支持多种不同的......
  • Vue学习计划-Vue3--初识Vue3,vite创建Vue3项目
    1.Vue3简介性能的提升打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking拥抱TypeScriptVue3可以更好的支持TypeScript新的特性CompositionApi(组合Api)setupref......
  • SVG 文件的引入方式之一:以 URL 的方式引入 SVG 文件,vue2、vue3+Vite vite-svg-loader
    SVG文件的引入方式之一:以URL的方式引入SVG文件,vue2、vue3+Vitevite-svg-loader〇、前言:本篇将介绍:vue2使用require()引入svg使用vue3+ts+vite使用vite-svg-loader插件引入svg使用并最终实现代码提示一样使用图标文件一、问题描述我有一个长期维护的开源项目:《......
  • 如何将自动安装的vue2.9.x转换为vue3.0
    一:概述在刚开始学习node.js时,我们都会先去官网下载然后去安装,结果通过安装的node.js直接在命令行中,下载npm和vue,下载的默认版本是vue2.9.6,如果想使用vue3.0就需要重新的安装。vue3支持UI界面开发,可以说是比较舒服的。二:安装的具体说明<1>首先卸载原来安装的vue2.9.6版本npmuninsta......
  • uni-app+vue3+ts项目搭建完整流程
    项目代码同步更新至码云uni-vue3-ts-template开发前准备利用uni-app开发,有两种方法:通过HBuilderX创建(需安装HBuilderX编辑器)通过命令行创建(需安装NodeJS环境),推荐使用vscode编辑器这里我们使用第2种方法,这两种方法官方都有详细介绍点击查看官方文档vscode安......
  • Vue3常用指令
    本小节中,我们将学习Vue3中的文本插值相关功能。文本插值语法文本插值语法如下,通常用双大括号来表示,当其绑定的变量发生变化时,插值的内容也会随之发生变化,也就是数据双向绑定功能:{{插值表达式}}示例:<scriptsetup>import{ref}from'vue';//响应式字符串变量con......
  • Vue3 深入解析:原理与核心功能概览
    引言Vue.js,作为当今最流行的前端框架之一,以其声明式编程、响应式设计和组件化开发等特性深受开发者喜爱。Vue3(也称Vue.jsNext)作为Vue.js的重大更新版本,不仅在性能上有显著提升,还在架构设计上进行了深度优化。本文将深入探讨Vue3的核心原理及其改进之处。一、CompositionAPIVu......
  • VUE3新建项目
     npminitvite-apparcher240105 //进入目录cd项目目录//安装依赖npminstall//运行npmrundev    ......
  • # Vue3 使用路由 Router
    Vue3使用路由Router之前几篇博文说了一下vue的基本语法和vue的传参,今天这篇博文稍微说一下vue3里面使用路由。介绍众所周知,vue是用来构建单页面应用的前端框架,大于大多数此类型应用来讲,都推荐使用官方支持的vueRouter,在单页面应用,客户端的JavaScript可以连接页面......
  • Vue3 自定义Hooks大全:一站式解决你的疑惑!
    前言不知道喜欢vue3的小伙伴和我是不是一样,刚上手vue3的时候对自定义hooks一脸懵逼,在一些视频网站学习的时候老师讲解到自定义hooks最喜欢用加减乘除来描述自定义hooks是咋用的,可能是我理解能力比较差吧,我看了这个加减乘除的自定义hooks之后感觉跟没看一样,还是一脸懵逼,......