- Hands-On Design Patterns with React Native
- Mateusz Grzesiukiewicz
- 418字
- 2021-08-13 15:13:02
Adding a linter to create a React Native app
Follow these steps to configure your own linter:
- Open a terminal and navigate to the project directory. The cd command for changing the directory will come in handy.
- List (ls) the files in the directory and make sure that you are in the root and that you can see the package.json file.
- Add the following packages by using the yarn add command. The newly added packages will be automatically added to package.json. --dev installs it under the development dependencies within package.json:
yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint
ESLint is the linter that we will be using, and by running the preceding command, you will have installed it in the node_modules directory of your project.
- Now, we are ready to define a new script for your project. Please edit package.json and add the following line under the scripts section:
"scripts": {
...
"lint": "./node_modules/eslint/bin/eslint.js src"
...
}
The preceding command runs ESLint and passes one argument to it. This argument is the name of the directory that will contain files to lint. If you aren't going to follow along with this book, we are using the src directory to store source JavaScript files.
- The next step is specifying a code style—more precisely, a linter configuration that implements your code style. In this example, we will use a well-known Airbnb style guide. However, we will also tweak it to adhere to my preferred style.
Firstly, create your linter configuration by running the following command:
./node_modules/eslint/bin/eslint.js --init
- A special prompt will follow. Choose the following options:
How would you like to configure ESLint? Use a popular style guide
Which style guide do you want to follow? Airbnb
Do you use React? Yes
What format do you want your config file to be in? JSON
- A configuration file will be created for you called .eslintrc.json. Open the file and add the following rules. In the next section, I will explain these choices. For now, proceed with the given set of rules:
{
"rules": {
"react/jsx-filename-extension": [1, { "extensions": [".js"] }],
"comma-dangle": ["error", "never"],
"no-use-before-define": ["error", { "variables": false }],
"indent": ["error", 4],
"react/jsx-indent": ["error", 4],
"react/jsx-indent-props": ["error", 4]
},
"parser": "babel-eslint", // usage with babel transpiler
"extends": "airbnb"
}
- Now, you can run the linter by using the following command:
yarn run lint
The complete setup is provided in Example 14 under the Chapter 2_View patterns folder.
推薦閱讀
- Deploying Node.js
- Vue.js快速入門(mén)與深入實(shí)戰(zhàn)
- Java FX應(yīng)用開(kāi)發(fā)教程
- Scratch 3.0少兒編程與邏輯思維訓(xùn)練
- 前端架構(gòu):從入門(mén)到微前端
- Spring實(shí)戰(zhàn)(第5版)
- Learning OpenStack Networking(Neutron)(Second Edition)
- Java SE實(shí)踐教程
- Go語(yǔ)言編程
- Vue.js應(yīng)用測(cè)試
- Visual Basic程序設(shè)計(jì)(第三版)
- Practical Microservices
- Software-Defined Networking with OpenFlow(Second Edition)
- Neo4j 3.x入門(mén)經(jīng)典
- 透視C#核心技術(shù):系統(tǒng)架構(gòu)及移動(dòng)端開(kāi)發(fā)