借助 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)运行模式


1

"sublimelinter""save-only",

  SublimeLinter 的运行模式,总共有四种,含义分别如下:

  • true - 在用户输入时在后台进行即时校验;
  • false - 只有在初始化的时候才进行校验;
  • "load-save" - 当文件加载和保存的时候进行校验;
  • "save-only" - 当文件被保存的时候进行校验;

  推荐设置为 “save-only”,这样只在编写完代码,保存的时候才校验,Sublime Text 运行会更加流畅。

(2)校验引擎


1

2

3

4

5

"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


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

"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 的校验器,下面是默认配置的校验选项,可以根据个人编码风格修改:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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

}

时间: 2024-10-28 22:14:15

借助 SublimeLinter 编写高质量的 JavaScript & CSS 代码的相关文章

编程精粹--编写高质量的C语言代码(2):自己设计并使用断言(一)

上一篇文章<<编程精粹--编写高质量C语言代码(1):假想编译程序>>中讲述了如何利用编译程序的所有警告设施以及lint程序等来更加容易地自动发现程序中的错误.但是即使使用编译程序提供的所有警告设施,编译程序所发现的错误,也只是程序错误中的一小部分.例如以下一行代码: strCopy=memecpy(malloc(length),str,length)); 当malloc 调用失败时,返回一个空指针,而memcpy如果没有处理空指针,程序就会出现错误.编译程序是无法查出这种或其他类

如何编写高质量的Javascript代码

1.避免全局变量,因为全局变量容易发生名称上的冲突,可维护性不好. a,使用命名空间 b,使用闭包 c,在函数内部使用var声明 2.编写可维护的代码 a.可读性 b.连续性 c.预见性 d.看起来是一个人写的 e.有文档 3.不要扩展内建的原型 扩展原型的构造函数,可以提供一些很强大的功能,但是有时候他太强大了. 有时候你会去扩展Object(),Array(),Fucntion()的原型方法,这样会导致可维护性的问题,因为这会让你的代码的移植性变差.其他的开发人员使用你的代码的时候,可能只需

编程精粹--编写高质量C语言代码(4):为子系统设防(一)

通常,子系统都要对其实现细节进行隐藏,在进行细节隐藏的同时,子系统为用户提供了一些关键入口点.程序员通过调用这些关键的入口点来实现与子系统的通信.因此如果在程序中使用这样的子系统并且在其调用点加上了调试检查,那么不需要花费多少力气就可以进行许多错误检查. 当子系统编写完成后,要问自己:"程序员什么情况下会错误地使用这个子系统,在这个子系统中怎样才能自动检查出这些问题?"在这篇文章中,将讲述一些用来肃清子系统中错误的技术.使用这些技术,可以免除许多麻烦.本章将以C的内存管理程序为例,但所

编写高质量代码——html、css

[编写高质量代码]1.注释的必要性:增加代码的可读性.2.web标准:由一系列的标准组合而成,其核心理念是将网页的结构.样式.行为分离,所以他可分为:结构标准.样式标准和行为标准.3.一个符合标准的网页,标签中的标签名应该全部都是小写,属性要加上括号,样式和行为不要夹杂在标签中,而应该分别单独存放在样式文件和脚本文件中.理想状态下,网页源代码有三部分组成:.html文件..css文件..js文件.4.所谓高质量的代码,在web标准的指导下,在实现结构.样式和行为分离的基础上,还要做到三点:精简.

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

JavaScript手札:《编写高质量JS代码的68个有效方法》(一)(1~5)

编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* BLOCKS =============================================================================*/ p, blockquote, ul, ol, dl, table, pre { marg

编写高质量JavaScript代码的68个有效方法

简介: <Effective JavaScript:编写高质量JavaScript代码的68个有效方法>共分为7章,分别涵盖JavaScript的不同主题.第1章主要讲述最基本的主题,如版本.类型转换要点.运算符注意事项和分号局限等.第2章主要讲解变量作用域,介绍此方面的一些基本概念,以及一些最佳实践经验.第3章主要讲解函数的使用,深刻解析函数.方法和类,并教会读者在不同的环境下高效使用函数.第4章主要讲解原型和对象,分析JavaScript的继承机制以及原型和对象使用的最佳实践和原则.第5章

编写高质量javascript代码的基本要点

javascript入门比较快,基础方面也比较简单,但如果想写出高质量的javascript代码也绝非易事,下图是在下整理的编写高质量javascript代码的基本要点,希望能够对各位有所帮助.

编写高质量代码:Web前端开发修炼之道(一)

最近老大给我们买来一些技术方面的书籍,其实很少搬着一本书好好的完整的看完过,每每看电子档的,也是打游击式的看看这章,瞅瞅那章,在那5本书中挑了一本比较单薄的<编写高质量代码web前端开发修炼之道>,看完觉得不错,它从一个整体架构上来说明如何编写高质量代码,而细处也着重说明一些比较重要的技术点,给人一种从高处俯瞰web开发.很完整的感觉,在这感谢老大,谢谢他让我们不停的进步着.下面是我看书过程中的笔记. 第一章:从网站重构说起 没什么好说的,从一个糟糕的老网页实例说明需要将web的结构,样式和行