解决在写Vue时,格式化代码

Igor Web服务器评论5,204字数 1316阅读4分23秒阅读模式
1、直入主题
a. 修改:"wrap_attributes": "force-expand-multiline"

为:"wrap_attributes": "aligned-multiple"

b. 添加 "vetur.format.defaultFormatter.html": "js-beautify-html"
2、操作

安装 vsCode 插件:Vetur, vue-beautify
打开设置 搜索 vetur.format.defaultFormatterOptions > 点击在 settings.json 中编辑
解决在写Vue时,格式化代码-图片1

下图是我修改后的:
解决在写Vue时,格式化代码-图片2

3、原理

1.关于vetur.format.defaultFormatter.html

// 这是因为在VSCode1.7.2中替换了内置格式化插件。解决办法是在VScode设置(setting.json)中,配置如下规则
{
   "prettier.singleQuote": true,
   "prettier.semi": false,
   "vetur.format.defaultFormatter.html": "js-beautify-html",
   "vetur.format.defaultFormatterOptions": {
      "wrap_attributes": "force-aligned"
    }
}
// 详情见 vuejs/vetur#476
  1. 关于vetur.format.defaultFormatterOptions
// 对属性进行换行 wrap_attributes
// - auto: 仅在超出行长度时才对属性进行换行。
// - force: 对除第一个属性外的其他每个属性进行换行。
// - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐。
// - force-expand-multiline: 对每个属性进行换行。
// - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐。

// prettyhtml(doc: string, options?): vFile
// - tabWidth: 缩进级别的空间宽度(默认值:2)
// - useTabs: 使用制表符代替空格进行缩进(默认值:false)
// - printWidth: 使用不同的最大行长度(默认值:80)
// - usePrettier: 对嵌入内容使用更漂亮(默认值:true)
// - prettier: 为嵌入的内容使用自定义更漂亮的设置(默认:本地配置)
// - singleQuote: 使用单引号代替双引号(默认值:false)
// - wrapAttributes: 强制包装属性(当它有多个时,默认:false)
// - sortAttributes: 按字母顺序对属性进行排序(默认值:false)

"vetur.format.defaultFormatterOptions": {
    "js-beautify-html": {
        "wrap_attributes": "force-aligned"
    },
    "prettyhtml": {
        "printWidth": 100,
        "singleQuote": false,
        "wrapAttributes": false,
        "sortAttributes": false
    }
}

文章末尾固定信息

历史上的今天
11 月
30
weinxin
我的微信
我的微信
一个码农、工程狮、集能量和智慧于一身的、DIY高手、小伙伴er很多的、80后奶爸。
 
Igor
  • 本文由 Igor 发表于 2022-11-3005:23:16
Vue使用JsBridge与APP交互 Web服务器

Vue使用JsBridge与APP交互

现在在做的项目是 hybrid 开发,H5 页面会嵌入到 IOS 客户端 app 中,于是就涉及到了 H5 与 IOS 交互的问题。在这里记录一下项目中用到的交互方式,重点介绍 WebViewJava...
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证