Sublime text配置前端代码（JavaScript/Html/CSS）校验工具

前端代码检查分别包括html、css、JavaScript三部分的检查，代码检查需要安装node。

安装Package Control

给sublime安装PackageControl，Package Control是最佳的sublime插件管理工具，安装过程参考：https://packagecontrol.io/installation

所有可用的sublime插件：https://packagecontrol.io/

首先安装SublimeLinter

参考：https://packagecontrol.io/packages/SublimeLinter

其它语法检查插件依赖此插件。

1.在sublime使用PackageControl安装SublimeLinter即可

2.重启sublime

安装html检查工具

参考：https://github.com/mmaday/SublimeLinter-contrib-htmlhint

1.首先安装node基础插件，在控制台运行：npminstall -g htmlhint@latest

2.在sublime使用PackageControl安装SublimeLinter-contrib-htmlhint即可

3.重启sublime

安装css检查工具

参考：https://packagecontrol.io/packages/SublimeLinter-csslint

1.首先安装node基础插件，在控制台运行：npminstall -g csslint

2.在sublime使用PackageControl安装SublimeLinter-csslint即可

3.重启sublime

安装JavaScript检查工具

参考： https://packagecontrol.io/packages/SublimeLinter-jshint

1.首先安装node基础插件，在控制台运行：npminstall -g jshint

2.在sublime使用PackageControl安装SublimeLinter-jshint即可

3.重启sublime

编写配置文件

需要给上述工具编写配置文件，三种类型的文件的代码检查对应的配置文件名依次为：

.htmlhintrc、.csslintrc、.jshintrc

三个配置文件需要放在工程目录的最顶层（至少应包含所有需要检测的代码文件），sublime会自动找到这些配置文件并使其生效，如图：

具体的配置内容可参考插件所在链接，在这里我仍然给出我现在采用的配置参数，供参考：

.htmlhintrc

{
   "tagname-lowercase":true,
   "attr-lowercase":true,
   "attr-value-double-quotes":true,
   "attr-value-not-empty":true,
   "attr-no-duplication":true,
    "doctype-first":false,
    "tag-pair":true,
   "tag-self-close":true,
   "spec-char-escape":true,
   "id-unique":true,
   "src-not-empty":true,
   "title-require":false,
    /*规范类*/
   "doctype-html5":false,
   "id-class-value":false,
   "style-disabled":false,
   "inline-style-disabled":false,
   "inline-script-disabled":false,
    "space-tab-mixed-disabled":false,
   "id-class-ad-disabled":false,
   "href-abs-or-rel":false,
    "attr-unsafe-chars":false
}

.csslintrc

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

.jshintrc

{
  "node": true,
  "browser": true,
  "esnext": true,
  "bitwise": true,
  "camelcase":false,
  "curly": true,
  "eqeqeq": true,
  "immed": true,
  "indent": 2,
  "latedef": true,
  "newcap": true,
  "noarg": true,
  /*"quotmark":"single",*/
  "regexp": true,
  "undef": true,
  "unused": false,
  "strict": true,
  "trailing": true,
  "smarttabs": true,
  /*如下全局参数根据具体情况进行配置*/
  "globals": {
    "angular": true,
    "$": true,
    "jQuery": true,
    "moment":true,
    "sha1":true,
    "_":true,
    "echarts":true
  }
}

使用代码检测工具，以及采用统一配置文件，能帮助团队写出风格统一的代码，提高代码的可维护性，降低bug数量。

建议可以统一使用HTML-CSS-JSPrettify格式化代码。