关于前端入门系列

整理目标

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

全局安装

npm install -g eslint

生成配置文件

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? JavaScriptLocal 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.jssrc/XXX/XXX.js*.shnode_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 eslintnpm install --save-dev eslint-loader

安装Airbnb开发配置合集

# 本地安装

npm install --save-dev eslint-config-airbnbnpm install --save-dev eslint-plugin-importnpm install --save-dev eslint-plugin-react npm install --save-dev eslint-plugin-jsx-a11y

# 全局安装

npm install --g eslint-config-airbnbnpm install --g eslint-plugin-importnpm 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

网站首页 > 技术文章正文

前端入门(用心整理):ESLint使用方法

关于前端入门系列

猜你喜欢

网站首页 > 技术文章 正文

前端入门(用心整理):ESLint使用方法

关于前端入门系列

猜你喜欢

网站首页 > 技术文章正文