Configuring ESLint in Sublime Text

ESLint

ESLint is an effective code quality control tool that can avoid low-level code errors based on pre-established code specifications. , and ensure the unity of code style. The sublime usage tutorial column below will introduce you to the method of configuring ESLint in Sublime Text.

Installation

You can use npm to install ESLint:

npm install eslint -g

Usage

If you are using ESLint for the first time, you need to set up a configuration file first. You can use the --init option in the project root directory to generate:

eslint --init

If there is no package.json file in the project root directory, it will prompt you to use npm init to initialize a package.json file.

eslint --init will prompt you to choose the code style to use. You can choose according to your needs. The following choices are recommended here:

Use a popular style guide
Standard
JavaScript

During this process, eslint will independently perform the npm install operation. to install related dependencies. After the installation is complete, please pay attention to whether there is a dependency on the UNMET PEER DEPENDENCY item. This means that NPM cannot automatically install this dependency. You need to install it manually:

# ├── UNMET PEER DEPENDENCY eslint-plugin-promise@^1.0.8
npm install eslint-plugin-promise --save-dev

Integrate Sublime Text

In Sublime Text you need to install two plug-ins:

SublimeLinter
SublimeLinter-contrib-eslint

Then integrate through Preferences->Package Settings->SublimeLinter->Settings - User:

{
    "user": {
        "debug": true, # 开启 debug 选项
        "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": []
            },
            "jshint": {
                "@disable": false,
                "args": [],
                "excludes": []
            },
            "php": {
                "@disable": false,
                "args": [],
                "excludes": []
            }
        },
        "mark_style": "outline",
        "no_column_highlights_line": false,
        "passive_warnings": false,
        "paths": {
            "linux": [],
            "osx": [
                "/Users/wang/.nvm/versions/node/v5.0.0/bin" # 设置 node 路径
            ],
            "windows": []
        },
        "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"
        },
        "warning_color": "DDB700",
        "wrap_find": true
    }
}

At this point, the integration is complete. If the JavaScript code style in your project does not comply with the JavaScript Standard Style, Sublime Text will give an exception prompt.

The above is the detailed content of Configuring ESLint in Sublime Text. For more information, please follow other related articles on the PHP Chinese website!