Configuração do Stylelint no React: Passo a Passo Completo

Estabelecendo uma base sólida com Stylelint

O Stylelint é uma ferramenta poderosa de linting para CSS que ajuda a manter a qualidade e a consistência dos estilos dos seus projetos. Neste tutorial, vamos explorar como configurá-lo especificamente para um projeto React. Vamos abordar desde a instalação até a configuração de regras personalizadas para atender às suas necessidades.

Instalando o Stylelint

Para começar, você precisa instalar o Stylelint e o plugin necessário para trabalhar com CSS-in-JS, que é comumente utilizado em projetos React. Execute o seguinte comando no terminal:

npm install --save-dev stylelint stylelint-config-standard stylelint-prettier stylelint-order

O comando acima instala o Stylelint e algumas configurações padrão que ajudam a manter seu CSS consistente. O stylelint-prettier é um plugin que garante que o estilo do seu código siga as regras do Prettier, enquanto o stylelint-order ajuda a organizar suas propriedades CSS.

Configurando o Stylelint

Após a instalação, você deve criar um arquivo de configuração chamado .stylelintrc.json. Este arquivo conterá as regras que você deseja aplicar ao seu projeto. O seguinte exemplo mostra uma configuração básica:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-prettier"
  ],
  "plugins": ["stylelint-order"],
  "rules": {
    "order/order": [
      "declarations",
      "rules"
    ],
    "order/properties-order": [
      "font",
      "color",
      "margin",
      "padding"
    ]
  }
}

Aqui, estamos estendendo as configurações padrão do Stylelint e adicionando um conjunto de regras de ordem. Isso garante que as propriedades CSS sejam organizadas de uma maneira que facilite a leitura e a manutenção do código.

Integrando o Stylelint ao seu fluxo de trabalho

Para que o Stylelint funcione efetivamente, você deve integrá-lo ao seu fluxo de trabalho de desenvolvimento. Uma maneira comum de fazer isso é adicionando um script no seu package.json:

"scripts": {
  "lint:css": "stylelint '**/*.css'"
}

Com este script, você pode executar o Stylelint em todos os arquivos CSS do seu projeto utilizando o comando npm run lint:css. Isso ajuda a manter seu código limpo e livre de erros.

Usando o Stylelint com CSS-in-JS

Se você estiver utilizando bibliotecas como Styled Components ou Emotion, pode ser necessário adaptar suas regras. Uma configuração comum para Styled Components é a seguinte:

{
  "extends": "stylelint-config-standard",
  "rules": {
    "declaration-colon-space-after": ["always", {"ignore: ["inside-function"]}],
    "color-no-invalid-hex": true
  }
}

Essa configuração assegura que você tenha um espaço após os dois pontos nas declarações CSS e previne o uso de valores hexadecimais inválidos.

Exemplos práticos

Vamos imaginar que você tenha um componente React que utiliza estilos em CSS. Veja um exemplo simples:

import styled from 'styled-components';

const Botao = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return <Botao>Clique Aqui</Botao>;
}

Neste exemplo, o componente Botao usa Styled Components para aplicar estilos. O Stylelint ajudará a garantir que as propriedades sejam escritas de forma consistente e sigam as regras definidas no seu .stylelintrc.json.

Conclusão

A configuração do Stylelint é um passo crucial para garantir a qualidade do CSS em seus projetos React. Ao seguir os passos acima, você poderá manter um código limpo e organizado, evitando erros comuns e melhorando a experiência de desenvolvimento.

Lembre-se de sempre revisar suas regras e adaptá-las conforme necessário para atender às suas necessidades específicas. Com o Stylelint, você tem uma ferramenta poderosa para ajudar a elevar a qualidade do seu código CSS!

A importância do Stylelint na validação de estilos em React

O uso do Stylelint no desenvolvimento de aplicações React é fundamental para manter a qualidade e a consistência do CSS. Esta ferramenta não apenas identifica problemas comuns, mas também ajuda a seguir as melhores práticas de codificação. Integrando o Stylelint ao seu fluxo de trabalho, você garante que todos os membros da equipe estejam na mesma página, evitando erros e melhorando a legibilidade do código. Portanto, investir tempo na configuração e uso do Stylelint é um passo importante para qualquer desenvolvedor que deseje criar aplicações React de qualidade.

Algumas aplicações:

• Validação de estilos CSS em projetos React
• Integração com ferramentas de build como Webpack
• Facilidade na manutenção de grandes bases de código

Dicas para quem está começando

• Comece com uma configuração padrão e adicione regras conforme necessário.
• Use plugins para aumentar a funcionalidade do Stylelint.
• Execute o linting regularmente para evitar acumulação de problemas.

Compartilhe este tutorial