自动化代码规范

时间：2021-08-07 06:53:59

自动化代码规范

学习map:

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

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

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

我们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

标签：

相关文章