1. Sublime Text3 简介
Sublime Text是一款功能强大、稳定性优秀、界面简洁的代码编辑器，支持多种主题和插件，在程序员中广受欢迎。Sublime Text最新版本为Sublime Text3。
2. ESLint简介
ESLint是一款开源的JavaScript代码检查工具，可以根据配置文件对代码进行检查，并给出相应的提示信息，帮助开发者写出规范的代码。
ESLint有许多可用的插件，可以帮助开发者集成ESLint到编辑器中，以便更方便地使用ESLint进行代码检查。
3. 安装Sublime Text3
首先需要在Sublime Text3的官网（https://www.sublimetext.com/）下载对应平台的安装程序，安装Sublime Text3。
安装完成后，打开Sublime Text3，在菜单栏选择“Tools”→“Command Palette”，或者使用快捷键Ctrl+Shift+P。
3.1 安装Package Control
在打开的命令面板中输入“Install Package Control”，并回车执行。等待安装完成后，重启Sublime Text3。
4. 安装ESLint插件
使用Package Control安装ESLint插件，打开命令面板，在输入框中输入“Package Control: Install Package”，并回车执行。在输入框中搜索“ESLint”，选择“ESLint”进行安装。
等待插件安装完成后，需要在Sublime Text3中配置ESLint，使其与ESLint配置文件相匹配。
5. 配置ESLint插件
配置ESLint需要在Sublime Text3中创建一个新的配置文件
5.1 创建ESLint配置文件
在Sublime Text3的菜单栏中选择“Preferences”→“Package Settings”→“ESLint”→“Settings - Default”。
将其中的配置代码复制，然后在菜单栏中选择“Preferences”→“Package Settings”→“ESLint”→“Settings - User”。
将配置代码粘贴到打开的配置文件中。
{
"node_path": "",
"node_modules_path": "",
"rulesdir": "",
"env": {"browser": false, "node": false, "amd": false, "mocha": false, "jasmine": false, "jquery": false, "prototypejs": false, "shelljs": false},
"globals": {},
"plugins": [],
"extends": ""
}
其中，配置项的含义如下：
node_path: Node.js路径，在Windows上默认为"C:\Program Files\nodejs\node.exe"。
node_modules_path: Node.js模块路径，在Windows上默认为"%APPDATA%\npm\node_modules"。
rulesdir: 额外的ESLint规则路径。
env: 环境变量。
globals: 全局变量。
plugins: 插件列表。
extends: 继承配置文件路径。
5.2 配置ESLint插件
在Sublime Text3的菜单栏中选择“Preferences”→“Package Settings”→“ESLint”→“Settings - User”。
根据自己的需要，修改ESLint插件的开关及配置项。
{
"disable": false,
"show_errors_on_save": false,
"lint_on_load": false,
"lint_on_edit": true,
"debug": false,
"use_local_eslint": false,
"osx_pretend_full_path": true,
"always_show_minimap_viewport": false,
"minimap_viewport_scale": 5,
"linter_options": {"parser": "babel-eslint"},
"global_options": []
}
其中，配置项的含义如下：
disable: 是否关闭ESLint插件。
show_errors_on_save: 是否在保存文件时显示ESLint检测到的错误。
lint_on_load: 是否在打开文件时运行ESLint插件。
lint_on_edit: 是否在编辑文件时运行ESLint插件。
debug: 是否显示调试信息。
use_local_eslint: 是否使用项目本地安装的ESLint。
osx_pretend_full_path: 在OS X上模拟完整的路径。
always_show_minimap_viewport: 是否在小地图视图中始终显示视口区域。
minimap_viewport_scale: 小地图视口的缩放比例。
linter_options: ESLint选项。
global_options: 全局选项。
6. 配置ESLint
ESLint在使用之前需要进行配置，将检测规则和提示信息设置为符合项目需求的状态。
6.1 创建.eslintrc.js配置文件
.eslintrc.js为ESLint配置文件，可以根据项目需求进行配置。
在项目的根目录下新建一个.eslintrc.js文件，然后在其中输入ESLint的配置规则，保存。
module.exports = {
root: true,
env: {
node: true,
es6: true
},
extends: ["eslint:recommended"],
rules: {
"no-console": process.env.NODE_ENV === "production" ? "error" : "off",
"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
"semi": ["error", "always"],
"quotes": ["error", "double"]
},
parserOptions: {
parser: "babel-eslint"
}
};
其中，.eslintrc.js中的配置项的含义如下：
root: 当前的配置文件是否为根配置文件。
env: 指定环境，可选值为browser、node、commonjs、es6、mocha、jasmine、jquery、prototypejs、shelljs。
extends: 使用默认的配置文件。
rules: 规则配置，可根据需求设置规则，规则名称在官网有详细介绍（https://eslint.org/docs/rules/）。
parserOptions: 设置解析器和解析器选项。
6.2 配置package.json文件
在package.json文件中添加ESLint的配置信息：“eslintConfig”。
{
"name": "my-project",
"version": "1.0.0",
"eslintConfig": {
"root": true,
"env": {
"node": true,
"es6": true
},
"extends": ["eslint:recommended"],
"rules": {
"no-console": "error",
"no-debugger": "error",
"semi": ["error", "always"],
"quotes": ["error", "double"]
},
"parserOptions": {
"parser": "babel-eslint"
}
}
}
7. 结束语
安装Sublime Text3和ESLint插件，配置ESLint，可以让开发者更轻松地写出规范的JavaScript代码。
通过以上步骤，我们已经完成了Sublime Text3 ESLint的安装及配置。您可以根据您项目的特点进行更改。