使用vscodebeautify美化代码

发布时间：2023-05-19

随着编程语言和开发框架的不断增多，编写高质量的代码变得越来越重要。但是，编写高质量的代码需要耗费大量的时间和精力，这也是为什么编程工具和插件如此受欢迎的原因之一。在这篇文章中，我们将介绍如何使用 vscodebeautify 插件来美化你的代码。

一、安装和设置 vscodebeautify 插件

首先，我们需要在 VS Code 中安装 vscodebeautify 插件。你可以按下 Ctrl + Shift + X 快捷键，然后在搜索框中输入 "beautify" 查找这个插件，并安装它。 安装完插件后，你需要进行简单的设置才能使用它。点击左侧 VS Code 导航栏中的 "Extensions" 图标，选择 "beautify" 插件，在右侧 "Extension detail" 中找到 "Extension Settings"，可以看到关于 vscodebeautify 插件的设置。在其中，你可以选择你需要使用什么样的美化风格。例如，我选择 "js-beautify" 作为代码美化引擎。

/**
 * vscodebeautify setting example.
 */ 
{
    // 插件名字（多个美化工具使用，请用 ',' 分隔） 
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json",
                "jsonc",
                "json5",
                "babel"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify",
                ".jshintrc.json",
                ".jshintrc.yaml",
                ".jshintrc.yml",
                "jshintignore",
                ".eslintrc",
                ".eslintignore"
            ],
            "module": [],
            "config": [
                ".jsbeautifyrc",
                ".jsbeautifyrc.json",
                ".jsbeautifyrc.yaml",
                ".jsbeautifyrc.yml",
                ".jsbeautifyrc. jsonc"
            ]
        }
    },
    // 设置 js-beautify 工具的格式化风格为 "js-beautify" 
    "beautify.builtin.js": {
        "visitors": {
            "UseStrict": [
                function (node) {
                    return {
                        type: 'BinaryExpression',
                        operator: '!=',
                        left: {
                            type: 'UnaryExpression',
                            operator: '+',
                            prefix: true,
                            argument: {
                                type: 'Literal',
                                value: 0
                            }
                        },
                        right: {
                            type: 'Literal',
                            value: 0
                        }
                    };
                },
                function (node) {
                    return {
                        type: 'UnaryExpression',
                        operator: 'void',
                        argument: {
                            type: 'Literal',
                            value: 0
                        },
                        prefix: true
                    };
                }
            ]
        },
        "options": {
            "indent_size": 4,
            "indent_char": " ",
            "eol": "\n",
            "indent_level": 0,
            "indent_with_tabs": false,
            "preserve_newlines": true,
            "max_preserve_newlines": 4,
            "jslint_happy": false,
            "space_after_anon_function": true,
            "brace_style": "collapse",
            "keep_array_indentation": false,
            "keep_function_indentation": false,
            "space_before_conditional": true,
            "break_chained_methods": false,
            "eval_code": false,
            "unescape_strings": false,
            "wrap_line_length": 0,
            "wrap_attributes": "auto",
            "wrap_attributes_indent_size": 4,
            "end_with_newline": false,
            "do_not_indent_pretty_lists": false,
            "disabled_rules": ""
        }
    }
}

二、使用 vscodebeautify 美化代码

安装完毕并设置好美化样式，现在我们可以尝试美化一下代码了。在 VS Code 中打开一个要美化的文件，然后按下 Ctrl + Shift + P 或者使用右键菜单 "Command Palette" 打开命令面板。接下来，在命令面板中搜索 "format document"，并选择它。你会发现，你的代码现在已被美化成所选美化样式的代码。 还有一种快捷键的方式可以美化代码，就是在你的文件中使用 Shift + Alt + F。这个快捷键可以快速格式化当前文件或者你当前选择的代码片段。

三、如何将 vscodebeautify 应用到多个文件

默认情况下，我们需要一个个打开文件才能应用 vscodebeautify 插件，但是如果你想在大量的文件中使用这个插件，这样的做法是不可取的。 一个很好的解决方法是使用批量命令。在 VS Code 中，我们可以使用 "Task" 和 "Command Palette"，创建一个新的任务来批量应用 vscodebeautify 插件。 打开 VS Code，然后按下 Ctrl + Shift + P 或者使用右键菜单 "Command Palette" 打开命令面板。在命令面板中，输入 "Configure Task" 并选择它。然后在弹出的任务列表中选择 "Create tasks.json file from template"。 在浮动窗口中，选择 "Others" 选项，然后选择 "Run Multiple Command" 作为模板。在主任务的执行命令中，输入 "vscodebeautify.execute"，然后再在 "commandLine" 中输入 "code --wait --diff $* && exit 0"。最后，保存并关闭 "tasks.json" 文件。

/**
 * tasks.json example
 */ 
{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "format",
            "type": "shell",
            "command": "echo run vscodebeautify && vscodebeautify.execute",
            "problemMatcher": "$eslint-stylish",
            "presentation": {
                "echo": true,
                "reveal": "silent",
                "focus": true,
                "panel": "shared"
            }
        }
    ]
}

现在，按下 Ctrl + Shift + P 或者使用右键菜单 "Command Palette" 打开命令面板，并输入 "Tasks: Run Task"，选择 "format" 选项，然后点击 "Run" 按钮。VS Code 将开始执行格式化任务，你将不需要手动打开和格式化每个文件。 这就是使用 vscodebeautify 插件美化你的代码的方法，无论你是一名初学者还是一名开发专家，使用 VS Code 作为主要开发工具都有很多好处，其中一个就是使用方便的插件来提高代码质量和可读性。

推荐文章