建站中的
点点滴滴

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

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

jzcoder的PHP学习笔记

  准备工作

  安装 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"

}

未经允许不得转载:建站笔记 » 借助SublimeLinter编写高质量的JavaScript&CSS代码

分享到:更多 ()

评论 抢沙发

评论前必须登录!

 

学建站就来建站笔记,提供一切有关建站的知识

关于站长加入我们