关于Recess
Twitter开发的代码质量工具Recess旨在帮助你通过执行指南更好地写代码。Recess建立在LESS之上,可以在开发过程中作为一个linter,让代码保持整洁和可维护性。
在这篇教程里,我们将在一个VPS上安装Recess,并运行Ubuntu 12.04,你需要提前搞定VPS,以及Node.js和NPM,如果还没有完成,可以查看这篇教程里的步骤,完成安装。
安装
Node和NPM装到虚拟服务器后,运行下面命令安装Recess:
npm install recess -g
现在来看些好玩的:使用Recess
现在你想怎样使用这个很酷的代码助手呢?首先,关于写css是有一些标准的。例如,不能过度限制选择器或给选择器使用#ids,Recess已经内置配置了一些rules,你可以通过css文件运行rules,并可以查看。
安装完Recess后,可以直接看到这些rules:
<!--[if !supportLists]-->· noIDs -不要使用像#foo这样的ID样式
<!--[if !supportLists]-->· <!--[endif]-->noJSPrefix – 不要给js-前缀类名加样式
<!--[if !supportLists]-->· <!--[endif]-->noOverqualifying -不要过度限制选择器,如div#foo.bar
<!--[if !supportLists]-->· <!--[endif]-->noUnderscores –给类命名时不要用下划线,如.my_class
<!--[if !supportLists]-->· <!--[endif]-->noUniversalSelectors -不要使用通用选择器
<!--[if !supportLists]-->· <!--[endif]-->zeroUnits -不要给0值加单位,如0px
<!--[if !supportLists]-->· <!--[endif]-->strictPropertyOrder – 执行严格的属性顺序(这儿有定义的顺序)
现在对其进行测试,先创建一个简易的css文件,粘贴以下内容进去:
#my-id { color:red; } .my_bad_class { color:red; }
保存文件,退出,在终端运行下面的命令:
recess path/to/css/file.css
这个命令会查看你的文件,并报告问题。在我们的测试中,css文件违反了2个rule,所以Recess应该会标注出来。如果想检查一个文件夹里的所有css文件,运行下面的命令:
recess path/to/css/folder/*
这样会指向那个文件夹里的所有css文件。
现在因为一些原因,你想要给你的css使用#ids,并不被Recess检查到,可以运行以下命令:
recess path/to/css/file.css --noIDs false
有了这条命令,通过一个选项来设置那个特定的rule为false,甚至可以加更多:
recess path/to/css/file.css --noIDs false --noUnderscores false
这样就会显示测试文件是没有问题的,因为违反的rule并没有被标注出来。
但现在假设:我们不想每次都设置这些选项,而还要让Recess检查不到这些rules。你需要创建一个配置文件,名字叫做.recessrc。有2个地方可以放这个文件:
<!--[if !supportLists]-->· <!--[endif]-->第一,可以把文件放到将要执行recess命令的文件夹里。这样的话,只需要在没有选项的情况下运行命令,而且配置文件会被获取。
<!--[if !supportLists]-->· <!--[endif]-->第二,将它放到另一个文件夹而不是运行recess命令的文件夹。这样的话,你需要通过一个选项连接路径到配置文件。例如:
recess path/to/css/file.css --config=path/to/config/.recessrc
但文件里放什么东西呢?那要看你想要拿出哪些rule了。如果你想确认noIDs和noUnderscores没有在检查范围内,可以粘贴一下内容:
{ "noIDs": false, "noUnderscores": false }
另一件很酷的事是:可以用Recess编译css(或LESS)文件,并为你做些自动更改。例如,如果你的属性排列顺序不够好,可以用Recess编译文件,然后在终端输出正确属性顺序的css文件。只需给命令加上—compile选项:
recess path/to/css/file.css --compile
它并不能修复所有有问题的rules,但它会使空格符标准化,从零值开始去掉单位,并给属性重新排序。要是想自动保存编译结果,可以使用下面的命令:
recess path/to/css/file.css --compile > path/to/css/compiled-file.css
还要记住的一点是:无论什么时候运行这条命令,Recess编译的第一个css文件结果都会替代命令中第二个css文件的内容。
最后,希望读者能感受到Recess带来的好处,以及给前端开发过程带来的巨大补充。
By Danny
From:https://www.digitalocean.com/community/articles/how-to-install-and-use-recess-on-a-vps
相关推荐
php Recess framework 英文PDF文档
前端开源库-gulp-recess大口凹处,带凹处的线头CSS和更少
课间休息CSS 预处理器等待它...
语言:English (United States) 借助Recess,您可以轻松发送专业...与在几秒钟内消失的Slack消息和永远不会打开的公司范围内的电子邮件不同,Recess使您可以轻松发送专业格式的内部新闻通讯和您的团队将实际阅读的公告。
请注意:在包控制中不可用,还有:不真正起作用这还没有完全完成,这就是它在包控制中不可用的原因。 这个插件没有完成的原因之一是,自从...安装短绒安装在安装此插件之前,您必须确保您的系统上安装了recess 。 要安
Goldstein_Liam---R-Recess
凹进 GUI gRPC客户端
:man_technologist_light_skin_tone: 如何开始? 您可以参考以下有关Git 和 Github 基础知识的文章,也可以联系项目导师,以防您遇到困难: :memo: 如何贡献? 看看查看现有问题或创建您自己的问题!...
High-Performance Normally-Off Al2O3/GaN MOSFET Using a Wet Etching-Based Gate Recess Technique
休假倒数 这包括带有JavaScript的html文件,该文件显示当前时间并倒计时。
上仍然可以使用旧版本( Simple Grey ),并且由Piwigo团队进行维护。特征React灵敏HTML5和CSS3, 使用, 使用Open Sans字体。下载在Piwigo的管理界面中使用内置的主题管理器, 或下载档案并将其解压缩到your-...
Recess 是一个简单的建立在动态样式语言 LESS 上的代码质量检查工具。它能够直接作为一个编译器被集成到构建系统中,并使你的代码看起来更加整洁和易于管理。 标签:Recess 分享 ...
注意:在情况进一步稳定之前,我不会将其发布为节点模块,因此要使用它,您必须git复制存储库,将其安装到cd,然后运行npm link 。 然后,该生成器将在全球范围内可用,因此跳过安装步骤。 安装generator-angular-...
使用遍历模式加载多个艰巨的任务 通常,您必须一个接一个地加载每个任务,这不必要地麻烦。 该模块将读取package.json中的dependencies / devDependencies / peerDependencies / optionalDependencies并加载与提供...
在Jupyter笔记本中使用HydroPy并保存分析,以便您可以重新创建过程并与他人共享。 Hydropy利用Numpy和Pandas的功能快速处理大型数据集。 Matplotlib和Seaborn内置于Hydropy,可让您快速轻松地创建可用于发布的图表...
三星电子公司宣称,他们开发研制出了全球第一款使用70nm工艺生产的512Mb DDR2 SDRam存储芯片,这也是目前存储芯片制造领域内的最精细的微处理技术。 三星电子称,采用70nm工艺生产的512Mb DDR2 SDRam...
韩国电子巨头三星电子公司日前宣称,他们开发研制出了全球第一款使用70nm工艺生产的512Mb DDR2 SDRam存储芯片,这也是目前存储芯片制造领域内的最精细的微处理技术。 三星电子称,采用70nm工艺生产的512Mb DDR2...
为了向该工具添加社交元素,我们想添加“ Water Cooler”或“ Recess”功能,目的是增强社交联系并模拟班级变更或零食休息,以便人们可以在视频通话或作业; 我们认为在教室或工作环境中,生产力与信任和社区一样...
EXOGAME扩展程序的灵魂用途是在空闲时间使用它(例如:Recess / Study Hall),但是,您可以在上课时轻松使用它并摆脱它。 只是一个简单的扩展即可使您度过无聊的学校! 更新和补丁:...
通过使用 gruntjs 模块“ ”,您无需手动加载每个可能很麻烦的任务。 该模块将读取 package.json 中的依赖项并加载与提供的模式匹配的 grunt 任务。 前 grunt.loadNpmTasks('grunt-recess'); grunt.loadNpmTasks('...