DEV Community: Marcos Dias

Using @/ path mapping on Create React App projects

Marcos Dias — Wed, 05 Jul 2023 21:55:13 +0000

I recently configured an old project created with Create React App (CRA) to use path mapping/aliasing like @atoms, @molecules or @organisms.

After using NextJS for a while, I got used to the idea of using @/ instead of just @ as a prefix for path mapping as it makes it a little bit clearer what is a path alias and what's not, like @apollo-client or @fortawesome.

The point in this post is how to enable your project to use @/ path mapping, but you can use the same settings to be able to use any other aliases, like @utils or just utils.

Configuring the path mapping

Considering you're using CRA, the first thing is to install @craco/craco in your project to enable overriding original CRA's configuration.

To install @craco/craco, just run:



yarn add -D @craco/craco



npm i -D @craco/craco

After installing @craco/craco, in your package.json, update your start, build and test scripts to use craco instead of react-scripts, like recommended in CRACO's docs.

And then create a craco.config.js file in your project's root adding your aliases to the alias property of the webpack property, where the key should be the alias's name and the value its path:



const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@atoms': path.resolve(__dirname, './src/atoms'),
      '@molecules': path.resolve(__dirname, './src/molecules'),
    },
  },
};

If you're using TypeScript, you should add those same path aliases to your tsconfig file. In your tsconfig file, look for compilerOptions and add a paths object like the following:



{
  "compilerOptions": {
    "paths": {
      "@atoms/*": [
        "./src/atoms/*"
      ],
      "@molecules/*": [
        "./src/molecules/*"
      ],
    }
  }
}

At this point, you should be able to import your components using the aliases you just defined:



import Button from '@atoms/Button'; 
import Table from '@molecules/Table'

Remember @atoms and @molecules are just examples. You can use any other aliases.

Allowing @/ path aliases

If you prefer to use @/ instead of @ as the alias prefix, you might face some trouble with ESLint as it might be complaining about missing file extensions on your imports:



Missing file extension for "@/pages/MainPage" eslint(import/extensions)

To allow ESLint to understand @/ aliases, you'll have to install the eslint-import-resolver-typescript plugin.

Run



yarn add -D eslint-import-resolver-typescript



npm i -D eslint-import-resolver-typescript

Then, go to your .eslintrc file and add the following configuration within the settings section:



  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }

Now ESLint should've stopped complaining about missing file extensions. If you're still getting a warning about extensions, check your import/extensions rule inside the rules section. You can read more about this rule here.

🎁 Bonus round: enabling Jest to use path aliases

Again, considering you're using TypeScript, to allow Jest to read your path aliases you'll have to install and configure ts-jest.

Run



yarn add -D ts-jest



npm i -D ts-jest

After installing ts-jest, update your craco.config.js file like the following, telling Jest to use the paths configured in your tsconfig file:



const path = require('path');
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('./tsconfig.json');

module.exports = {
  webpack: {
    alias: {
      '@atoms': path.resolve(__dirname, './src/atoms'),
      '@molecules': path.resolve(__dirname, './src/molecules'),
    },
  },
  jest: {
    configure: {
      preset: 'ts-jest',
      moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
        prefix: '<rootDir>/',
      }),
    },
  },
};

That's it! You now should be able to use path mapping in your project, including your unit tests and also using @/ path aliases.

Adding ESLint and Prettier to a ViteJS React project

Marcos Dias — Sat, 21 Jan 2023 18:28:17 +0000

Recently, I decided to try ViteJS as an alternative to Create React App. Although ViteJS already offers a basic template for React applications it doesn't come shipped with ESLint and Prettier. In this post, we will briefly go through the installation and configuration of those two packages in a React project created with ViteJS.

Step 1: install dependencies

Beside ESLint and Prettier, we will install the following dependencies:

