自动化代码规范

自动化代码规范

学习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