Novo projeto React Native usando ESLint e Prettier

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

Comments

[Shubhendra Singh Chauhan]

Hey @jonilsonds9 A nice walkthrough of setting up ESLint and Prettier locally. 👏
I think you should try out DeepSource, which lets you put code formatting on autopilot and takes away the burden of setting things up locally. ✨
Why it's useful?
Suppose you own/maintain a project on GitHub or any other VCS provider so there may be the chances the contributors of your project push the changes without setting up these tools locally then In this case, you might not want to drop a comment on every PR and ask them to set up these tools locally or ask them to follow the CONTRIBUTING.md.
That's where DeepSource comes in action - you can set it up on your repository and it will continuously check for the code style and code quality voilations whenever a change is made.

P.s- Reading CONTRIBUTING.md is a good practice.

[Jonilson Sousa]

Our @withshubh , I didn't know that, very cool! I wrote this article because I was forced to do a project, but I don't use it very much, but it's a really cool tip, I'll follow!