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 - Usado para regras de acessibilidade
- Stylelint SCSS - Como próprio nome já entrega sua funcionalidade... utilizado para regras de utilização do SCSS
- Stylelint CSS - 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 - Configuração de Stylelint recomendada pelos criadores do Stylelint
- Stylelint Config Recommended SCSS - Configuração de Stylelint recomendada para SCSS
- 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 ou Styled Components 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 .jsextensã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:
Top comments (0)