@typescript-eslint/eslint-plugin: a collection of linting rules for TypeScript projects.
@typescript-eslint/parser: a code parser for TypeScript.
eslint-config-prettier: an ESLint configuration to disable conflicting rules between ESLint and Prettier.
eslint-plugin-import: a plugin to enable ESLint to handle ES6+ import/export syntax.
eslint-plugin-jsx-a11y: a plugin with some accessibility rules.
eslint-plugin-react: a plugin with rules for React projects.
eslint-plugin-react-hooks: a plugin with rules for React hooks. It will ensure that you never use a React hook outside of a function component.

To install all of these dependencies, just run the following line:



yarn add -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

If you're using npm as a package manager, replace yarn add -D by npm install --dev.

Step 2: configure ESLint

With the dependencies already installed, it's time to create the configuration files for ESLint. First, we will create the .eslintrc, which will manage our ESLint configuration.

All the following files should be created in the project's root folder.

.eslintrc



{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended",
    "eslint-config-prettier"
  ],
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "paths": [
          "src"
        ],
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    }
  },
  "rules": {
    "no-unused-vars": [
      "error",
      {
        "vars": "all",
        "args": "after-used",
        "ignoreRestSiblings": true,
        "argsIgnorePattern": "^_"
      }
    ],
    "react/react-in-jsx-scope": "off"
  }
}

With no-unused-vars we will ensure that any unused variable will trigger an error. The react/react-in-jsx-scope rule was disabled so ESLint won't enforce the import of React in files with JSX (import React from 'react'). Since React 17.0, importing React in JSX files is not required.

Now we will create the .eslintignore file, which will tell ESLint which files should not be linted:

.eslintignore



node_modules/
dist/
env.d.ts

It's recommended that you add a lint script to your scripts section in your package.json, so you can run ESLint by executing yarn lint or npm run lint:



"scripts": {
  ...
  "lint": "eslint . --ext .ts,.tsx"
}

Our lint script will be running eslint over all .ts and .tsx files starting from the project's root.

Step 3: configuring Prettier

Just like we did when configuring ESLint, we will now create the .prettierrc file, with our Prettier settings. To learn more about the available options, check Prettier docs.

.prettierrc



{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "bracketSpacing": true,
  "endOfLine": "lf"
}

And then, .prettierignore:

.prettierignore



node_modules/
dist/

Step 4: integrating with VSCode

Ultimately, we will configure VSCode to use ESLint and Prettier to find problems and format our code, respectively. If you don't have the extensions installed yet, install them: Prettier - Code formatter and ESLint.

With the extensions already installed, we will have to configure VSCode to use Prettier to format our file on save. The ESLint extension should work automatically if there's a valid configuration file in (.eslintrc) the current workspace.

If you don't have a .vscode/settings.json file yet, create it with the following settings:



