vscode html 换行设置

打开vscode设置,在上方输入框搜索settings,进入到settings.json文件。添加以下属性:
在这里插入图片描述

: // - auto: 仅在超出行长度时才对属性进行换行。
    // - force: 对除第一个属性外的其他每个属性进行换行。
    // - force-aligned: 对除第一个属性外的其他每个属性进行换行,并保持对齐。
    // - force-expand-multiline: 对每个属性进行换行。
    // - aligned-multiple: 当超出折行长度时,将属性进行垂直对齐。
12345
{  
    "eol": "\n", //all.行结束符
    "end_with_newline": false,//all,确保在文件结束时换行
    "indent_char": "\t",//all,缩进字符,默认" ",\t 跳格(移至下一列)
    "indent_size": 4,//all,缩进尺寸,默认4
    "indent_with_tabs": true, //all,使用tab缩进,将会覆盖“indent_size”和“indent_char”设置,默认false
    "preserve_newlines": true,//all,保留空行,默认“true”(保留换行符)
    "max_preserve_newlines": null,//html、js,保留连续换行符个数,默认10(比如设为2,则会将2行以上的空行删除为只保留1行)
    "wrap_line_length": 0,//html、js,在 n 个字符之后换行(设置为0忽略换行)
    "html":{
        "extra_liners":["head", "body", "/html"], //配置标签列表,需要在这些标签前面额外加一空白行(换行符)
        "indent_body_inner_html":false,//缩进 < body> 中的元素,默认:true
        "indent_handlebars":true,//格式和缩进,默认为false
        "indent_head_inner_html":false, //缩进 < head> 中的元素,默认:true
        "indent_inner_html":true,// 缩进< head>和< body>中的元素(head和body也会缩进),默认:false
        "indent_scripts":"normal",//缩进< script> 标签里的代码,有三个值:“keep”(对齐< script>标签)、“separate”(对齐左边界)、“normal”(正常缩进),默认:“normal”
        "inline":[],//各种标签的缩进[ "a", "abbr", "area", "audio", "b", "bdi", "bdo", "br", "button", "canvas", "cite", "code", "data", "datalist", "del", "dfn", "em", "embed", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "map", "mark", "math", "meter", "noscript", "object", "output", "progress", "q", "ruby", "s", "samp", "select", "small", "span", "strong", "sub", "sup", "svg", "template", "textarea", "time", "u", "var", "video", "wbr", "text", "acronym", "address", "big", "dt", "ins", "strike", "tt" ]
        "wrap_attributes":"auto",//将属性换到新行,有5个值:“auto”(不换行)、“force”(第2个起换行)、 “force-aligned”(第2个起换行,与第1个属性对齐)、 “force-expand-multiline(所有属性都换行),默认:“auto”
        "wrap_attributes_indent_size":4,//属性换行缩进大小,默认:indent_size
        "unformatted":[],//数组中的标签不会重新格式化,默认:[]
        "content_unformatted":[],//数组中标签的内容不会重新格式化,默认:[“pre”,“textarea”]
        "void_elements":[],//定义自关闭标签,["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr", "!doctype", "?xml", "?php", "?=", "basefont", "isindex"]
    },
    "js":{
        "brace_style":"collapse",//括号风格,“collapse-preserve-inline”, “collapse”, “expand”, “end-expand”, or “none” ,默认“collapse”
        "break_chained_methods":true,//中断多行间的链式方法调用,默认true
        "comma_first":true,//将逗号放在新行的开头而不是结尾,默认为false
        "e4x":true,//	不受影响地传递E4X xml文本,默认为false
        "indent_level":0,//	初始缩进级别
        "jslint_happy":true,//	开启jslint-stricter的严格模式(强制开启“space_after_anon_function”选项),默认false
        "keep_array_indentation":true,//	保持数组缩进,默认false
        "keep_function_indentation":true,//	保持函数缩进,默认false
        "operator_position":"before-newline",//	将操作符移动到新行之前或之后,或保持原样。“before-newline”, “after-newline”,或"preserve-newline",默认为"before-newline"
        "space_after_anon_function":true,//	在匿名函数的括号前加空格,默认为false
        "space_after_named_function":,//	在具名函数之前加一个空格
        "space_before_conditional":true,//	在条件语句之前保留一个空格,默认true
        "space_in_empty_paren":true,//	在括号中留空格,默认为false
        "space_in_paren":true,//	在函数参数之间增加空格,默认为false
        "unescape_strings":true,//	解码用xNN表示法编码的可打印字符,默认为false
        "unindent_chained_methods":true,//	Unindent链接方法,默认为false
    }
    "css":{
        "newline_between_rules":false,//在css规则之间添加一个换行符,默认为false
        "selector_separator_newline":true,//在多个选择器之间加一个换行符
        "space_around_combinator":false,//确保选择器分隔符周围的空间 (>+~)
    }
}
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以按照以下步骤进行配置: 1. 安装 `eslint` 和 `prettier` 插件: ``` npm install eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node -D ``` 2. 在 VS Code 中打开 `settings.json` 文件,添加以下配置: ``` "editor.formatOnSave": true, "editor.tabSize": 2, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", "vue", "html", "vue-html" ], "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } ``` 上述配置实现了在保存文件时,自动格式化代码,并按照 `prettier` 的规则进行换行。 3. 在项目根目录下添加 `.eslintrc.js` 文件,添加以下配置: ``` module.exports = { root: true, env: { node: true }, extends: [ "eslint:recommended", "plugin:node/recommended", "plugin:prettier/recommended" ], plugins: ["prettier"], rules: { "prettier/prettier": "error" } }; ``` 上述配置中,通过 `eslint:recommended` 和 `plugin:node/recommended` 启用了基本的 `eslint` 规则和 Node.js 环境的规则,通过 `plugin:prettier/recommended` 启用了 `prettier` 和 `eslint` 的规则集成,同时添加了 `prettier` 插件,并开启了 `prettier/prettier` 规则,以使 `prettier` 的规则生效。 应用以上配置后,您就可以在 VS Code 中愉快地编写 JavaScript 或 Vue 项目,并且自动格式化代码和换行

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值