四大编辑器配置Eslint代码检测

四大编辑器(Webstorm, Atom, VScode, Sublime)配置Eslint检测方法。

Eslint是什么

配置之前,我们肯定先需要弄清Eslint是什么。
Eslint是一种新的JavaScript或ECMAScript代码格式检测工具,类似于JSLint或JSHint工具。通过Eslint官网,我们可以手动配置适合团队自己的JavaScript代码格式,做到团队内部统一。例如严格执行一个tab四个空格,每条JavaScript表达式都要紧跟一个分号等等。不过Eslint毕竟只是一个代码格式检测工具,至于代码格式的标准,目前比较推崇的是AirBnb规范,我们需要在项目根目录下新建.eslintrc文件来自定义某个项目的代码规范,这些内容官网都有,这里就不在赘述。不过如果需要React的格式规范即JSX语法,则我们需要安装对应的插件eslint-plugin-reacteslint-plugin-jsx-a11y

Webstorm

Webstorm虽然一直因为其性能问题而饱受诟病,但有些人还是把它称为’前端开发神器’。接下来,我们先配置Webstorm的Eslint代码检测。
不过在配置eslint之前,我们首先需要全局安装两个node插件eslintbabel-eslint:

1
(sudo) node install -g eslint babel-eslint

然后preferences -> Languages & Frameworks -> Javascript -> code quality tools -> eslint,打开enable设置,分别输入本机全局的node和eslint目录即可。
Webstorm开启Eslint代码检测功能

Atom

Atom编辑器相对较简单点,不需要全局安装上面两个node插件,仅仅需要安装一个Atom的linter-eslint插件即可。cmd + ,调出settings界面,install packages面板输入插件名,安装。
eslint插件会自动检查当前打开的js文件,然后将报错信息显示在面板底部,报错的类型是一个链接,我们可以通过点击链接调到eslint官网查看其支持的正确使用方法,这种体验性稍好点。
Atom开启Eslint代码检测功能

VSCode](https://code.visualstudio.com)

VScode编辑器同Atom编辑器,也只需要安装一个名为Eslint的插件,启用即可。

Sublime3

首先,需要安装packages control工具,Tools -> Install packages control或者 直接通过ctrl + `打开console控制台,将下列代码复制粘贴上去。

1
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

成功安装后,通过cmd + shift + p打开packages控制台,安装SublimeLinter-eslint插件,不过在此之前,我们还是需要像Webstorm一样全局安装Eslint的node插件。

总结

每个编辑器都有各自的缺点,sublime不支持JSX语法,VScode不支持ES6的一些语法,需要在项目根目录下新建一个名为JSconfig.json的配置文件,而Atom则不支持格式化JSX代码。最后发现,还是我大Webstorm最为牛逼。哦,除了性能有点差之外。