Posts match “ eslint HTML/CSS/JS Prettify ” tag:

eslint + HTML/CSS/JS Prettify 使用经验(js格式修改)

公司质量部整了一套自己的前端代码规范,部门要求6月底前改完,因为月初和月末会统计代码质量。

虽然规范里面罗列了较多的条款,但是通过Jenkins上扫出来的highnormal级别的问题,基本集中在:
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,另外一个项目大半天就改完了。下面是eslintHTML/CSS/JS Prettify 的使用经验,仅留作备忘。

1.安装eslint

npm install -g eslint

2.初始化配置文件,生成默认的配置文件

eslint --init

3.检测文件

eslint 你的文件(可以拖拽文件到命令行窗口)

当然也可以在项目中安装eslint,在项目中进行个性化配置。

4.根据规范配置eslintHTML/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 --> 输入需要调用的插件名称