Stylelint - O que é isso?
Tags: linter, programming, beginners, stylelint
Published: 2021-12-22 04:36:54

![stylelint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vcfmhq8zzc7s88s2154.png)
 

Stylelint é o linter do CSS, ele funciona analisando seu CSS e avisando se alguma regra configurada for violada. Essas regras podem detectar erros CSS e impor convenções de estilo, é bem semelhante à verificação ortográfica e gramatical do Google Docs ou do Microsoft Word - tornando assim essencialmente, um revisor automático para seu CSS!

O Stylelint executa um arquivo de configuração chamado `.stylelintrc.json`. Este arquivo de configuração é dividido em regras , plug-ins e extensões .

### Começando com as Regras

As regras definem o que o Stylelint procurará em seu código. Eles são definidos na `rules` seção da configuração como pares de valores-chave. A chave é a regra e o valor alterna a regra e define as opções. Habilitar uma regra depende da própria regra - algumas regras podem ser tão simples quanto definir o valor para `true` outros têm a capacidade de sintonizar diretamente por meio de uma palavra-chave, como exemplificado abaixo:

```
module.exports = {
  rules: {
    'declaration-no-important': true,
    'color-hex-case': 'upper',
  },
};

```

Algumas regras também permitem personalizá-lo ainda mais com opções de configuração adicionais. Nesse caso, a opção principal e as configurações adicionais são uma matriz.

```
module.exports = {
  rules: {
    'font-weight-notation': ['numeric', { ignore: ['relative'] }],
  },
};
```

Desativar é muito mais simples - basta definir o valor como `null`

```
module.exports = { 
  rules: { 
    'comment-no-empty': null, 
  }, 
};
```

### Que tal uns plugins?

O Stylelint nativamente fornece quase 200 regras, mas essas regras não cobrem tudo. É aqui que entram os plugins - eles permitem que os desenvolvedores criem regras que você pode habilitar em sua configuração. Estes são alguns exemplos de plugins Stylelint:

