前端代码乱糟糟？是时候引入代码质量检查工具了

// 自定义的规则
    rules: {
        // 必须使用 === 或 !==，禁止使用 == 或 !=，与 null 比较时除外
        // @warn 在异步接口返回时不确定参数是数值还是字符串，有时可利用这个类型转换
        'eqeqeq': 'warn',
        // 禁止在 if 代码块内出现函数声明
        // @off 在for循环中会经常使用定义var  for(var i = 0; i < 10; ++i)
        'no-inner-declarations': 'off',
        // switch 的 case 内有变量定义的时候，必须使用大括号将 case 内变成一个代码块
        // @off 太严格
        'no-case-declarations': 'off',
        // 禁止使用 !! ~ 等难以理解的运算符
        // @off 有些时候会用到 if (!!abc)   '' + 100   +new Date() 等
        'no-implicit-coercion': 'off',
        // 禁止在全局作用域下定义变量或申明函数
        // @off 太严格
        'no-implicit-globals': 'off',
        // 禁止使用没必要的 {} 作为代码块
        // @off 有时候需要用代码块做逻辑区分
        'no-lone-blocks': 'off',
        // 禁止出现 location.href = 'javascript:void(0)';
        // @off 有时候需要用便捷的 javascript:;
        'no-script-url': 'off',
        // 对象字面量只有一行时，大括号内的首尾必须有空格
        // @off 没有必要限制
        'object-curly-spacing': 'off',
        // 禁止对函数的参数重新赋值
        // @warn 警示即可
        'no-param-reassign': 'warn',
        // 文件最后一行必须有一个空行
        // @error 应该在文件末尾保持一个换行
        'eol-last': 'error',
        // 代码块嵌套的深度禁止超过 10 层
        // @warn 有些特殊情况会出现  警示即可
        'max-depth': [
            'warn',
            10
        ],
        // 禁止函数的循环复杂度超过 100
        // @error 最大值可以宽松点
        'complexity': [
            'error',
            {
                max: 100
            }
        ],
        // 定义过的变量必须使用
        // @warn 多文件互相引用时 偶尔会出现无引用的情况
        'no-unused-vars': [
            'warn',
            {
                vars: 'all',
                args: 'none',
                caughtErrors: 'none',
                ignoreRestSiblings: true
            }
        ],
        // 在ES5中需使用var
        // @off 没有必要限制
        'no-var': 'off',
        // 禁止使用未定义的变量  建议将相关变量在上方 globals 配置项中配置
        // @warn 警示即可
        'no-undef': 'warn',
        // 函数的参数禁止超过10个
        // @warn 警示即可
        'max-params': ['warn', 10],
        // 回调函数嵌套禁止超过 5 层
        // @warn 警示即可
        'max-nested-callbacks': ['warn', 5],
        // 循环内的函数中不能出现循环体条件语句中定义的变量
        // @warn 警示即可
        'no-loop-func': 'warn',
        // Promise 的 reject 中必须传入 Error 对象
        // @off 不需要限制
        'prefer-promise-reject-errors': 'off',
        // 变量声明时尽量使用一个var声明连续的多个
        // @warn 警示即可
        'one-var': [
            'error',
            'consecutive'
        ],
        // 变量申明必须每行一个
        // @error 赋值时保证处于一行即可
        'one-var-declaration-per-line': [
            'error',
            'initializations'
        ],

        // 禁止使用已废弃的 api
        // @off 不需要限制
        'react/no-deprecated': 'off',
        // 禁止使用字符串 ref
        // @warn 警告即可
        'react/no-string-refs': 'warn',
        // 必须使用 Class 的形式创建组件
        // @warn 警告即可
        'react/prefer-es6-class': [
            'warn',
            'always'
        ],
        // 禁止在 componentDidUpdate 里面使用 setState
        // @warn 警告即可
        'react/no-did-update-set-state': 'warn',
        // 组件内方法必须按照一定规则排序
        // @off 不需要限制
        'react/sort-comp': 'off',

        // jsx 的 props 缩进必须为四个空格
        // @off 不需要限制
        // 'react/jsx-indent-props': 'off',
    }

rules: {
        // 颜色值避免直接使用颜色名
        'color-named': [
            'never', {
                ignore: ['inside-function']
            }
        ],
        // 使用数字或命名的 (可能的情况下) font-weight 值
        'font-weight-notation': 'numeric',
        // 在函数的逗号之后要求有一个换行符或禁止有空白
        'function-comma-newline-after': null,
        // 在函数的括号内要求有一个换行符或禁止有空白
        'function-parentheses-newline-inside': null,
        // url使用引号
        'function-url-quotes': 'always',
        // 禁止小于 1 的小数的前导 0
        'number-leading-zero': 'never',
        // 字符串使用双引号
        'string-quotes': 'double',
        // 要求选择器列表的逗号之前有一个换行符
        'selector-list-comma-newline-before': 'never-multi-line',
        // 在媒体查询的逗号之前禁止有一换行
        'media-query-list-comma-newline-before': 'never-multi-line',
        // 缩进
        'indentation': 4,
        // 禁止低优先级的选择器出现在高优先级的选择器之后
        'no-descending-specificity': null,
        // 禁止空源
        'no-empty-source': null,
        // 禁止缺少文件末尾的换行符
        'no-missing-end-of-source-newline': null
    }

