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

当前位置: 首页 » 文章 » javascript 代码校验工具 eslint 在 Sublime Text 3 中的安装使用教程

分类: 文章 385阅读阅读模式

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

 

1、前提要求

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

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

 

2、安装 eslint 相关插件

在 Sublime Text 3  中安装下方插件

  1. SublimeLinter
  1. SublimeLinter-contrib-eslint_d
  1. SublimeLinter-eslint

 

3、安装 eslint 相关依赖包

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

  1. npm install -g eslint
  1. npm install -g eslint_d

 

4、配置 eslint 相关设定

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

  1. // SublimeLinter Settings - User
  2. {
  3.     "debug": true,
  4.     "delay": 0.25,
  5.     // "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
  6.     "lint_mode": "background",
  7.     "linters":
  8.     {
  9.         "stylelint":
  10.         {
  11.             "args": [
  12.                 "--config",
  13.                 "C:\\Users\\【当前用户名称】\\.stylelintrc.json"
  14.             ],
  15.         },
  16.         "htmlhint":
  17.         {
  18.             "args": [
  19.                 "--config",
  20.                 "C:\\Users\\【当前用户名称】\\.htmlhintrc"
  21.             ],
  22.             "excludes": ["*.php"]
  23.         },
  24.         "eslint":
  25.         {
  26.             // "disable": false,
  27.             "args": [
  28.                 "--config",
  29.                 "C:\\Users\\【当前用户名称】\\.eslintrc.js"
  30.             ],
  31.             "globals":{},
  32.             "excludes": []
  33.         }
  34.     },
  35.     "no_column_highlights_line": false,
  36.     "paths":
  37.     {
  38.         "linux": [],
  39.         "osx": [],
  40.         "windows": [
  41.             "C:\\Users\\【当前用户名称】\\AppData\\Roaming\\npm\\eslint.cmd"
  42.         ]
  43.     },
  44.     "show_marks_in_minimap": true,
  45. }

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

 

5、配置全局 eslint 校验文件

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

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

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

  1. module.exports = {
  2.   // 开发环境
  3.   "env": {
  4.     "browser": true,
  5.     "es6": true,
  6.     "jquery": true,
  7.     "node": true
  8.   },
  9.   // 全局变量
  10.   "globals": {
  11.     "require": true,
  12.     "__dirname": true,
  13.     "module": true,
  14.     "Page": true
  15.   },
  16.   // 使用 eslint 通用校验规则
  17.   "extends": "eslint:recommended",
  18.   //
  19.   "parserOptions": {
  20.     "ecmaVersion": 6,
  21.     "sourceType": "module",
  22.     "ecmaFeatures": {
  23.       "jsx": true
  24.     }
  25.   },
  26.   // 规则
  27.   "rules": {
  28.     "indent": ["error", 2],
  29.     "strict": "off",
  30.     "no-unused-vars": "warn",
  31.     "no-console": "warn",
  32.     "comma-dangle": ["off", "always"],
  33.     "eqeqeq": "warn",
  34.     "linebreak-style": ["error", "unix"],
  35.     "quotes": ["off", "double"],
  36.     "semi": ["error", "always"]
  37.   }
  38. };

更多配置说明请参考 => Configuring ESLint - ESLint中文

 

6、ESlint 校验结果

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

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

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

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

 

代码校验配置结束。

 

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

 

 

 

 

相关文章