【Vue】Hbuilder x代码风格设置

news2025/3/2 3:24:08

原文作者:我辈李想
版权声明:文章原创,转载时请务必加上原文超链接、作者信息和本声明。


文章目录

  • 一、Hbuilder x 默认代码风格太乱
  • 1.在工具中找到设置,点击插件设置
  • 2.代开jsbeautify.js配置


一、Hbuilder x 默认代码风格太乱

1.在工具中找到设置,点击插件设置

在这里插入图片描述

2.代开jsbeautify.js配置

//配置文档参考:https://www.npmjs.com/package/js-beautify#options
module.exports = {
	parsers: {
		".js": "js",
		".json": "js",
		".njs": "js",
		".sjs": "js",
		".wxs": "js",
		".css": "css",
		".nss": "css",
		".wxss": "css",
		".acss": "css",
		".ttss": "css",
		".qss": "css",
		".html": "html",
		".ux": "html",
		".wxml": "html",
		".nml": "html",
		".vue": "html",
		".nvue": "html",
		".axml": "html",
		".swan": "html",
		".ttml": "html",
		".qml": "html"
	},
	options: {
		"indent_size": 4,
		"indent_char": "\t",
		"indent_with_tabs": false, //使用tab缩进
		"eol": "\r\n", //行结束符
		"end_with_newline": false, //使用换行结束输出
		"indent_level": 0, //起始代码缩进数
		"editorconfig": false,
		"preserve_newlines": true, //保留空行
		"max_preserve_newlines": null, //最大连续保留换行符个数。比如设为2,则会将2行以上的空行删除为只保留1行
		"space_in_paren": false, //括弧添加空格 示例 f( a, b )
		"space_in_empty_paren": false, //函数的括弧内没有参数时插入空格 示例 f( )
		"jslint_happy": false, //启用jslint-strict模式
		"space_after_anon_function": false, //匿名函数的括号前加空格
		"space_after_named_function":false,
    
		"brace_style": "collapse,preserve-inline", //代码样式,可选值 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline
		"unindent_chained_methods": false, //不缩进链式方法调用
		"break_chained_methods": false, //在随后的行中断开链式方法调用
		"keep_array_indentation": true, //保持数组缩进
		"unescape_strings": false, //使用xNN符号编码解码可显示的字符
		"wrap_line_length": 120,
		"e4x": false, //支持jsx
		"comma_first": false, //把逗号放在新行开头,而不是结尾
		"operator_position": "before-newline",
		"unformatted": ["wbr"],
		"html": {
			"wrap-attributes":"auto",
			"wrap-attributes-indent-size":1,
			"inline":undefined,
			"unformatted":undefined,
			"content_unformatted":undefined,
			"indent_handlebars": true,
			"indent_inner_html": true,
			"indent-scripts": "normal", //[keep|separate|normal]
			"extra_liners": [] //配置标签列表,需要在这些标签前面额外加一空白行
		},
		"css": {
			"selector-separator-newline":true,
			"newline-between-rules":false
		},
		"typescript": {
			// "convert_tabs_to_spaces":true,
			"indent_multi_line_object_literal_beginning_on_blank_line": true,
			"insert_space_after_comma_delimiter": true,
			"insert_space_after_constructor": false,
			"insert_space_after_function_keyword_for_anonymous_functions": true,
			"insert_space_after_keywords_in_control_flow_statements": true,
			"insert_space_after_opening_and_before_closing_empty_braces": true,
			"insert_space_after_opening_and_before_closing_jsx_expression_braces": false,
			"insert_space_after_opening_and_before_closing_nonempty_braces": true,
			"insert_space_after_opening_and_before_closing_nonempty_brackets": false,
			"insert_space_after_opening_and_before_closing_nonempty_parenthesis": false,
			"insert_space_after_opening_and_before_closing_template_string_braces": false,
			"insert_space_after_semicolon_in_for_statements": true,
			"insert_space_after_type_assertion": false,
			"insert_space_before_and_after_binary_operators": true,
			"insert_space_before_function_parenthesis": false,
			"insert_space_before_type_annotation": true,
			"place_open_brace_on_new_line_for_control_blocks": false,
			"place_open_brace_on_new_line_for_functions": false,
			"semicolons": "ignore",// values include "ignore" | "insert" | "remove"
			"trim_trailing_whitespace": true
		}
	}
}

需要改动的代码,一定要改keep_array_indentation,要不后边碰到数组+大括号你回烦死。

"brace_style": "collapse,preserve-inline", //代码样式,可选值 [collapse|expand|end-expand|none][,preserve-inline] [collapse,preserve-inline

"keep_array_indentation": true, //保持数组缩进

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/895203.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SENet网络分析

文章目录 注意力机制:AttentionBiased Competition Theorybottom-up和top-down注意力 SE BlockSqueeze操作Excitation操作scale操作与原结构合并计算复杂度评估 实验与其他网络对比数据集实验内部参数对比实验进一步评估Squeezeexcitation Squuze-and-Excitation网络…

流弊的docker

docker就是隔离式运行软件组(多个软件),docker分为dockerfile文件,images 镜像,容器,本地仓库,远程仓库。 构建dockerFile文件,可以获得images镜像 运行镜像获得容器 || 容器提交获得…

MS Word表格宽度自适应

x.1 问题: 你的表格可能并没有占满整行,且右对齐,例如如下, x.2 解决方式 这个时候你想右对齐,你可以这么操作,点左上角的十字全选表格, 在布局里选择自动对齐, 对齐方式选择居中右…

vscode远程连接Linux失败,提示过程试图写入的管道不存在(三种解决办法)

