Adding a linter to create a React Native app

Follow these steps to configure your own linter:

1.  Open a terminal and navigate to the project directory. The cd command for changing the directory will come in handy.
2. 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.
3. 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.

4. 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.

5. 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

6. 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

7. 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"
}

8. 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.