DEV Community

Jonilson Sousa
Jonilson Sousa

Posted on

Novo projeto React Native usando ESLint e Prettier

#reactnative #codequality #configs

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
Enter fullscreen mode Exit fullscreen mode
  • Agora entre dentro da pasta do projeto: 
cd NomeDoProjeto
Enter fullscreen mode Exit fullscreen mode

  • 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
Enter fullscreen mode Exit fullscreen mode
  • 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)
Enter fullscreen mode Exit fullscreen mode
  • 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',
  },
};
Enter fullscreen mode Exit fullscreen mode
  • Agora podemos instalar o prettier com o comando: 
npm install --save-dev --save-exact prettier
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

Lembrando que devemos a seguinte linha no arquivo de configuração do ESLint .eslintrc.js:

extends: ['airbnb', 'plugin:react/recommended', 'prettier'],
Enter fullscreen mode Exit fullscreen mode

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',
};
Enter fullscreen mode Exit fullscreen mode

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,
        },
    ]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • Veja o nome do dispositivo no comando acima, e depois execute o seguinte comando: 
adb -s <nome do device> reverse tcp:8081 tcp:8081
Enter fullscreen mode Exit fullscreen mode
  • Abra dois terminais, no primeiro execute o comando: 
npm start
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
camelcaseguy profile image
Shubhendra Singh Chauhan • • Edited

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.

Collapse
 
jonilsonds9 profile image
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!

Read next

agustin_bereciartua profile image

Unlocking the Power of Spanish Benchmarks: Why "Hola" Matters More Than You Think

Agustin Bereciartua -

harshil_patel profile image

From Bug Fixes to Best Practices: My Open Source Contributions to ChatCraft and xUnit

Harshil Patel -

0x3d_site profile image

The Only Open-Source FAQ Guide You'll Ever Need—Straight From the 0x3d Collection

0x3d Site -

vasanthi_govindaraj_5bfd4 profile image

How Transformers Revolutionized AI with Attention Mechanisms

Vasanthi Govindaraj -