{
  ...
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Well done! Now ESLint should highlight code problems while editing and Prettier should apply formatting on save when it's possible.

Final thoughts

This post was inspired by Setting up ESLint & Prettier in ViteJS
by Cathal Mac Donnacha.

A repository with this configuration, including Storybook, Jest and React Testing Library is available at my GitHub: https://github.com/marcosdiasdev/react-vitejs-template.

Let's talk!

Adicionando ESLint e Prettier a um projeto React criado com ViteJS

Marcos Dias — Mon, 09 Jan 2023 01:03:14 +0000

Recentemente, eu resolvi experimentar o ViteJS como alternativa ao Create React App. Embora o ViteJS já ofereça uma estrutura básica para um projeto React, o template recomendado na documentação não vem configurado com ESLint e Prettier.

Neste artigo, vamos passar brevemente pela instalação e configuração dessas duas ferramentas em um projeto React criado com ViteJS.

Passo 1: instalar as dependências

Além do ESLint e do Prettier, vamos instalar as seguintes dependências:

@typescript-eslint/eslint-plugin: plugin com regras para projetos com código TypeScript.
@typescript-eslint/parser: um parser que permitirá ao ESLint fazer sugestões em código TypeScript.
eslint-config-prettier: uma configuração para o ESLint que desabilita regras que serão gerenciadas pelo Prettier, evitando conflitos.
eslint-plugin-import: plugin que permitirá ao ESLint lidar com a sintaxe de import/export da ES6+.
eslint-plugin-jsx-a11y: plugin com regras de acessibilidade.
eslint-plugin-react: plugin com regras específicas para projetos React.
eslint-plugin-react-hooks: plugin com regras sobre o uso de React hooks. Ele garantirá, por exemplo, que você jamais utilize um hook fora de um function component.

Para instalar todas as dependências, execute a seguinte linha:



yarn add -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

Se você utilizar npm como gerenciador de pacotes, substitua yarn add -D por npm install --dev.

Passo 2: configurar o ESLint

Com as dependências corretamente instaladas, é hora de criar os arquivos de configuração do ESLint. Primeiro, criaremos o arquivo .eslintrc que manterá as configurações para o ESLint em nosso projeto.

Todos os arquivos de configuração do ESLint e do Prettier deverão ser criados na raíz do projeto.

.eslintrc



{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:import/recommended",
    "plugin:jsx-a11y/recommended",
    "plugin:@typescript-eslint/recommended",
    "eslint-config-prettier"
  ],
  "settings": {
    "react": {
      "version": "detect"
    },
    "import/resolver": {
      "node": {
        "paths": [
          "src"
        ],
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx"
        ]
      }
    }
  },
  "rules": {
    "no-unused-vars": [
      "error",
      {
        "vars": "all",
        "args": "after-used",
        "ignoreRestSiblings": true,
        "argsIgnorePattern": "^_"
      }
    ],
    "react/react-in-jsx-scope": "off"
  }
}

Com a regra no-unused-vars garantiremos que um erro será emitido caso nos esqueçamos de alguma variável não utilizada em nosso código. A regra react/react-in-jsx-scope foi desabilitada para que o ESLint não marque como obrigatória a importação do React (import React from 'react') em arquivos que utilizem JSX, já que isso não é mais necessário nas versões mais recentes do React.

Em seguida, criaremos um arquivo .eslintignore, que deverá indicar ao ESLint quais arquivos serão ignorados:

.eslintignore



node_modules/
dist/
env.d.ts

Se preferir, adicione também à seção scripts do seu package.json um script para executar o ESLint no seu projeto:



"scripts": {
  ...
  "lint": "eslint . --ext .ts,.tsx"
}

Passo 3: configurar o Prettier

Assim como fizemos com o ESLint, agora criaremos um arquivo .prettierrc com as configurações que utilizaremos no Prettier. Para aprender mais sobre as opções utilizadas e outras disponíveis, acesse a documentação do Prettier:

.prettierrc



{
  "trailingComma": "all",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "printWidth": 120,
  "bracketSpacing": true,
  "endOfLine": "lf"
}

Para determinar os arquivos ignorados pelo Prettier, crie um arquivo .prettierignore, como a seguir:

.prettierignore



node_modules/
dist/

Passo 4: integrando com o VSCode

Por fim, iremos configurar o VSCode para utilizar o ESLint e o Prettier para fazer sugestões e formatar o código, respectivamente. Caso você ainda não as possua, instale as extensões Prettier - Code formatter e ESLint.

Com as extensões instaladas, também será necessário configurar o VSCode para utilizar o Prettier para formatação do documento no momento em que ele for salvo. A extensão ESLint deverá entrar em ação automaticamente caso haja um arquivo de configuração válido, como o .eslintrc que criamos.

Caso seu projeto ainda não possua um arquivo .vscode/settings.json, será necessário criá-lo. Nesse arquivo, adicione as duas regras a seguir:



{
  ...
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Pronto! Com isso, o ESLint deverá destacar os trechos problemáticos do seu código e o Prettier deverá formatar e aplicar correções sempre que possível ao salvar o documento.

Considerações finais

Este artigo foi inspirado pelo artigo Setting up ESLint & Prettier in ViteJS
e traz alguns ajustes e adições.

Um repositório com o projeto completo, incluindo Storybook, está disponível em https://github.com/marcosdiasdev/react-vitejs-template.

Ficou com alguma dúvida? Vamos conversar.