{
    "_comment": [
        "自定义的HTMLHint配置项",
        "规则中文 @see https://segmentfault.com/a/1190000013276858",
        "规则英文 @see https://github.com/yaniswang/HTMLHint/wiki/Rules",

        "使用注释自定义规则 @see https://github.com/yaniswang/HTMLHint/wiki/Usage#cli"
    ],

    "_comment": "标签名必须小写",
    "tagname-lowercase": true,

    "_comment": "属性名必须小写",
    "attr-lowercase": false,

    "_comment": "属性值必须放在双引号中",
    "attr-value-double-quotes": true,

    "_comment": "属性值一定不可为空",
    "attr-value-not-empty": false,

    "_comment": "属性值一定不可重复",
    "attr-no-duplication": true,

    "_comment": "Doctype必须是 HTML 文档的第一行",
    "doctype-first": false,

    "_comment": "标签必须成对",
    "tag-pair": true,

    "_comment": "标签必须自封闭",
    "tag-self-close": false,

    "_comment": "特殊字符必须转义",
    "spec-char-escape": false,

    "_comment": "ID 属性必须唯一",
    "id-unique": true,

    "_comment": "src 属性一定不可为空",
    "src-not-empty": true,

    "_comment": "title 属性必须出现在标签中",
    "title-require": false,

    "_comment": "img 标签必须包含 alt 属性",
    "alt-require": true,

    "_comment": "Doctype 必须是 HTML5",
    "doctype-html5": true,

    "_comment": "ID 和 Class 的命名规则必须统一",
    "id-class-value": false,

    "_comment": "不该使用样式标签",
    "style-disabled": false,

    "_comment": "不该使用行内样式",
    "inline-style-disabled": false,

    "_comment": "不该使用行内脚本",
    "inline-script-disabled": false,

    "_comment": "空格和制表符一定不可混合在行前",
    "space-tab-mixed-disabled": "space4",

    "_comment": "ID 和 Class 一定不可使用广告关键词",
    "id-class-ad-disabled": false,

    "_comment": "href 必须是绝对路径或者相对路径",
    "href-abs-or-rel": false,

    "_comment": "属性值一定不可使用不安全字符",
    "attr-unsafe-chars": true,

    "_comment": "script 标签不该使用在头部",
    "head-script-disabled": false
}

 // 检查html文件（或tpl文件）中的JS
    plugins: [
        'html'
    ],
    settings: {
        'html/html-extensions': ['.html', '.tpl'],
        // 'html/indent': '+4'
    },

npm i -g eslint babel-eslint eslint-config-alloy eslint-plugin-html eslint-plugin-react stylelint stylelint-config-standard htmlhint

{
    "shell_cmd": "stylelint $folder/node_modules/.bin/eslint --fix $file"
}

// SublimeLinter Settings - User
{
    "debug": true,
    // "delay": 0.2,
    "lint_mode": "manual",
    // "syntax_map": {
    //     "html (django)": "html",
    //     "html (rails)": "html",
    //     "html 5": "html",
    //     "css": "css",
    //     "javascript (babel)": "javascript",
    //     "magicpython": "python",
    //     "php": "html",
    //     "python django": "python",
    //     "pythonimproved": "python"
    // },
    "styles": [
        {
            "scope": "region.yellowish markup.warning.sublime_linter",
            "types": ["warning"]
        },
        {
            "scope": "region.redish markup.error.sublime_linter",
            "types": ["error"]
        },
        {
            "priority": 1,
            "icon": "dot",
            "mark_style": "outline"
        }
    ],
    "linters": {
        "eslint": {
            // 让eslint能够识别html页面中嵌入的JS
            "selector": "source.js | text.html.basic"
        },
        // 下面三个sublimelinter默认都支持，为防止检查干扰，需要禁用它们
        "scsslint": {
            "disable": true
        },
        "csslint": {
            // "disable": true
        },
        "htmllint": {
            "disable": true
        },
        "stylelint": {
            // 似乎Sublime的stylelint需要手动设置到全局路径
            // "executable": "C:\\Users\\e470\\AppData\\Roaming\\npm\\stylelint.cmd"
            "executable": "/usr/local/bin/stylelint"
        }
    }
}

bin:  D:\Program Files\nodejs\node.exe C:\Users\e470\AppData\Roaming\npm\node_modules\htmlhint\bin\htmlhint
path: .htmlhintrc

new TimeFixPlugin()

new HappyPack({
            id: 'js',
            use: configs.lint.js.open ? [{
                loader: 'babel-loader',
                options: {
                    // cacheDirectory: true
                }
            }, {
                enforce: 'pre',
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: configs.lint.js.autoFix,
                    cache: true,
                    emitWarning: !configs.lint.js.emitAsError,
                    failOnError: configs.lint.js.failOnError,
                    formatter: require('eslint-friendly-formatter'),
                    outputReport: {
                        filePath: cwdRalativeOutputPath + '/lint/js/[name].xml',
                        formatter: require('eslint-friendly-formatter')
                    }
                }
            }] : [{
                loader: 'babel-loader',
                options: {
                    // cacheDirectory: true
                }
            }]
        }),
        new HappyPack({
            id: 'html',
            use: configs.lint.html.open ? [{
                loader: 'ejs-loader',
                options: {

                }
            }, {
                loader: 'htmlhint-loader',
                enforce: 'pre',
                exclude: /node_modules/,
                options: {
                    configFile: configs.lint.html.configFile,
                    failOnError: configs.lint.html.failOnError,
                    outputReport: {
                        filePath: cwdRalativeOutputPath + '/lint/html/[name].xml'
                    }
                }
            }] : [{
                loader: 'ejs-loader',
                options: {

                }
            }]
        }),






// stylelint检查
if (configs.lint.css.open) {
    commonConfig.plugins.push(new StyleLintPlugin({
        fix: configs.lint.css.autoFix,
        emitErrors: configs.lint.css.emitAsError,
        failOnError: configs.lint.css.failOnError,
        formatter: require('stylelint-formatter-pretty')
    }));
}