vscode报错如下: 一、第一种情况 原因是本地的known_hosts文件记录服务器信息与现服务器的信息冲突了,导致连接失败。 解决方案就是把本地的known_hosts的原服务器信息全部删掉,然后重新连接。 二、第二种情况 在编写配置文件config时&…

SQL力扣练习(十一)

目录 1.树节点(608) 示例 1 解法一(case when) 解法二(not in) 2.判断三角形(610) 示例 1 解法一(case when) 解法二(if) 解法三(嵌套if) 3.只出现一次的最大数字(619) 示例 1 解法一(count limit) 解法二(max) 4.有趣的电影(620) 解法一 5.换座位(626) 示例 …

VoxWeekly|The Sandbox 生态周报|20230814

欢迎来到由 The Sandbox 发布的《VoxWeekly》。我们会在每周发布,对上一周 The Sandbox 生态系统所发生的事情进行总结。 如果你喜欢我们内容,欢迎与朋友和家人分享。请订阅我们的 Medium 、关注我们的 Twitter,并加入 Discord 社区&#xf…

动漫3D虚拟人物制作为企业数字化转型提供强大动力

一个 3D 虚拟数字人角色的制作流程,可以分为概念设定-3D 建模-贴图-蒙皮-动画-引擎测试六个步骤,涉及到的岗位有原画师、模型师、动画师等。角色概念设定、贴图绘制一般是由视觉设计师来完成;而建模、装配(骨骼绑定)、渲染动画是由三维设计师来制作完成。…

QtCreator中设置自定义注释格式

QtCreator--工具--选项--文本编辑器--片段--组:C--添加 在其中添加一个key为:header,value如下图的组合: /*! ProjName : %{CurrentProject:Name}* FileName : %{CurrentDocument:FileName}* Brief : * Details : * Aut…

六大需求管理工具:满足您的需求管理需求

在项目开发和产品设计中,需求管理是确保项目成功的关键所在。通过使用专业的需求管理工具,团队可以更好地追踪、记录和分析需求,提高工作效率并确保项目按时完成。 市场上有许多需求管理工具可供选择,当下有什么好用的需求管理工…

Linux玩家福音,StarLite 5问世:搭载 Ubuntu、售 3285 元人民币

8月18日消息,英国硬件公司Star Labs近日发布了旗下最新款Linux平板电脑StarLite 5。这款平板配备了12.5英寸屏幕,采用了IPS技术和10点多点触摸,显示效果细腻、触控灵敏。屏幕比例为16:10,分辨率高达288x192,能够呈现出…

RISC-V公测平台发布· CoreMark测试报告

一. CoreMark简介 CoreMark是一款用于评估CPU性能的基准测试程序,它包含了多种不同的计算任务,包括浮点数、整数、缓存、内存等方面的测试。CoreMark的测试结果通常被用来作为CPU性能的参考,它可以帮助开发人员和系统管理员评估不同处理器和…

Vue 2组件基础

一个简单的组件示例&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</titl…

IDEA两种方法修改生成的jar包名字

方法一&#xff1a; 直接修改pom文件中的如下部分 <artifactId>excelreport</artifactId> <version>0.0.1-SNAPSHOT</version> <name>excelreport</name> <description>excelreport</description> 修改完成后&#xff0c;点…

慧函数生成代码应用到 IDEA 遇到依赖包问题怎么办?

以“将 map 转换为 json”需求为例&#xff0c;在慧函数界面生成代码。 生成后的代码复制到 IDEA 中&#xff0c;我们可以看到复制进来有导入包报错。 首先解决 com.feisuanyz.flow 引入失败的问题&#xff0c;前往飞算云智官网 从开发者学院【文档中心】的 Java 全自动开发工具…

【HarmonyOS】服务卡片 API6 JSUI跳转不同页面

【引言】 “JS卡片支持为组件设置action&#xff0c;包括router事件和message事件&#xff0c;其中router事件用于应用跳。若设置router事件&#xff0c;则action属性值为"router"&#xff1b;abilityName为卡片提供方应用的跳转目标Ability名&#xff1b;params中的…

Hadoop学习:深入解析MapReduce的大数据魔力(三)

Hadoop学习&#xff1a;深入解析MapReduce的大数据魔力&#xff08;三&#xff09; 3.5 MapReduce 内核源码解析3.5.1 MapTask 工作机制3.5.2 ReduceTask 工作机制3.5.3 ReduceTask 并行度决定机制 3.6 数据清洗&#xff08;ETL&#xff09;1&#xff09;需求2&#xff09;需求…

一起创建Vue脚手架吧

目录 一、安装Vue CLI1.1 配置 npm 淘宝镜像1.2 全局安装1.3 验证是否成功 二、创建vue_test项目2.1 cmd进入桌面2.2 创建项目2.3 运行项目2.4 查看效果 三、脚手架结构分析3.1 文件目录结构分析3.2 vscode终端打开项目 一、安装Vue CLI CLI&#xff1a;command-line interface…

(搜索) 剑指 Offer 13. 机器人的运动范围 ——【Leetcode每日一题】

❓剑指 Offer 13. 机器人的运动范围 难度&#xff1a;中等 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 到坐标 [m-1,n-1] 。一个机器人从坐标 [0, 0] 的格子开始移动&#xff0c;它每次可以向左、右、上、下移动一格&#xff08;不能移动到方格外&#xff09;&…

基于 SpringBoot+Vue 的家政服务管理平台(附源码,数据库,教程)

文章目录 1. 背景2.主要技术3. 可行性分析4.系统设计5系统的详细设计与实现5.1前台模块设计5.2后台功能模块 源码下载地址 1. 背景 本系统主要是设计出家政服务管理平台&#xff0c;基于B/S构架&#xff0c;后台数据库采用了Mysql&#xff0c;可以使数据的查询和存储变得更加有…