TheLazy.Dev
Portfolio GitHub

Blog

reactnative |codequality |configs

Novo projeto React Native usando ESLint e Prettier

jonilsonds9

Jonilson Sousa

Posted on May 5, 2021

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
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
💖 💪 🙅 🚩
jonilsonds9
Jonilson Sousa

Posted on May 5, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Novo projeto React Native usando ESLint e Prettier
reactnative Novo projeto React Native usando ESLint e Prettier

May 5, 2021