自动化代码规范

自动化代码规范

学习map:

• 自动化代码规范有哪些方法
• 根据本team的需求肯定解决方案
• 安装 & 使用示例
• 总结

自动化代码规范有哪些方法

从工具角度来讲，Grunt等构建工具、Sublime等IDE均可以帮助检测代码中的错误和潜在的问题，从提示时机来讲，有编写实时提示和编译后提示两种，通过和mentor毛毛的讨论，大概可能有如下几种解决方案：

• FIS 插件（咱们项目使用FIS作前端集成解决方案）
• Grunt 插件
• 编译后terminal 或者浏览器的console 里提示
• 编辑时IDE里提示
• sublimeLinter jscs jshint csslint

根据本TEAM的需求肯定解决方案

咱们team的js代码规范主要继承自node-style和google-js-style ，我的喜爱，以为编辑时检查简直棒棒的，就像下面这种：

根据上述需求，使用SublimeLinter(Sublime Text的一款插件)、JSHint、JSCS、CSSLint这几款QA Tools来提高团队协做中代码的正确性、准确性、完整性、简洁性、统一性及易读性。

下面介绍这几款工具：

SublimeLinter是一个Sublime Text 3的插件，能够在编辑时检测代码中的错误和潜在的问题的，并给出相应的提示。

jshint和csslint自己是命令行工具，依赖node.js环境。他们对应的SublimeLinter插件分别是SublimeLinter-jshint、SublimeLinter-csslint，插件调用node的对应方法，因此咱们在使用以前要经过npm install -g来安装。

JSCS是一个js的代码风格检查工具，他预置了当下比较流行的编码风格指南如 jQuery、Airbnb、Google等，你也能够针对项目对其进行任意配置；他对应的SublimeLinter 插件是SublimeLinter-jscs。

综上，咱们只须要在Sublime里安装四个插件，在命令行执行2个命令，在项目根目录放置.jshintrc.csslintrc.jscsrc三个配置文件(todo文末给出如今地址)，就能够实时检测代码质量了。

安装 & 使用示例

node.js的环境你们都有了，在命令行执行

npm install -g csslint jshint 

打开Sublime Text 3的控制面板，使用packageControl安装插件:SublimeLinter、SublimeLinter-jshint、SublimeLinter-jscs、SublimeLinter-csslint

PS：若是尚未下载 | 安装，点击文中锚点传送门就行。保险起见，安装好后，请重启IDE。

在项目根目录建立.jshintrc，内容以下：

{ "strict": true, "nonew": true, "maxdepth": 5, "indent": 4, "curly": true, "eqeqeq": false, "immed": true, "noarg": true, "noempty": true, "quotmark": "single", "undef": true, "latedef": true, "regexp": true, "bitwise": false, "unused": true, "forin": true, "trailing": true, "smarttabs": true, "funcscope": true, "newcap": true, "camelcase": false, "devel": false, "freeze": true, "predef": [ "define", "require", "exports", "module", "describe", "before", "beforeEach", "after", "afterEach", "it" ], "globals": { "jQuery": true, "requirejs": true, "next": true, "angular": true, "node": true, "$": true }, "node": true, "browser": true, "es5": false, "esnext": true } 

PS：相关参数及其含义请前往传送门

在项目根目录建立.jscsrc，内容以下：

{ "preset": "google", "fileExtensions": [".js"], "requireParenthesesAroundIIFE": true, "validateIndentation": 4, "disallowTrailingComma": true, "disallowMultipleSpaces": true, "disallowSpacesInsideObjectBrackets": all, "excludeFiles": [ "test/data/**" ] }

PS：相关参数及其含义请前往传送门

在项目根目录建立.csslintrc，内容以下：

{ "adjoining-classes": true, "box-sizing": true, "box-model": false, "compatible-vendor-prefixes": false, "floats": false, "font-sizes": false, "gradients": false, "important": true, "known-properties": false, "outline-none": false, "qualified-headings": false, "regex-selectors": false, "shorthand": false, "text-indent": false, "unique-headings": false, "universal-selector": false, "unqualified-attributes": false, "zero-units": false }

PS：相关参数及其含义请前往传送门

后记

工具只是提醒做用，好的编码规范仍是要本身养成，也有些工具没有覆盖到的须要本身注意。

摘自：http://freeyiyi.com/jscs-in-action