前端入门：ESLint使用方法

关于前端入门系列

整理目标

React：React起源于Facebook的内部项目，当前最火的前端框架。

Redux：react官方推荐的一个状态管理库。功能强大且代码优雅

ES6：JavaScript 语言的下一代标准

Balel：javascript编译器

PM2：pm2 是一个带有负载均衡功能的Node应用的进程管理器

ESLint：Javascript代码进行代码规范检查工具

Webpack：一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理

本次：分享ESLint

安装本地安装

全局安装

生成配置文件

在工程的根目录下执行下面命令

命令执行结果

确认根目录下会生成文件

.eslintrc.js

自定义配置选项

configuring

url:http://eslint.cn/docs/user-guide/configuring

rules：

url:http://eslint.cn/docs/rules/

参考内容：idea中配置eslint 静态代码检查

url:http://www.cnblogs.com/weilantiankong/p/5980964.html

ESLint配置参数介绍

url:https://segmentfault.com/a/1190000004468428

airbnb配置文件

url:https://github.com/libertyAlone/airbnb-javascript-style-guide-cn

设置忽略目录

在根目录下创建文件

参考内容

Idea安装插件

操作：webstorm->Preferences...->Plugins->Browe repositories...

输入ESLint, 安装插件

设置

操作：webstorm->Preferences...->Plugins->Browe repositories...

左边的导航栏中点击ESLint，然后

/usr/local/bin/eslint

/usr/local/bin/node

Enable：启用

Node interpreter：选择Node安装路径

Path to eslint bin： 选择eslint安装路径

Use specific config file中选择.eslintrc.js

然后按OK按钮，使配置生效

自动修复功能

操作：菜单Code->ESLint Fix -> 功能比较简单，只能删除空格

检查代码

例子

React中使用ESLint

安装eslint

安装Airbnb开发配置合集

参考资料

url:http://blog.csdn.net/gdp12315_gu/article/details/54098810

url:https://segmentfault.com/a/1190000008575829

url:https://segmentfault.com/a/1190000009914940

React系列---ESlint

webpack2集成eslint

React用ESLint代码检测 常见问题

参考文章

使用 VSCode + ESLint 实践前端编码规范

url:https://segmentfault.com/a/1190000009077086

webstorm引用ESLint进行静态代码检查

url:http://www.cnblogs.com/super86/p/6994813.html

关于捞猴

捞猴就一个字：“干”，你可以理解为干货的”干“，也可以理解为干活的”干“，希望大家在工作中，分享干货，获得干货，提高工作效率，少加班，充分享受生活，充分享受家庭。

路漫漫兮修远，you can you up，分享是一种美德