sublime text3格式化插件HTML-CSS-JS Prettify

你的名字 2022-06-13 08:25 201阅读 0赞

再写代码时，我们总会或多或少的少写空格等，导致代码看起来没那么舒服，这个时候我们就需要对代码进行格式化，让代码看起来更加优美。

sublime text3作为前端的编辑器，它的安装包很小，很多功能都主要靠插件来实现，现在就介绍一种可以对HTML、CSS和JS都可以格式化的一款插件，它就是HTML-CSS-JS Prettify，不过它要依赖于nodejs。

## 安装步骤 ##

1.  在sublime text3中按ctrl+shift+p，输入install，选择install package，搜索HTML-CSS-JS Prettify，直接点击安装。
2.  安装完成之后，打开Tools -> HTML/CSS/JS Prettify -> Set ‘node’ Path（这里的顺序可能会因为版本或操作系统的不同导致不同，不过只要找到HTML/CSS/JS Prettify -> Set ‘node’ Path就可以了），显示为

{
      // Simply using `node` without specifying a path sometimes doesn't work :(
      // https://github.com/victorporof/Sublime-HTMLPrettify#oh-noez-command-not-found
      // http://nodejs.org/#download
      "node_path": {
        "windows": "C:/Program Files/nodejs/node.exe",
        "linux": "/usr/bin/nodejs",
        "osx": "/usr/local/bin/node"
      },
    
      // Automatically format when a file is saved.
      "format_on_save": false,
    
      // Only format the selection if there's one available.
      "format_selection_only": true,
    
      // Log the settings passed to the prettifier from `.jsbeautifyrc`.
      "print_diagnostics": true
    }

3 安装nodejs，url：[https://nodejs.org/en/][https_nodejs.org_en]，如果你电脑上已经安装了nodejs，可直接跳过此步骤。  
4. ![SouthEast][]，我的操作系统是win7，并且nodejs安装在D:\\nodejs下面，所以将windows的value更改为`D:/nodejs/node.exe`，保存之后，依然打开Tools -> HTML/CSS/JS Prettify -> Prettify Code（这里的顺序可能会因为版本或操作系统的不同导致不同，不过只要找到HTML/CSS/JS Prettify -> Prettify Code就可以了），在后面可以看见快捷键，以后就可以直接使用快捷键的方式来实现代码格式化。

[https_nodejs.org_en]: https://nodejs.org/en/
[SouthEast]: /images/20220613/7cb1348ccaad43498dfb43bf1c236906.png