Sublime Text 上最好用的 CSS 格式化插件 —— CSS Format

Sublime Text 的轻巧、开放、免费、跨平台等优点使之成为了最受欢迎的代码编辑器,但长期以来一直没有找到好用的 CSS 格式化插件,于是决定自己动手写一款,方便自己也可以造福广大 CSSer。

下面是对我这款 Sublime Text CSS 格式化插件的介绍:

一、功能

可以将任意的 CSS、SASS、SCSS、LESS 代码格式化为以下形式:

  • Expanded:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    body {
        background: #fff;
        font: 12px/2em Arial, Helvetica, sans-serif;
    }
    ol, ul, li {
        margin: 0;
        padding: 0;
    }
    a {
        color: rgba(65, 131, 196, 0.8);
    }
  • Expanded (Break Selectors):
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    body {
        background: #fff;
        font: 12px/2em Arial, Helvetica, sans-serif;
    }
     
    ol,
    ul,
    li {
        margin: 0;
        padding: 0;
    }
     
    a {
        color: rgba(65, 131, 196, 0.8);
    }
  • Compact:
    1
    2
    3
    
    body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
    ol, ul, li { margin: 0; padding: 0; }
    a { color: rgba(65, 131, 196, 0.8); }
  • Compact (No Spaces):
    1
    2
    3
    
    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
    ol,ul,li{margin:0;padding:0;}
    a{color:rgba(65,131,196,0.8);}
  • Compact (Break Selectors):
    1
    2
    3
    4
    5
    
    body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
    ol,
    ul,
    li { margin: 0; padding: 0; }
    a { color: rgba(65, 131, 196, 0.8); }
  • Compact (Break Selectors, No Spaces):
    1
    2
    3
    4
    5
    
    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
    ol,
    ul,
    li{margin:0;padding:0;}
    a{color:rgba(65,131,196,0.8);}
  • Compressed:
    1
    
    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif}ol,ul,li{margin:0;padding:0}a{color:rgba(65,131,196,0.8)}

二、安装

方法一:使用 Package Control

推荐的,也是最简单的安装方法是使用 Package Control。

  1. 安装 Package Control,如果已经安装,可跳过本步。安装完成后,需要重启 Sublime Text,如果在菜单 Preferences > Package Settings 中可以找到 Package Control 菜单,则表示已经安装成功。
  2. 打开 Install Package 命令面板:使用快捷键 Ctrl+Shift+P (Windows/Linux) 、Cmd+Shift+P (OS X) 打开命令面板,输入 install 调出 Package Control: Install Package 菜单并回车,稍后会弹出插件列表
  3. 在插件列表的上面,输入 CSS Format 选中 “CSS Format” 并回车
方法二:Git Clone

进入 Sublime Text 的 “Packages” 目录(以 Sublime Text 2 为例):

  • Windows: cd %APPDATA%\Sublime Text 2\Packages\
  • OS X: cd ~/Library/Application Support/Sublime Text 2/Packages/
  • Linux: cd ~/.Sublime Text 2/Packages/

然后将 CSS Format 的 Git 项目克隆到 “Packages” 目录:
git clone git://github.com/mutian/Sublime-CSS-Format.git "CSS Format"

方法三:下载插件包

Github 下载最新的 CSS Format 插件源码,并存放到 Sublime Text 的 “Packages” 目录下(”Packages” 目录的位置请参考上一步)

三、用法

打开 CSS 文件后,可以通过以下任一方法执行格式化命令:

  • 右键菜单:CSS Format >
  • 编辑菜单:Edit > CSS Format >
  • 命令面板:使用快捷键 Ctrl+Shift+P (Windows/Linux) 、Cmd+Shift+P (OS X) 打开命令面板,输入 Format CSS,选择对应格式的菜单回车即可

如果鼠标选中了部分代码,在执行格式化命令时,只对选中部分做处理。

四、配置

快捷键

为了防止产生快捷键冲突,CSS Format 默认没有开启任何快捷键。

如果你想为特定的格式化命令定义快捷键,可参考 Preferences > Package Settings > CSS Format > Key Bindings – Example,将你需要的快捷键定义在 Preferences > Package Settings > CSS Format > Key Bindings – User 中。

注意:你需要始终编辑 Key Bindings – User 文件,不要编辑 Key Bindings – Example 文件,否则下次插件更新会覆盖你的设置。

保存时自动格式化

打开 Preferences > Package Settings > CSS Format > Settings – Default,将 Settings – Default 里的内容复制到 Preferences > Package Settings > CSS Format > Settings – User 中,然后将 format_on_save 的值改为 true

注意:你需要始终编辑 Settings – User 文件,不要编辑 Settings – Default 文件,否则下次插件更新会覆盖你的设置。

配置项说明:

  • indentation:缩进字符,默认为 "\t",你可以设置为 "    "(4个空格)。
  • format_on_save:保存时是否自动格式化,默认为 false,如需开启请改为 true
  • format_on_save_action:自动格式化时执行的命令,默认设置为 "expand",可选值有 "expand""expand-bs""compact""compact-ns""compact-bs""compact-bs-ns""compress"
  • format_on_save_filter:文件筛选正则,默认为 "\\.(css|sass|scss|less)$",只有文件名可以被此正则匹配的文件,才可以使用保存时自动格式化的功能

五、反馈

Idea 和 Bug 请移步:https://github.com/mutian/Sublime-CSS-Format/issues
当然,也很欢迎你在下面发表评论。