Emacs: css-sort.el 自动排序CSS属性

很痛快的写完CSS以后, 最郁闷的是还要排序CSS属性, 而且大家推崇的 CSS排序规范 还贼长, 人工调整CSS属性是非常痛苦的.

今天把原来的css代码重新整理了一下, 写了一个新的插件 css-sort.el , 顾名思义, 就是自动给CSS/SCSS文件中的属性排序.

主要完成几个功能:

1. 不需要选中排序区域, 直接在CSS/SCSS文件中, 执行一个命令就会自动排序
2. 完全按照 CSS排序规范 严格排序的, 不用人工一个一个对比顺序
3. 自动跳过以 @ 开头的函数定义区域, 比如 @function , @mixin 等
4. 智能识别 @include 属性, 并把 @include 属性排列在属性区域的顶部

关键技术

特别是一些非常复杂的 SCSS 文件, 如果不能智能的识别出 @include 多行代码块的语法区域, 排序功能就无法使用.

今天想了一个巧妙的方法, 先把光标移动到 @include 行的开头, 然后执行 forward-sexp 函数1万次, 当Emacs遇到 @include 语句结尾的时候, 会自动停下来, 这样就能智能的识别 @include 语句结尾的位置了, 不管你 @include 语句后面函数是否有参数, 甚至是你写不写分号结尾都能智能识别, 哈哈哈哈.

(defun css-sort-end-of-include-sexp ()
  (save-excursion
    (ignore-errors
      (forward-sexp 10000))
    (point)))

安装方法

1. 下载 css-sort 里面的 css-sort.el 放到 ~/elisp 目录
2. 把下面的配置加入到 ~/.emacs 中

(add-to-list 'load-path (expand-file-name "~/elisp"))
(require 'css-sort)

使用

M-x css-sort

That's all! ;)