在Sublime3中使用ESLint

[pramper]

许多刚开始使用Sublime的同学可能都抱怨过为什么没有语法错误提示功能。像WebStorm，输入的语法错误在程序被编译之前就被编辑器提示出来，这样会在一定程度上提高开发的效率。而Sublime似乎不会提示语法错误或是简单的拼写错误，比如误用了中文符号，对象的属性之间忘记用逗号隔开等等一些低级错误；我们必须每次编译后才知晓这些错误，这样会将我们的部分精力和时间浪费在一次次地修改这些低级错误上，从而无法专注于程序本身。

甚至有时候像if(a=1)这样的错误，编译也是完全通过的。我就不只一次碰到过这样的情况，编译完全通过，逻辑也对，就是结果不对。结果debug半天，发现是这样的错误，顿时有种精力都喂了狗的感觉。好在现在有解决办法了（其实早有了，我刚发现而已~~），我们也能像在WebStorm中一样，一边写程序，一边系统自动帮我们检测语法正确性，就像下面这样：

我误用了=，在文件保存时就会被提示，直接顺手改掉就行了，方便的不行。

这些都是ESLint的功劳，它包含了一系列的Rules，通过配置这些Rules，你可以轻松地实时检测语法错误。在使用之前最好把官方教程学习一下。下面说说在Sublime中的配置方法：

• Sublime集成ESLint需要两个插件SublimeLinter和SublimeLinter-contrib-eslint；直接在Package Controll中安装就好
• 安装ESLint：npm i -g eslint
• 安装后修改SublimeLinter的配置文件，在Package Settings中打开其Setting-User，将下列代码复制进去：

{
    "user": {
        "debug": false,
        "delay": 0.25,
        "error_color": "D02000",
        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
        "gutter_theme_excludes": [],
        "lint_mode": "save only",
        "linters": {
            // 新增的
            "eslint": {
                "@disable": false,
                "args": [],
                "excludes": []
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        "paths": {
            "linux": [],
            "osx": [],
            "windows": [
                // 这个是你全局安装eslint后eslint.cmd的所在目录
                "C:/Users/Lin/AppData/Roaming/npm/eslint.cmd"
            ]
        },
        "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"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

• 关键的一步，配置eslint，最好把官方教程看看，配置出适合自己编程习惯的配置文件再好不过了，我的配置文件内容如下：

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "sourceType": "module"
    },
    "rules": {
        "no-cond-assign": [2, "always"], //if, while等条件中不允许使用“=”
        "no-constant-condition": 2,
        "no-debugger": 2,   // 程序中不能出现debugger
        "no-dupe-args": 2,  // 函数的参数名称不能重复
        "no-dupe-keys": 2,   // 对象的属性名称不能重复
        "no-duplicate-case": 2,  // switch的case不能重复
        "no-func-assign": 2,
        "no-obj-calls": 2,
        "no-regex-spaces": 2,
        "no-sparse-arrays": 2,
        "no-unexpected-multiline": 2,
        "no-unreachable": 2,
        "use-isnan": 2,
        "valid-typeof": 2,
        "eqeqeq": [2, "always"],
        "no-caller": 2,
        "no-eval": 2,
        "no-redeclare": 2,
        "no-undef": 2,
        "no-unused-vars": 1,
        "no-use-before-define": 2,
        "comma-dangle": [1, "never"],
        "no-const-assign": 2,
        "no-dupe-class-members": 2
    }
}

• 最后，把配置好的文件放在你项目的根目录中就可以了，项目中所有的子文件也会自动使用该配置文件。

这只是入门级的介绍，ESLint还有很多其他的功能，对JSX也支持，想了解的同学不妨自己去官网学习一下。