VSCode - Beautify插件配置

注: 本文摘自 黑火巨雷 - 简书

1. 在工作目录下建立.jsbeautifyrc文件

官方文档

{
   "brace_style": "none,preserve-inline",
   "indent_size": 2,
   "indent_char": " ",
   "jslint_happy": true,
   "unformatted": [""],
   "css": {
     "indent_size": 2
   }
 }

注释

  • brace_style,格式风格,详见官方说明(为避免和eslint默认检查冲突,建议此属性设置为 none,preserve-inline)
  • indent_size,缩进长度(为避免和eslint默认检查冲突,建议此属性设置为 2)
  • indent_char,缩进填充的内容(充满♂)
  • jslint_happy:true,若你要搭配jslint使用,请开启此选项
  • unformatted:["a","pre"],这里放不需要格式化的标签类型。注意 template 也是默认不格式化的,.vue 的template 标签如果需要格式化请在 .jsbeautifyrc 重新定义不带 template 的声明属性
2. 启用保存时自动

在VSCode的配置文件里添加 editor.formatOnSave:true 即可实现保存时自动格式化

3. 快捷键

在 VS Code 的键盘快捷方式文件里添加

{
  "key": "cmd+b", // 自己定键位
  "command": "HookyQR.beautify",
  "when": "editorFocus"
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: VSCode Beautify插件是一款用于格式化代码的插件,可以使代码更加美观易读。以下是VSCode Beautify插件配置方法: 1. 安装VSCode Beautify插件。 2. 打开VSCode的设置界面,搜索“beautify”,找到“Beautify: Config”选项,点击“Edit in settings.json”按钮。 3. 在settings.json文件中添加以下配置: ``` "beautify.language": { "js": { "type": ["javascript", "json"], "filename": [".jshintrc", ".jsbeautifyrc"] }, "css": ["css", "scss"], "html": ["htm", "html", "ejs"] }, "beautify.tabSize": 4, "beautify.useTabs": false, "beautify.wrapLineLength": 120, "beautify.end_with_newline": true, "beautify.indent_size": 4, "beautify.indent_char": " ", "beautify.preserve_newlines": true, "beautify.max_preserve_newlines": 10, "beautify.jslint_happy": true, "beautify.space_before_conditional": true, "beautify.unescape_strings": false, "beautify.wrap_attributes": "auto", "beautify.wrap_attributes_indent_size": 4, "beautify.wrap_attributes_preserve_newline": true, "beautify.wrap_attributes_force": false, "beautify.wrap_line_preserve_indent": true, "beautify.wrap_comments": true, "beautify.wrap_comments_indent_size": 4, "beautify.wrap_comments_preserve_newline": true, "beautify.wrap_iife": true, "beautify.wrap_iife_indent_size": 4, "beautify.extra_liners": [ "html", "head", "body", "/html", "/head", "/body", "br", "meta", "link", "input", "?php", "?", "!--[if", "![endif]--" ] ``` 4. 保存settings.json文件,即可完成VSCode Beautify插件配置。 以上就是VSCode Beautify插件配置方法,希望对您有所帮助。 ### 回答2: VSCodeBeautify插件是用于格式化代码的工具,可以帮助开发者将代码编排整齐,提高代码可读性与美观度。下面是针对Beautify插件配置讲解: 安装: 1. 打开VSCode,进入扩展商店,在搜索框中输入并下载Beautify插件。 2. 安装完毕后,在左侧的侧边栏中可以找到Beautify插件配置: 1. 进入设置界面,搜索"beautify"。 2. 找到"Beautify:Config"选项,点击"Edit in setting.json"。 3. 在文件中添加以下配置: ```json { "beautify.ignoreSublimeText": true, //忽略Sublime text注释 "beautify.language": { "css": ["css", "scss", "less"], "html": ["html", "htm", "slim"], "js": ["javascript", "json"] }, //指定需要格式化的文件类型 "beautify.options": { "indent_size": 4, //缩进大小 "indent_with_tabs": true, //使用tab键或空格缩进 "eol": "\n", //换行符 "brace_style": "collapse", //使用何种代码块风格 "space_after_anon_function": true //是否在匿名函数的括号后面加空格 } } ``` 4. 设置之后,重载VSCode即可生效。 使用: 在VSCode中,用户可以手工对代码进行格式化,也可以设置快捷键。快捷键的配置如下: 1. 进入"Preferences: Open Keyboard Shortcuts",搜索"Format Document With"。 2. 右键选择"Copy",然后在"keybindings.json"文件中添加以下内容: ```json { "key": "ctrl+alt+l", "command": "editor.action.formatDocument", "when": "editorTextFocus && !editorReadonly" } ``` 3. 保存文件,重载VSCode即可使用快捷键自动格式化代码。 总结: 通过对Beautify插件配置和使用,可以在开发过程中提高代码的可读性和美观度。同时,根据开发需求可以设置不同的格式化规则和快捷键。 ### 回答3: VSCode Beautify 是一款常用的格式化代码插件,在我们写代码时可以提高代码的可读性,让代码更加规范。下面是 VSCode Beautify 插件配置方法。 首先,在 VSCode 软件中安装 Beautify 插件插件下载完毕后查看 Beautify 插件的介绍,里面有插件的设置方式。 1. 配置 VSCode Beautify 插件VSCode 的菜单中,点击“文件”->“首选项”->“设置”,选择“扩展”->“Beautify”选项,在其中可以设置需要美化的文件类型,例如 HTML、CSS、JavaScript 等,还可以配置其他一些相关设置。 2. 配置代码美化规则 在 VSCode 软件中,支持通过 `.jsbeautifyrc` 文件来配置美化规则,这个文件需要存放在用户的根目录下。所以我们需要在用户的根目录下新建这样一个文件,并根据需求进行相应的设置。 3. 设置保存时自动美化代码 我们在写代码时可能不想总是手动触发代码美化,所以可以设置 VSCode Beautify 插件在保存时自动触发代码美化。方法是在“扩展”->“Beautify”选项中,将“Format On Save”设置为 true 即可。 总的来说,使用 Beautify 插件需要根据实际需求进行不同的配置。只有对 Beautify 插件进行了合理的设置,它才能真正地提高我们代码的可读性,方便我们进行开发。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值