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)