sublime3使用ESLint

转载 2017年01月03日 14:17:24


许多刚开始使用Sublime的同学可能都抱怨过为什么没有语法错误提示功能。像WebStorm,输入的语法错误在程序被编译之前就被编辑器提示出来,这样会在一定程度上提高开发的效率。而Sublime似乎不会提示语法错误或是简单的拼写错误,比如误用了中文符号,对象的属性之间忘记用逗号隔开等等一些低级错误;我们必须每次编译后才知晓这些错误,这样会将我们的部分精力和时间浪费在一次次地修改这些低级错误上,从而无法专注于程序本身。

甚至有时候像 if(a=1) 这样的错误,编译也是完全通过的。我就不只一次碰到过这样的情况,编译完全通过,逻辑也对,就是结果不对。结果debug半天,发现是这样的错误,顿时有种精力都喂了狗的感觉。好在现在有解决办法了(其实早有了,我刚发现而已~~),我们也能像在WebStorm中一样,一边写程序,一边系统自动帮我们检测语法正确性,就像下面这样:

我误用了 = ,在文件保存时就会被提示,直接顺手改掉就行了,方便的不行。

这些都是 ESLint 的功劳,它包含了一系列的 Rules ,通过配置这些Rules,你可以轻松地实时检测语法错误。在使用之前最好把 官方教程 学习一下。下面说说在Sublime中的配置方法:

  • Sublime集成 ESLint 需要两个插件 SublimeLinter 和 SublimeLinter-contrib-eslint ;直接在Package Controll中安装就好
  • 安装ESLint: npm i -g eslint
  • 安装后修改SublimeLinter的配置文件,在Package Settings中打开其Setting-User,将下列代码复制进去:
setting-user
 
{
 "user": {
 "debug": false,
 "delay": 0.25,
 "error_color": "D02000",
 "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",
 "gutter_theme_excludes": [],
 "lint_mode": "save only",
 "linters": {
 // 新增的
 "eslint": {
 "@disable": false,
 "args": [],
 "excludes": []
 }
 },
 "mark_style": "outline",
 "no_column_highlights_line": false,
 "passive_warnings": false,
 "paths": {
 "linux": [],
 "osx": [],
 "windows": [
 // 这个是你全局安装eslint后eslint.cmd的所在目录
 "C:/Users/Lin/AppData/Roaming/npm/eslint.cmd"
 ]
 },
 "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"
 },
 "warning_color": "DDB700",
 "wrap_find": true
 }
}
  • 关键的一步,配置eslint,最好把 官方教程 看看,配置出适合自己编程习惯的配置文件再好不过了,我的配置文件内容如下:
    .eslintrc.json
    {
     "env": {
     "browser": true,
     "es6": true,
     "node": true
     },
     "parserOptions": {
     "sourceType": "module"
     },
     "rules": {
     "no-cond-assign": [2, "always"], //if, while等条件中不允许使用“=”
     "no-constant-condition": 2,
     "no-debugger": 2, // 程序中不能出现debugger
     "no-dupe-args": 2, // 函数的参数名称不能重复
     "no-dupe-keys": 2, // 对象的属性名称不能重复
     "no-duplicate-case": 2, // switch的case不能重复
     "no-func-assign": 2,
     "no-obj-calls": 2,
     "no-regex-spaces": 2,
     "no-sparse-arrays": 2,
     "no-unexpected-multiline": 2,
     "no-unreachable": 2,
     "use-isnan": 2,
     "valid-typeof": 2,
     "eqeqeq": [2, "always"],
     "no-caller": 2,
     "no-eval": 2,
     "no-redeclare": 2,
     "no-undef": 2,
     "no-unused-vars": 1,
     "no-use-before-define": 2,
     "comma-dangle": [1, "never"],
     "no-const-assign": 2,
     "no-dupe-class-members": 2
     }
    }
    
  • 最后,把配置好的文件放在你项目的根目录中就可以了,项目中所有的子文件也会自动使用该配置文件。

这只是入门级的介绍,ESLint还有很多其他的功能,对JSX也支持,想了解的同学不妨自己去官网学习一下。


转载自:http://ylcui.top/2016/08/06/在Sublime3中使用ESLint/

相关文章推荐

sublime 集成 ESLint

sublime集成ESlint需要安装两个插件SublimeLinter、SublimeLinter-eslint才能正常使用 (插件目录名是SublimeLinter3,默认gutter_them...

前端代码检测利器——eslint for sublime安装指南

在搜到该文章之前,相信你已经对eslint有一定了解。相比jslint、jshint等这些检测工具来说,eslint最大的吸引力就在于可以支持js、jsx、es6(es2015)等代码的检测。好了,废...
  • binjly
  • binjly
  • 2015年11月19日 12:36
  • 11441

Web相关:Sublime如何安装ESLint插件?

论良好的编码风格的重要性。ESLint为何物?简单的说,它跟jshint类似,都是对JavaScript代码进行语法的检测,但是它提供了更好的扩展性与更丰富的检测机制。Airbnb JavaScrip...

sublime3配置eslint

sublime3配置eslint

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

前端代码检测利器——eslint for sublime安装指南

一、eslint是什么 在搜到该文章之前,相信你已经对eslint有一定了解。相比jslint、jshint等这些检测工具来说,eslint最大的吸引力就在于可以支持js、jsx、es6(es2...

sublime 整合 eslint

sublime 整合 eslint eslint 简介: ESLint 是一个可扩展、每条规则独立、不内置编码风格为理念编写一个lint工具 eslint特点: 1. 默认规则...

Sublime3集成ESLint

据说有不止一种集成ESLint的方式,这里只介绍使用NodeJS的方式,不要问我为什么,因为其他方式我还没尝试。。。 1.      现有NodeJS环境,它是javascript的运行时环境。类似于...

ESLint深入使用

ESLint我眼中的ESLint我们先来说说ESLint是什么,能够做什么工作 官网的简介如下:The pluggable listing utility for JavaScript and JS...

在Sublime3中使用ESLint

Sublime集成 ESLint 需要两个插件 SublimeLinter 和 SublimeLinter-contrib-eslint ;直接在Package Controll中安装就好 安装ES...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:sublime3使用ESLint
举报原因:
原因补充:

(最多只允许输入30个字)