sublime3配置Eslint

全局安装Eslint

npm install eslint -g

安装 SublimeLinter 和 SublimeLinter-eslint

按下sublime快捷键：Ctrl + Shift + P > Package Control: Install Package 依次搜索安装上面两个插件，注意只支持sublime text3。

集成到sublime

也就是配置SublimeLinter的user settings，依次点击Preferences > Package Settings > SublimeLinter > settings，具体配置如下：

// SublimeLinter Settings - User
{
    "debug": true,
    "delay": 0.25,
    "gutter_theme": "Danish Royalty",
    "lint_mode": "background",
    "linters": {
        "eslint": {
            "@disable": false,
            "args": [],
            "excludes": []
        },
        "eslint_d": {
            "@disable": false,
            "args": [],
            "excludes": []
        }
    },
    "no_column_highlights_line": false,
    "paths": {
        "linux": [],
        "osx": [],
        "windows": ["C:/Users/Administrator/AppData/Roaming/npm/eslint.cmd"]
    },
    "show_marks_in_minimap": true,
    "styles": [
        {
            "mark_style": "outline",
            "priority": 1,
            "scope": "region.yellowish markup.changed.sublime_linter markup.warning.sublime_linter",
            "icon": "dot",
            "types": [
                "warning"
            ]
        },
        {
            "mark_style": "outline",
            "priority": 1,
            "scope": "region.redish markup.deleted.sublime_linter markup.error.sublime_linter",
            "icon": "dot",
            "types": [
                "error"
            ]
        }
    ],
    "syntax_map": {
        "html (django)": "html",
        "html (rails)": "html",
        "html 5": "html",
        "javascript (babel)": "javascript",
        "magicpython": "python",
        "php": "html",
        "python django": "python"
    }
}

这是我的设置，你可以根据自己的喜好设置主题样式等。

配置 ESLint

在项目根目录 bash 输入

eslint --init

这里 ESLint 会让你确认项目的配置项目，包括代码风格、目标文件等。我一般选择 Answer questions about your style，即通过选择性的回答命令行中的问题让 ESLint 生成适合我项目的配置文件，我的是react项目，会用到 es6 和 jsx，所以你根据自己的情况配置即可。

How would you like to configure ESLint?

Answer questions about your style

Are you using ECMAScript 6 features? Yes

Where will your code run? Browser

Do you use CommonJS? No

Do you use JSX? Yes

What style of indentation do you use? Spaces

What quotes do you use for strings? Double

What line endings do you use? Unix

Do you require semicolons? Yes

What format do you want your config file to be in? JavaScript

生成的配置文件竟然是这样的：

module.exports = {
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};

更多精彩技术类文章请移步至我的我的个人博客，欢迎到访！