赵走x博客
网站访问量:151526
首页
书籍
软件
工具
古诗词
搜索
登录
49、Flux:理念、回顾Whinepad
48、lint、Flow、测试与复验:测试
47、lint、Flow、测试与复验:Flow
46、lint、Flow、测试与复验:ESLint
45、lint、Flow、测试与复验:package.json
44、构建实例应用:<Whinepad>
43、构建实例应用:应用配置
43、构建实例应用:<Excel>:改进的新版本
42、构建实例应用:组件:对话框
41、构建实例应用:组件:Actions
39、构建实例应用:表单:Form
38、构建实例应用:表单:<FormInput>“工厂组件”
37、构建实例应用:表单:Rating组件
36、构建实例应用:表单:Suggest
35、构建实例应用:Button组件
34、构建实例应用:组件
33、构建实例应用:Whinepad v.0.0.1
32、发布
31、开始构建
30、安装必备工具
29、为应用开发做准备:一个模板应用
28、JSX 和表单
27、JSX 和HTML 的区别
26、在JSX 中返回多个节点
25、展开属性
24、HTML 实体
23、JSX入门
22、Excel:一个出色的表格组件:下载表格数据
21、Excel:一个出色的表格组件:即时回放
20、Excel:一个出色的表格组件:搜索
19、Excel:一个出色的表格组件:编辑数据
18、Excel:一个出色的表格组件:排序
17、Excel:一个出色的表格组件
16、 PureRenderMixin
15、 性能优化:避免组件更新
14、 生命周期示例:使用子组件
13、组件生命周期示例:使用mixin
12、组件:生命周期方法
11、中途改变属性
10、从外部访问组件
9、在初始化state 时使用props:一种反模式
8、 props 与state
7、关于DOM 事件的说明
6、组件:带状态的文本框组件
5、组件的state
4、组件的propTypes
3、组件的属性
2、组件的基础
1、Hello World
50、Flux:Store
46、lint、Flow、测试与复验:ESLint
资源编号:76100
书籍
React快速上手开发
热度:95
ESLint(http://eslint.org/ )是一个JavaScript 和JSX 检查工具,可以帮助你检查代码中的潜在问题。此外,ESLint 还可以帮助你检查代码一致性,比如缩进与空格的使用。这个工具还可以检查拼写错误以及未使用的变量。在理想情况下,ESLint 除了作为构建过程中的一部分,还应该被整合到你的源代码控制系统以及代码编辑器中,以保证ESLint 最大限度地提醒你少犯错误。
ESLint(http://eslint.org/ )是一个JavaScript 和JSX 检查工具,可以帮助你检查代码中的潜在问题。此外,ESLint 还可以帮助你检查代码一致性,比如缩进与空格的使用。这个工具还可以检查拼写错误以及未使用的变量。在理想情况下,ESLint 除了作为构建过程中的一部分,还应该被整合到你的源代码控制系统以及代码编辑器中,以保证ESLint 最大限度地提醒你少犯错误。 # 1、安装 除了ESLint 本身, 你还需要安装React 和Babel 的插件, 用于帮助ESLint 识别ECMAScript 的最新语法,以及从JSX 与React 的特定“规则”中受益: ``` $ npm i -g eslint babel-eslint eslint-plugin-react eslint-plugin-babel ``` 然后在package.json 文件中添加eslintConfig 配置: ``` { "name": "whinepad", "version": "2.0.0", "babel": {}, "scripts": {}, "eslintConfig": { "parser": "babel-eslint", "plugins": [ "babel", "react" ], } } ``` # 2、运行 对单个文件运行检查工具的命令如下: ``` $ eslint js/source/app.js ``` 理想状况下,这条命令应该不会提示错误信息。这意味着ESLint 可以正常识别JSX 以及其他古怪的语法。但是这还不够好,因为目前检查工具还没有验证任何规则。ESLint 会根据预先定义的规则逐一检查每项内容。在起步阶段,你可以(通过extend)使用ESLint 内置的一些规则: ``` "eslintConfig": { "parser": "babel-eslint", "plugins": [], "extends": "eslint:recommended" } ``` 再次运行该命令,你会得到一些错误提示信息: ``` $ eslint js/source/app.js /Users/stoyanstefanov/reactbook/whinepad2/js/source/app.js 4:8 error "React" is defined but never used no-unused-vars 9:23 error "localStorage" is not defined no-undef 25:3 error "document" is not defined no-undef 3 problems (3 errors, 0 warnings) ``` 第二条和第三条错误信息都是关于未声明的变量(来源于规则no-undef),但实际上这些变量都是可以在浏览器中全局访问的。因此可以通过在eslintConfig 中增加配置项,以修复该问题: ``` "env": { "browser": true } ``` 第一条错误信息和React 相关。虽然你的确需要引入React,但从ESLint 的角度看来,这似乎是一个没有使用过的变量,因此没有必要存在。借助eslint-plugin-react 中的一条规则可以解决这个问题: ``` "rules": { "react/jsx-uses-react": 1 } ``` 接下来检查schema.js 文件,你会得到另一种类型的错误信息: ``` $ eslint js/source/schema.js /Users/stoyanstefanov/reactbook/whinepad2/js/source/schema.js 9:18 error Unexpected trailing comma comma-dangle 16:17 error Unexpected trailing comma comma-dangle 25:18 error Unexpected trailing comma comma-dangle 32:14 error Unexpected trailing comma comma-dangle 38:33 error Unexpected trailing comma comma-dangle 39:4 error Unexpected trailing comma comma-dangle 6 problems (6 errors, 0 warnings) ``` 末尾逗号(比如let a = [1,],而非let a = [1])有时是不好的(因为在某些老版本的浏览器中,末尾逗号会导致语法错误),但是保留末尾逗号也能带来一些便利,因为其有助于源代码控制系统追溯(blame)提交历史,并且方便修改文件。通过对配置文件进行一点改动,可以让(在数组或对象占据了多行的情况下)总是使用末尾逗号变成一种好的做法: ``` "rules": { "comma-dangle": [2, "always-multiline"], "react/jsx-uses-react": 1 } ``` # 3、规则列表 要获取完整的规则列表,可以在本书附带的代码库(https://github.com/stoyan/reactbook/ )中找到。这份规则(本书项目遵循的规则)也是React 库的源代码本身遵循的规则列表。 最后把语法检查命令添加到build.sh 脚本中。这样做可以让ESLint 在构建时帮助你检查代码,以保证维持代码的高质量: ``` # QA eslint js/source ```