James 发表于 2017-2-23 09:30:29

借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码

  SublimeLinter 是前端编码利器——Sublime Text 的一款插件,用于高亮提示用户编写的代码中存在的不规范和错误的写法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多种开发语言。这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。


  准备工作
  安装 Sublime Text 包管理工具:http://wbond.net/sublime_packages/package_control
  使用 Sublime Text 包管理工具安装 SublimeLinter:https://github.com/SublimeLinter/SublimeLinter
  安装 Node.js,建议安装 Windows Installer 版本:http://nodejs.org

  参数配置
  打开 SublimeLinter 的配置文件,Preferences->Package Settings->SublimeLinter->Settings - User,进行如下配置:


(1)运行模式


    "sublimelinter": "save-only",
  SublimeLinter 的运行模式,总共有四种,含义分别如下:


[*]true - 在用户输入时在后台进行即时校验;
[*]false - 只有在初始化的时候才进行校验;
[*]"load-save" - 当文件加载和保存的时候进行校验;
[*]"save-only" - 当文件被保存的时候进行校验;
  推荐设置为 “save-only”,这样只在编写完代码,保存的时候才校验,Sublime Text 运行会更加流畅。


(2)校验引擎


    "sublimelinter_executable_map":
{
"javascript":"D:/nodejs/node.exe",
"css":"D:/nodejs/node.exe"
}
  这里是配置 JavaScript 和 CSS 校验需要用到的 JS 引擎(这里用的是 Node.js)的安装路径。


(3)JSHint 选项  SublimeLinter 使用 JSHint 作为默认的 JavaScript 校验器,也可以配置为 jslint 和 gjslint(closure linter)。下面我使用的 jshint 校验选项,大家可以根据自己的编码风格自行配置,选项的含义可以参考这里:http://www.jshint.com/docs/#options



    "jshint_options":
{
"strict": true,
"noarg": true,
"noempty": true,
"eqeqeq": true,
"undef": true,
"curly": true,
"forin": true,
"devel": true,
"jquery": true,
"browser": true,
"wsh": true,
"evil": true
}


(4)CSSLint 选项  SublimeLinter 使用 CSSLint 作为 CSS 的校验器,下面是默认配置的校验选项,可以根据个人编码风格修改:



    "csslint_options":
{
"adjoining-classes": "warning",
"box-model": true,
"box-sizing": "warning",
"compatible-vendor-prefixes": "warning",
"display-property-grouping": true,
"duplicate-background-images": "warning",
"duplicate-properties": true,
"empty-rules": true,
"errors": true,
"fallback-colors": "warning",
"floats": "warning",
"font-faces": "warning",
"font-sizes": "warning",
"gradients": "warning",
"ids": "warning",
"import": "warning",
"important": "warning",
"known-properties": true,
"outline-none": "warning",
"overqualified-elements": "warning",
"qualified-headings": "warning",
"regex-selectors": "warning",
"rules-count": "warning",
"shorthand": "warning",
"star-property-hack": "warning",
"text-indent": "warning",
"underscore-property-hack": "warning",
"unique-headings": "warning",
"universal-selector": "warning",
"vendor-prefix": true,
"zero-units": "warning"
}



您可能感兴趣的相关文章



[*]2012年最佳的 Web 前端开发工具和框架
[*]史上最全的浏览器 CSS & JS Hack 手册
[*]Eclipse中使用JSHint校验 JavaScript代码
[*]构建杀手级应用 JavaScript 工具和技术
[*]推荐25款提高网站可用性和转化率的工具
  本文链接:借助 SublimeLinter 编写高质量的 JS & CSS 代码
  编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
页: [1]
查看完整版本: 借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码