javascript 代码校验工具 eslint 在 Sublime Text 3 中的安装使用教程

发布时间： 2019年4月23日分类：文章 2502阅读阅读模式

在 Sublime Text 3 中使用 eslint 校验 javascript (.js 文件) 代码，规范代码。

1.1、需要事先有 Sublime Text 3 并可以通过 Package Control 安装插件，传送门 >>

1.2、需要事先安装 node.js 软件，传送门 >>

在 Sublime Text 3 中安装下方插件

3、安装 eslint 相关依赖包

打开“命令提示符”，在命令行中安装下方依赖包

4、配置 eslint 相关设定

在 Preferences -> Package Settings -> SublimeLinter -> Settings 中修改如下示例

// SublimeLinter Settings - User
{
"debug": true,
"delay": 0.25,
// "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
"lint_mode": "background",
"linters":
{
"stylelint":
{
"args": [
"--config",
"C:\\Users\\【当前用户名称】\\.stylelintrc.json"
],
},
"htmlhint":
{
"args": [
"--config",
"C:\\Users\\【当前用户名称】\\.htmlhintrc"
],
"excludes": ["*.php"]
},
"eslint":
{
// "disable": false,
"args": [
"--config",
"C:\\Users\\【当前用户名称】\\.eslintrc.js"
],
"globals":{},
"excludes": []
}
},
"no_column_highlights_line": false,
"paths":
{
"linux": [],
"osx": [],
"windows": [
"C:\\Users\\【当前用户名称】\\AppData\\Roaming\\npm\\eslint.cmd"
]
},
"show_marks_in_minimap": true,
}

注意：请把【当前用户名称】替换成当前 Window 的用户名称。如下图的用户文件夹名称就是 “当前用户名称”

5、配置全局 eslint 校验文件

常规来说，每个项目是对应的校验，但对于个人来说，放置到全局做校验更适合。

从第 4 点可看到 "C:\\Users\\【当前用户名称】\\.eslintrc.js" 这个就是全局配置文件的位置，如果没有可新建一个，注意文件名是【.eslintrc.js】。

文件内容规则参考下方写法：

6、ESlint 校验结果

一切准备就绪后，重启 Sublime Text 。打开一个 js 文件。即可看到规则生效

如下图，代码会根据错误的报红色框，警告报黄色框。

在 Sublime Text 左下角状态栏点击 “Output: SublimeLinter” 打开校验内容，如下图黄色框就是校验结果。

红色箭头指示当前 js 文件存在多少个错误，第一个错误存在第几行。

代码校验配置结束。

如果需要配置自动 eslint 修复代码不规范功能，后续补充~