Novo projeto React Native usando ESLint e Prettier
Tags: reactnative, codequality, configs
Published: 2021-05-05 15:01:45

Esse é basicamente um passo a passo de como podemos criar um projeto React Native e adicionar o ESLint e Prettier e ainda executar em um dispositivo físico!

### Extensões e criação do projeto

- Instale as extensões do ESLint e do Prettier no seu VS Code primeiro.

- Crie um novo projeto React Native com o comando:
```
npx react-native init NomeDoProjeto
```

- Agora entre dentro da pasta do projeto:
```
cd NomeDoProjeto
```

- Abra o VS Code e **apague** o arquivo `.eslintrc.js`, queremos criar outro usando o ESLint.

- Volte ao terminal e configure o ESLint para isso execute o comando:
```
npx eslint --init
```

- E escolha as opções:

```
How would you like to use ESLint?
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style (use está opção)

-----------------------------------------------

What type of modules does your project use?
❯ JavaScript modules (import/export) (use está opção)
  CommonJS (require/exports)
  None of these

-----------------------------------------------

Which framework does your project use? (Use arrow keys)
❯ React (use está opção)
  Vue.js
  None of these

-----------------------------------------------

Does your project use TypeScript? · No / Yes (responda não)

-----------------------------------------------

Where does your code run? · No items were selected (deixe em branco, apenas tecle ENTER)

-----------------------------------------------

How would you like to define a style for your project? (Use arrow keys)
❯ Use a popular style guide (use está opção)
  Answer questions about your style
  Inspect your JavaScript file(s)

-----------------------------------------------

Which style guide do you want to follow? (Use arrow keys)
❯ Airbnb (https://github.com/airbnb/javascript) (use está opção)
  Standard (https://github.com/standard/standard)
  Google (https://github.com/google/eslint-config-google)

-----------------------------------------------

What format do you want your config file to be in? (Use arrow keys)
❯ JavaScript (use está opção)
  YAML
  JSON

-----------------------------------------------

Would you like to install them now with npm? (Y/n) : Y (responda Y e espere ele instalar as dependências)
```

- Após esse processo ele deve ter criado um novo arquivo `.eslintrc.js`, devemos deixá-lo com o seguinte conteúdo:
```
module.exports = {
  env: {
    es2021: true,
  },
  extends: ['airbnb', 'plugin:react/recommended', 'prettier'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'react/jsx-filename-extension': [
      'warn',
      {
        extensions: ['.jsx', '.js'],
      },
    ],
    'import/prefer-default-export': 'off',
    'react/state-in-constructor': 'off',
    'react/static-property-placement': 'off',
    'react/jsx-props-no-spreading': 'off',
    'react/prop-types': 'off',
    'no-param-reassign': 'off',
    'no-console': 'off',
  },
};
```

- Agora podemos instalar o `prettier` com o comando:
```
npm install --save-dev --save-exact prettier
```

- Também devemos instalar o plugin `eslint-config-prettier` para que o ESLint e Prettier possam funcionar sem conflitos:
```
npm install --save-dev --save-exact eslint-config-prettier
```

Lembrando que devemos a seguinte linha no arquivo de configuração do ESLint `.eslintrc.js`:
```
extends: ['airbnb', 'plugin:react/recommended', 'prettier'],
```

Isso garante que não vamos ter conflitos entre ambos e podemos ter as sugestṍes de códigos do prettier, então teremos o ESLint indicando os erros e o prettier executando a correção se clicarmos com o botão direito do mouse.
Podemos deixar o arquivo de configuração do prettier (`.prettierrc.js`) padrão:

```
module.exports = {
  bracketSpacing: false,
  jsxBracketSameLine: true,
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
};
```

### Alterar as configurações do VS code

- Acesse o arquivo de preferências do VS Code como `json`, você pode usar a palheta com o atalho Ctrl + Shift + P e digitar o nome "preferências", deve aparecer uma opção pra abrir como JSON `Open Settings (JSON)`.

- Nesse arquivos devemos adicionar as seguintes configurações:
```
// parte do Prettier:
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true,

    // parte do ESLint:
    "editor.renderLineHighlight": "gutter",
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
    },
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "javascript.updateImportsOnFileMove.enabled": "never",
    "breadcrumbs.enabled": true,
    "editor.parameterHints.enabled": true,

    "eslint.autoFixOnSave": true,
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true },
    "eslint.validate": [
        {
            "language": "javascript",
            "autoFix": true,
        },
        {
            "language": "javascriptreact",
            "autoFix": true,
        },
        {
            "language": "typescript",
            "autoFix": true,
        },
        {
            "language": "typescriptreact",
            "autoFix": true,
        },
    ]
```

### Executar o projeto no dispositivo

- Agora para executar o projeto, adicione o celular pelo cabo USB;

- Para ver se o celular está conectado corretamente, use o comando:
```
adb devices
```

- Veja o nome do dispositivo no comando acima, e depois execute o seguinte comando:
```
adb -s <nome do device> reverse tcp:8081 tcp:8081
```

- Abra dois terminais, no primeiro execute o comando:
```
npm start
```
Esse comando vai iniciar o bundle, para que ele faça o reload da aplicação no dispositivo.

- No outro terminal instale a aplicação do App no dispositivo usando o comando:
```
npx react-native run-android
```