emacs上使用px转换vw插件

因为emacs缺少一个插件已经影响了前端同学对emacs的兴趣了，这有点尴尬，其实emacs很强大的。
vs code有个px2vw插件，专门干整个事，于是今天学学使用elisp，实现了一个简易的相似功能的emacs插件。

配置

参考px2vw-px2vw-emcas-plugin上中式英文说明也可以。

下载px2vw.el到本地~/emcas.d/lisp/目录下。

或在~/emcas.d/lisp/自件一个名为px2vw.el文件，将代码复制进去，保存。

在~/.emcas.d/custom.el文件里添加如下代码：

(require 'px2vw)
(global-set-key (kbd "C-c w") 'px->vw)

如果这个操作很常用的话，也可以定义一个更简洁的快捷键，比如F9，那就将上面的第二行换成

(global-set-key [f9] 'px->vw)

重启emcas。

使用

在px代码出，按下你设置的快捷键，将执行绑定的函数，这会把比如200px;换算成13.8889vw保留了4位小数点，替换掉原来的以px为单位的代码。

局限说明

1. 目前插件内置了宽度是1440，如果需要修改，可以在下载下来的px2vw.el里把第一行定义的常量viewpoint-width改成你需要的值。
2. 鉴于vh很少用到，因此还没有做适应，需要的时候手动计算下。

参考文档

李杀的Elisp学习笔记
Emacs Lisp

px2vw.el附件

(defvar viewpoint-width 1440) 
(defvar viewpoint-height 900) 

(defun kill-thing-at-point (thing)
  "Kill the `thing-at-point' for the specified kind of THING."
  (let ((bounds (bounds-of-thing-at-point thing)))
    (if bounds
        (kill-region (car bounds) (cdr bounds))
      (error "No %s at point" thing))))

(defun kill-word-at-point ()
  "Kill the word at point."
  (interactive)
  (kill-thing-at-point 'word))

(defun convert-to-vw (px-v)
  (format "%.2f" (/ (float (* (string-to-number px-v) 100)) viewpoint-width)))

(defun convert-to-vh (px-v)
  (format "%.2f" (/ (float (* (string-to-number px-v) 100)) viewpoint-height )))

(defun px->vw ()
  "Convert word at point (or selected region) from px to vw."
  (interactive)
  (let* ((char (if (use-region-p)
                     (cons (region-beginning) (region-end))
                   (thing-at-point 'symbol))))
    (when (and char (not (string-blank-p char)) )
      (if (string-match "px" char)
      (progn
        (setq word (current-word char))
        (setq px-v (substring word 0 (- (length word) 2)))
        (kill-word-at-point)
        (insert (concat (convert-to-vw px-v) "vw")))
      (print "there's no px value to converting")))))

;;(global-set-key (kbd "C-c w") 'px->vw)
;;(global-set-key [f9] 'px->vw)
(provide 'px2vw)

大神加强版

上面的plugin不支持整个文件或者选中区域一次性操作是个硬伤。大神版优化的同时，同时解决了这个问题。
写的代码有长又烂的原因只有一个，那就是学的太浅。

;;; A emcas plugin to convert px to vw.


(defun region-px->vw (pos1 pos2)
  "当前选中region或者paragraph中的px转化为vw，可能还需要考虑:
   1.1px的情况
   2.其他我不知道的规则"
  (interactive ;; interactive函数生成本函数的参数1. 开始位置 2. 结束位置; 考虑两种情况：region 和 paragraph
   (if (use-region-p) ;; 是否用户已经选择了某个region
       (list (region-beginning) (region-end))
     (let ((bds (bounds-of-thing-at-point 'paragraph)) ) ;;如果不是region的话，找到当前paragraph
       (list (car bds) (cdr bds)))))
  (save-restriction ;;保证替换操作不影响开始和结束位置
    (narrow-to-region pos1 pos2) ;; 设定我们关心的一个范围，此范围以外的文本我们不关心
    (goto-char (point-min))    ;; 回到关心区域的起始位置
    (while (search-forward-regexp "\\([0-9.]+\\)\\(px\\)" nil t) ;; 正则查找，注意我们以后两个分组，第一个分组获得数值
      (let* ((px-digit-str (match-string 1)) ;; 从第一个分组拿到数值
             (px-digit (string-to-number px-digit-str))  ;; 数值->string
             (vw-digit (format     ;; 计算
                        "%.4f"
                        (/
                         (* 100.0 px-digit)
                         1440.0))))
        (replace-match (concat vw-digit  "vw") t nil))))) ;;替换Hello!

(provide 'px2vw)

加强版使用的时候快捷键绑定成region-px->vw即可使用。

效果：

image.png