刘华佼的全栈学习记录

Atom自动美化SCSS文件代码排版

| Comments

这个技巧应该很多人已经掌握了、并不需要了。

但昨天在帮别人解决footer排版问题时,发现对方没有安装美化的package,然后接着发现自己的atom上已实现此功能,却不知道是哪个package(atom beautify 还是 css beautify)的功能,这说明对这块熟悉度不够,所以索性重新梳理了下,写个小教程,既是重复练习,也希望对别人有所帮助。

第一步:

快捷键Command+逗号调出Atom的setting页面,并在已安装的Package里搜索atom-beautify(没有安装atom-beautify的,到install标签页搜索atom-beautify安装):

第二步:

点击atom-beautify的setting:

第三步

在第二步里往下拉页面,找到setting里的SCSS项,然后勾选beautify on save选项,另外两个选项:Align assignment(赋值等式对齐),Force indentation(强制缩进)也可以勾选:

示例:

以上步骤完成后,在用快捷键Command+S保存scss文件代码时,一些排版很乱的代码就能够自动美化排版了,例如:


  • 如果想看我们的作品,请点击思想便当
  • 如果觉得我们的作品还不错,欢迎给我们作品投上您宝贵的一票!
  • 如果觉得我们的作品还有待改进的地方,更欢迎在作品留言区留下您宝贵的建议!

Comments

comments powered by Disqus