如何在 Sublime Text 中集成 ESLint

如何在 Sublime Text 中集成 ESLint

ESLint 是一个广泛使用的 JavaScript 代码检查工具。它可以检测并修复代码中常见的语法和风格错误，帮助开发者编写更加规范和易于维护的代码。在 Sublime Text 中集成 ESLint 是一件非常有用的事情，它可以帮助开发者在编码的过程中及时地发现并修复错误，提高代码的质量和效率。本文将详细介绍如何在 Sublime Text 中集成 ESLint。

集成 ESLint 插件

在 Sublime Text 中，我们可以通过插件的方式来集成 ESLint。下面介绍两种在 Sublime Text 中集成 ESLint 的方法。

方法一：通过 Package Control 安装插件

Sublime Text 的 Package Control 是一个非常强大的插件管理工具，我们可以通过它来很方便地安装和管理各种插件。下面介绍如何通过 Package Control 安装 ESLint 插件。

1. 安装 Package Control

要使用 Package Control，首先需要安装它。在 Sublime Text 中按下 Ctrl + \ 或者选择 View -> Show Console 打开控制台，在控制台中输入以下代码并运行（需要等待一会儿）：

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

1. 安装 ESLint 插件

安装 Package Control 后，我们可以通过快捷键 Ctrl + Shift + P 或者选择 Tools -> Command Palette 打开命令面板，在命令面板中输入 install package 并回车，然后输入 ESLint 并回车即可安装 ESLint 插件。安装完成后，重启 Sublime Text 即可生效。

方法二：手动安装插件

如果您不想使用 Package Control，也可以手动下载安装 ESLint 插件。下面是手动安装的步骤：

1. 下载插件

打开浏览器，访问 https://github.com/SublimeLinter/SublimeLinter-eslint，点击 Clone or download 按钮，选择 Download ZIP 进行下载。

1. 解压插件

将下载的 ZIP 文件解压缩到 Sublime Text 的 Packages 目录下。可以通过 Preferences -> Browse Packages 打开 Packages 目录，解压缩后将得到一个名为 SublimeLinter-eslint-master 的目录。

1. 配置插件

在 Sublime Text 中，选择 Preferences -> Package Settings -> SublimeLinter -> Settings，将以下配置项添加到配置文件中：

-- -------------------- ---- -------
-
    ---------- -
        --------- -
            ----------- ------
            ------- ---
            ----------- --
        -
    --
    ------------- -
        ----------- --------- ------------
    -
-

保存配置文件后，关闭 Sublime Text 并重新打开即可。

使用 ESLint 插件

安装并配置完 ESLint 插件后，我们就可以在 Sublime Text 中使用它了。下面介绍如何在 Sublime Text 中使用 ESLint 插件。

开启 Linting

默认情况下，ESLint 插件不会自动开启 Linting 功能，我们需要手动开启。在 Sublime Text 中，先打开一份 JavaScript 文件，然后选择 Preferences -> Package Settings -> SublimeLinter -> User Settings，在该配置文件中添加以下代码：

{
    "linters": {
        "eslint": {
            "enabled": true
        }
    }
}

保存配置文件后，打开任意一份 JavaScript 文件，即可看到 ESLint 插件开始工作，它会自动检查代码中是否有语法和风格错误，并在代码行数旁边显示错误提示信息。

配置 ESLint

默认情况下，ESLint 插件会自动调用全局安装的 ESLint 命令来检查代码。如果您想使用项目中安装的 ESLint，可以通过下面的方法来配置：

1. 打开 .eslintrc 文件

在项目根目录下，创建一个名为 .eslintrc 的文件。

1. 配置 .eslintrc 文件

在 .eslintrc 文件中配置 ESLint 的规则和插件，例如：

-- -------------------- ---- -------
-
    ---------- -
        --------------------
    --
    -------- -
        --------- --------- ---
        ------------------ --------- --------
        ------- --------- ---------
    --
    ---------- -
        ------
    -
-

配置完成后，保存 .eslintrc 文件。然后在 Sublime Text 中打开一份 JavaScript 文件，ESLint 插件会自动调用 .eslintrc 文件中的配置规则来检查代码。

自定义快捷键

默认情况下，ESLint 插件没有设置任何快捷键，我们可以自定义快捷键来快速调用 ESLint 插件的功能。在 Sublime Text 中，选择 Preferences -> Key Bindings，在该配置文件中添加以下代码：

{
    "keys": ["ctrl+alt+l"],
    "command": "sublimelinter_lint",
    "args": {
        "linters": ["eslint"]
    }
}

保存该配置文件后，重启 Sublime Text，并打开一份 JavaScript 文件，按下 Ctrl + Alt + L 即可调用 ESLint 插件进行代码检查。

总结

在 Sublime Text 中集成 ESLint，可以帮助开发者检查代码中的语法和风格错误，提高代码的质量和效率。本文分别介绍了通过 Package Control 和手动安装两种方式来安装 ESLint 插件，并详细介绍了如何使用 ESLint 插件以及如何自定义快捷键，希望可以帮助到大家。

// 示例代码
function foo () {
    const bar = 'bar';
    return bar;
}

foo();

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6656cfe4d3423812e4bccc14