es6常用的前端框架：前端入门用心整理
es6常用的前端框架：前端入门用心整理本次：分享ESLintWebpack：一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理Balel：javascript编译器PM2：pm2 是一个带有负载均衡功能的Node应用的进程管理器ESLint：Javascript代码进行代码规范检查工具
关于前端入门系列整理目标
-
React：React起源于Facebook的内部项目，当前最火的前端框架。
-
Redux：react官方推荐的一个状态管理库。功能强大且代码优雅
-
ES6：JavaScript 语言的下一代标准
-
Balel：javascript编译器
-
PM2：pm2 是一个带有负载均衡功能的Node应用的进程管理器
-
ESLint：Javascript代码进行代码规范检查工具
-
Webpack：一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理
本次：分享ESLint
安装
本地安装
npm install eslint --save-dev
全局安装
在工程的根目录下执行下面命令
eslint --init
-
命令执行结果
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes? Are you using ES6 modules? Yes? Where will your code run? Browser
? Do you use CommonJS? Yes? Do you use JSX? Yes? Do you use React? Yes? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? Yes? What format do you want your config file to be in? JavaScript
Local ESLint installation not found.
Installing eslint-plugin-react@latest eslint@latest
-
确认根目录下会生成文件
-
.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
-
设置忽略目录
在根目录下创建文件
.eslintignore
参考内容
src/XXX/XXX.js
src/XXX/XXX.js
*.sh
node_moduleslibcoverage
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 -> 功能比较简单，只能删除空格
检查代码
-
例子
# 检查文件
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/' function(req res next) { res.send('respond with a resource');
if (foo == 2) { alert(cccc); } });
module.exports = router;
# 命令行输入下面命令
# 可以使用通配符 eslint --color app/**/*.js
eslint --color routes/users.js
# 检查结果
/work/coding/webstorm/node-test/routes/users.js
5:35 error 'next' is defined but never used no-unused-vars
7:9 error 'foo' is not defined no-undef
8:15 error 'cccc' is not defined no-undef
React中使用ESLint
-
安装eslint
npm install --save-dev eslint npm install --save-dev eslint-loader
-
安装Airbnb开发配置合集
# 本地安装
npm install --save-dev eslint-config-airbnb npm install --save-dev eslint-plugin-import npm install --save-dev eslint-plugin-react npm install --save-dev eslint-plugin-jsx-a11y
# 全局安装
npm install --g eslint-config-airbnb npm install --g eslint-plugin-import npm install --g eslint-plugin-react npm install --g eslint-plugin-jsx-a11y
-
参考资料
-
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