- [Stylelint a11y](https://www.npmjs.com/package/stylelint-a11y) - Usado para regras de acessibilidade 
- [Stylelint SCSS](https://www.npmjs.com/package/stylelint-scss) - Como próprio nome já entrega sua funcionalidade... utilizado para regras de utilização do SCSS
- [Stylelint CSS](https://www.npmjs.com/package/stylelint-order) - Utilizando para ordenação do CSS

Para integrar, defina esses plug-ins na `plugins` seção de configuração. Então você pode usar as regras do plugin na `rules` seção.

```
module.exports = { 
  plugins: [ 
    'stylelint-a11y', 
  ], 
  regras: { 
    "a11y / no-outline-none": true, 
  }, 
};
```

### Extensões

Com tantas regras nativas e plug-ins contribuindo com ainda mais regras, as extensões Stylelint tornam-nas mais consumíveis, então você não está puxando o cabelo tentando entendê-las todas. Por meio de extensões, você herda os plug-ins e as regras para que não precise fazer isso sozinho. Aqui estão alguns exemplos de extensões Stylelint:

- [Stylelint Config Standard](https://www.npmjs.com/package/stylelint-config-standard) - Configuração de Stylelint recomendada pelos criadores do Stylelint
- [Stylelint Config Recommended SCSS](https://www.npmjs.com/package/stylelint-config-recommended-scss) - Configuração de Stylelint recomendada para SCSS
- [Stylelint a11y](https://www.npmjs.com/package/stylelint-a11y) - Configuração de Stylelint recomendada para acessibilidade

As extensões são definidas na `extensions` seção da configuração.

```
module.exports  = { 
  extends: [ 
    'stylelint-config-standard', 
    'stylelint-config-recommended-scss', 
    'stylelint-a11y / recomendado', 
  ], 
};
```

### Substituindo e Desativando

Mas o uso de extensões produz um efeito colateral, e você acaba concordando com eles se não observar... mas e se houver algumas regras que você preferisse ajustar ou desativar completamente? É aqui que entra a substituição e a desativação. Suas próprias regras definidas terão precedência e substituirão as regras da extensão.

```
module.exports = {
  extends: [
    'stylelint-config-standard',
  ],
  rules: {
    'color-hex-case': 'upper',
    'length-zero-no-unit': null,
  },
};
```

Mesmo se você tentar o seu melhor para cumprir uma regra, pode haver casos em que a regra não funcionará. Para impedir que o Stylelint falhe, você pode desabilitar temporariamente o Stylelint para linhas específicas com comentários dá seguinte forma:

- `/* stylelint-disable */` - Desativa Stylelint para todas as linhas abaixo até ser reativado com `/* stylelint-enable */`

- `/* stylelint-disable-line */` - Desativa Stylelint apenas para a linha atual.

- `/* stylelint-disable-next-line */` - Desativa Stylelint apenas para a próxima linha.

Você também pode especificar regras específicas (separadas por vírgula) após o comentário de desabilitação para desabilitar algumas regras, em vez de desabilitar todas.

```
div {
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  font-size: 12px !important; /* stylelint-disable-line declaration-no-important */

  /* stylelint-disable */
  :focus {
    outline: none;
  }
  /* stylelint-enable */
}
```

Eles devem ser usados ​​com moderação, então, se você desabilita constantemente essas regras, considere desligá-las permanentemente.

### CSS em JS

Se você estiver usando CSS popular em estruturas JS, como Emotion ou Styled Components , ainda será capaz de lintar seu CSS após um pouco de configuração extra. O `stylelint-processor-styled-components` processador extrairá os estilos de [Emotion](https://emotion.sh/docs/introduction) ou [Styled Components](https://styled-components.com/) para que o Stylelint possa soltá-los. Além disso, certas regras são incompatíveis com essas estruturas, portanto, devem ser desativadas usando `stylelint-config-styled-components`.

```
module.exports = {
  extends: ['stylelint-config-styled-components'],
  processors: ['stylelint-processor-styled-components'],
};
```

### Múltiplas configurações

Se você estiver usando várias estruturas CSS, pode ser necessário ter várias configurações, cada uma direcionada a uma estrutura específica. Por exemplo, se você estiver usando vanilla CSS (uai não sabia que existia?) e componentes estilizados, precisará de uma configuração para cada um, devido às diferenças entre as duas configurações.

```
module.exports = {
  extends: [
    'stylelint-config-standard',
    'stylelint-a11y/recommended'
  ],
};
// stylelint.styled.config.js
module.exports = {
  extends: [
    './stylelint.config.js',
    'stylelint-config-styled-components'
  ],
  processors: ['stylelint-processor-styled-components'],
};
```

Dica rápida: você pode estender suas configurações umas às outras para que não precise definir as mesmas regras, extensões de plug-ins novamente!

### Executando

Para executar o Stylelint (com várias configurações), adicione os seguintes aliases a `package.json`.

```
{
  "scripts": {
    "lint:js": "stylelint '{**/*,*}.js' --config stylelint.styled.config.js",
    "lint:css": "stylelint '{**/*,*}.css'",
    "lint:css:fix": "stylelint '{**/*,*}.css' --fix"
  },
}
```
`npm run lint:js`(ou `yarn run lint:js`) executará Stylelint em componentes estilizados (arquivos com `.js`extensão) e `npm run lint:css` (ou `yarn run lint:css`) executará Stylelint em vanilla CSS (arquivos com `.css` extensão). Além disso, o Stylelint suporta correção automática para que você possa executar `npm run lint:css:fix` (ou `yarn run lint:css:fix`) e qualquer violação do Stylelint que possa ser corrigida automaticamente. Infelizmente, a correção automática não é suportada quando você usa processadores exigidos pelos componentes estilizados.

Stylelint é o complemento perfeito para ESLint para impor e manter uma base de código de alta qualidade. Embora o Stylelint seja um pouco complicado de configurar inicialmente, quando estiver pronto, você pode confiar na qualidade e consistência do CSS. É apenas uma coisa a menos com que você precisa se preocupar para poder se concentrar na construção de um ótimo produto.

Fontes onde pesquisei esse conteúdo:

- https://stylelint.io/
- https://stylelint.io/user-guide/get-started
- https://stylelint.io/user-guide/configure