- Hands-On Design Patterns with React Native
- Mateusz Grzesiukiewicz
- 489字
- 2021-08-13 15:13:03
Fixing errors
As we have a linter set up, we can try it on one of the previous projects.
I tried it on LoginForm.js from Example 9_ Controlled TextInput. Unfortunately, it listed a few errors:
$ yarn run lint
yarn run v1.5.1
$ ./node_modules/eslint/bin/eslint.js src
/Users/mateuszgrzesiukiewicz/Work/reactnativebook/src/Chapter 2: View patterns/Example 14: Linter/src/LoginForm.js
2:8 error A space is required after '{' object-curly-spacing
2:44 error A space is required before '}' object-curly-spacing
7:27 error 'initLogin' is missing in props validation react/prop-types
12:9 warning Unexpected console statement no-console
13:9 warning Unexpected console statement no-console
22:37 error Curly braces are unnecessary here react/jsx-curly-brace-presence
23:62 error A space is required after '{' object-curly-spacing
23:68 error A space is required before '}' object-curly-spacing
29:37 error Curly braces are unnecessary here react/jsx-curly-brace-presence
31:55 error A space is required after '{' object-curly-spacing
31:64 error A space is required before '}' object-curly-spacing
33:25 error Value must be omitted for boolean attributes react/jsx-boolean-value
49:20 error Unexpected trailing comma comma-dangle 13 problems (11 errors, 2 warnings)
10 errors, 0 warnings potentially fixable with the `--fix` option.
13 problems! Luckily, ESLint may attempt to fix them automatically. Let's try. Execute the following:
$ yarn run lint -- --fix
Lovely —we reduced the issues to just three:
7:27 error 'initLogin' is missing in props validation react/prop-types
12:9 warning Unexpected console statement no-console
13:9 warning Unexpected console statement no-console
We can skip the last two. Those warnings are relevant, but the console is handy for this book: it provides an easy way to print information. Do not use console.log in production. However, 'initLogin' is missing in props validation react/prop-types is a valid error, and we need to fix it:
LoginForm.propTypes = {
initLogin: PropTypes.string
};
LoginForm now has its props validated. This will fix the linter error. To check this, rerun the linter. It looks like we have run into yet another issue! Correct:
error: propType "initLogin" is not required, but has no corresponding defaultProp declaration react/require-default-props
This is true—we should have defined default props in case initLogin is not provided:
LoginForm.defaultProps = {
initLogin: ''
};
From now on, if we do not explicitly provide initLogin, it will be assigned a default value, that is, an empty string. Rerun the linter. It will now show a new error:
error 'prop-types' should be listed in the project's dependencies. Run 'npm i -S prop-types' to add it import/no-extraneous-dependencies
At least it's an easy one. It correctly advises you to maintain prop-types dependencies explicitly.
Add the prop-types dependency by running the following command in your console:
yarn add prop-types
Rerun the linter. Great! Finally, there are no errors. Good job.
- 密碼學原理與Java實現
- ThinkPHP 5實戰
- Getting Started with ResearchKit
- Angular開發入門與實戰
- SQL Server數據庫管理與開發兵書
- 智能搜索和推薦系統:原理、算法與應用
- Learning Material Design
- Building Serverless Web Applications
- C++程序設計
- Go語言從入門到精通
- Instant Automapper
- UML基礎與Rose建模實用教程(第三版)
- 嵌入式C編程實戰
- Getting Started with JUCE
- Microsoft Windows Identity Foundation Cookbook