前端入门:ESLint使用方法

2018-01-04 10:27:34 浏览数 (1)

关于前端入门系列

整理目标

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,分享是一种美德

0 人点赞