公司质量部整了一套自己的前端代码规范,部门要求6月底前改完,因为月初和月末会统计代码质量。
虽然规范里面罗列了较多的条款,但是通过Jenkins
上扫出来的high
和normal
级别的问题,基本集中在:
1. 缩进问题,以及tab
和空格混用(公司规范要求一次缩进为4个空格)
2. 一行限制120个字符,超过需要跨行显示
3. js中使用单引号
4. 变量定义或者赋值了却没有使用,需要去除,函数传参也同理。
起初是无脑式的重复劳动,sublime
里面安装了HTML/CSS/JS Prettify
,但未进行深入的配置只是改了缩进配置。针对上面问题期初是这么做的:
1. HTML/CSS/JS Prettify
2. 根据扫出来的错误提示,手动去换行。
3. 无脑式的手动把双引号替换成单引号,由于js
中存在dom
元素的拼接,不能一键替换需要挨个检查。
4. 根据扫出来的结果手动去除,每次需要上传一遍svn,在jenkins上跑一边才能检验一遍,每次扫都是整个项目,比较费时。
手头有两个项目,第一个项目花费了很多天才改完,通过eslint + HTML/CSS/JS Prettify
,另外一个项目大半天就改完了。下面是eslint
和 HTML/CSS/JS Prettify
的使用经验,仅留作备忘。
1.安装eslint
npm install -g eslint
2.初始化配置文件,生成默认的配置文件
eslint --init
3.检测文件
eslint 你的文件(可以拖拽文件到命令行窗口)
当然也可以在项目中安装eslint
,在项目中进行个性化配置。
4.根据规范配置eslint
和HTML/CSS/JS Prettify
找到初始化的配置文件
module.exports = {
"env": {
"browser": true,
"node": true
},
"globals": {
"$": true,//设置全局变量,防止报no-undef错,未定义true代表可以覆盖,false代表不可以
"alert": false,
"setTimeout": false,
"location": true
},
"extends": "eslint:recommended",
"rules": {
"quotes": [
"error",
"single"//使用单引号,两种情况,双引号里面包含单引号,被包含的单引号被转义
//另外一种,单引号里面包含双引号保持原样。
],
"semi": [
"error",
"always"//分号补全
],
"no-use-before-define": [
"error", {
"functions": true,
"classes": true //函数或者类须定义在使用前
}
]
//no-unused-vars 变量定义或赋值之后未使用
}
};
HTML/CSS/JS Prettify
的配置,打开配置文件(js文件中右键--->HTML/CSS/JS Prettify --->set Prettify Preferences)
//仅展示结构和修改项
"js": {
"allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
"indent_size": 4, // Indentation size
"indent_with_tabs": false, // Indent with tabs, overrides `indent_size` and `indent_char`
"wrap_line_length": 120 //超过120字符数换行
}
配置好后,可以先通过HTML/CSS/JS Prettify
格式化文件,然后再通过eslint 文件
来扫描文件
可以通过eslint --fix 文件
修复双引号、分号补全等无须手动处理的问题,剩下需要手动修改的就是no-unused-vars
错误以及未定义前使用的问题了。
注意:可以单独给每个文件标注全局变量,避免no-undef
错误。
示例如下:
$(function() {
//定义全局变量
/*global $, alert, html, location, senddataforTable, window, moment, init_select2, changeContentVm*/
});
eslint 参考链接
sublime安装package control组件教程
sublime安装插件: Preferences--> Package Control -->输入需要安装的插件名称
sublime使用插件: Ctrl + shift + P --> 输入需要调用的插件名称