Sublime Eslint代码规范检查 插件

来源：我的博客站 OceanicKang |《Sublime Eslint代码规范检查 插件》

需要用到 npm，如果没装过 npm，请看我的另一篇文章《NPM 安装 及 简单配置》

Eslint安装

这个是 nodejs 环境下的 eslint 工具，没有这个的话 sublime 就是通过调用这个来进行 eslint 检查的

$ npm install eslint -g
# 或者
$ cnpm install eslint -g

Sublime配置

（要配置eslint的小伙伴们，应该都是知道sublime插件安装方法的，我就不重复了）

1.安装 SublimeLinter 插件 和 ESlint 插件

首选项 --> Packages Settings --> SublimeLinter --> Settings

将下面代码复制进去

{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "background",
        "linters": {
        /*********************这里是关键*********************/
            "eslint": {
                "@disable": false,
                "args": [],
                "excludes": []
            },
        /**************************************************/
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        /*********************这里是关键*********************/
        "paths": {
            "linux": [],
            "osx": [],
            "windows": [
                "E:\\nodejs\\node_global"
            ]
        },
        /**************************************************/
        "python_paths": {
            "linux": [],
            "osx": [],
            "windows": []
        },
        "rc_search_limit": 3,
        "shell_timeout": 10,
        "show_errors_on_save": false,
        "show_marks_in_minimap": true,
        "syntax_map": {
            "html (django)": "html",
            "html (rails)": "html",
            "html 5": "html",
            "javascript (babel)": "javascript",
            "magicpython": "python",
            "php": "html",
            "python django": "python",
            "pythonimproved": "python"
        },
        "tooltip_fontsize": "1rem",
        "tooltip_theme": "Packages/SublimeLinter/tooltip-themes/Default/Default.tooltip-theme",
        "tooltip_theme_excludes": [],
        "tooltips": false,
        "use_current_shell_path": false,
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

“linters” 里的代码一般在安装 eslint 插件的时候就会自动添加。

“paths” 里主要填写本地 eslint 的路径，即 npm 安装的 eslint 路径。根据你的系统选择，Linux 环境下写在 linux 里，Windows 环境下写在 windows 里。路径只需要写到 eslint 所在文件夹即可。

2.SublimeLinter配置

选项	类型	默认	备注
debug	boolean	false	如果为true，SublimeLinter会将检查结果打印到Sublime的控制台中
lint_mode	string	background	设置当前的lint模式，可选值有background(后台实时)、load/save、save only(仅保存时候)和manual
path	array		设置额外的路径用于搜索可执行文件。例如，设置nodejs的位置
show_errors_on_save	boolean	false	当你保存文件的时候会弹出一个显示检查结果的快速面板
linters	object		分别设置每个linter插件

更多配置可查看官方文档 http://www.sublimelinter.com/en/latest/linter_settings.html

Eslint 配置文件

1. 在项目跟目录创建（.eslintrc.js）文件

然后将下面这串代码复制到 .eslintrc.js 这个文件里

module.exports = {
    "env": {
        "browser": true,
        "node": true,
        "es6": true, // 这个设置会自动启用 ES6 语法
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 6, // 设置为 3， 5 (默认)， 6、7 或 8 指定你想要使用的 ECMAScript 版本。你也可以指定为 2015（同 6），2016（同 7），或 2017（同 8）使用年份命名
        "sourceType": "module", // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)
        "ecmaFeatures": { // 这是个对象，表示你想使用的额外的语言特性:
            "jsx": true, // 启用 JSX
        }
    },
    // 规则配置
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ],
        //
        //
        // 可能的错误
        // 这些规则与 JavaScript 代码中可能的语法错误或逻辑错误有关
        //
        // 禁止 for 循环出现方向错误的循环，比如 for (i = 0; i < 10; i--)
        'for-direction': 2,
        // getter 必须有返回值，并且禁止返回空，比如 return;
        'getter-return': [
            'error',
            {
                allowImplicit: false
            }
        ],
        // 禁止在 if, for, while 里使用赋值语句，除非这个赋值语句被括号包起来了
        'no-cond-assign': [
            'error',
            'except-parens'
        ],
        // 禁止使用 console
        // @off console 的使用很常见
        'no-console': 0,
        // 禁止将常量作为 if, for, while 里的测试条件，比如 if (true), for (;;)，除非循环内部有 break 语句
        'no-constant-condition': [
            'error',
            {
                checkLoops: false
            }
        ],
        // 禁止在正则表达式中出现 Ctrl 键的 ASCII 表示，即禁止使用 /\x1f/
        // 开启此规则，因为字符串中一般不会出现 Ctrl 键，所以一旦出现了，可能是一个代码错误
        'no-control-regex': 2,
        // @fixable 禁止使用 debugger
        'no-debugger': 2,
        // 禁止在函数参数中出现重复名称的参数
        'no-dupe-args': 2,
        // 禁止在对象字面量中出现重复名称的键名
        'no-dupe-keys': 2,
        //禁止多余的冒号
        "no-extra-semi": 2,
        //禁止switch穿透
        "no-fallthrough": 1,
        //禁止省略浮点数中的0 .5 3.
        "no-floating-decimal": 2,
        //禁止重复的函数声明
        "no-func-assign": 2,
        //禁止使用八进制数字
        "no-octal": 2,
        //禁止使用八进制转义序列
        "no-octal-escape": 2,
        //不能比较自身
        "no-self-compare": 2,
        //不能有声明后未被使用的变量或参数
        "no-unused-vars": [2, {"vars": "all", "args": "none"}],
        //一行结束后面不要有空格
        "no-trailing-spaces": 1,
        //不能有未定义的变量
        "no-undef": 1,
        //函数调用时 函数名与()之间不能有空格
        "no-spaced-func": 2,
        //禁止混用tab和空格
        "no-mixed-spaces-and-tabs": [2, false],
        //换行风格
        "linebreak-style": [0, "windows"],
        //空行最多不能超过2行
        "no-multiple-empty-lines": [1, {"max": 2}],
        //缩进风格
        "indent": [2, 4],
        //引号类型 `` "" ''
        "quotes": [1, "single"],
        //关键字后面是否要空一格
        "space-after-keywords": [0, "always"],
        //不以新行开始的块{前面要不要有空格
        "space-before-blocks": [1, "always"],
        //函数定义时括号前面要不要有空格
        "space-before-function-paren": [1, "always"],
        //一元运算符的前/后要不要加空格
        "space-unary-ops": [1, { "words": true, "nonwords": false }],
        //使用严格模式
        "strict": 2,
        //this别名
        "consistent-this": [2, "self"],
        //switch语句最后必须有default
        "default-case": 2,
    }
};

这串代码是对你 eslint 检查规则的配置，这是我自己配的代码规范，当然你也可以自己配。

上面这些代码已经涵盖了日常使用的一些，还有更多规则还请自行查看官方文档 http://eslint.cn/docs/rules/

最后

SublimeLinter 不只是支持 ESlint，还有很多，比如 php 代码规范检查

SublimeLinter 还有很多功效，在这里就不细讲了，有待各位挖掘哈。

【注】由于 CSDN 改版导致图片全部失效，而我又有点懒（略略略）。所以图片我全删了，大家看着文字来哈 :aini: