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格式化代码。