Skip to content

Lint per Slim e SCSS

Jump to bottom
Francesco Zaia edited this page Mar 8, 2021 · 1 revision

Lint Slim

Per eseguire il controllo linting dei file .slim, esegui questo comando:

$ slim-lint source/**/*.slim

slim-lint ha due livelli di regole:

  • quelle specifiche sulla struttura SLIM nel file slim-lint.yml,
  • quelle Rubocop che riguardano il codice Ruby contenuto nel file .rubocop.yml.

Per mantenere qualità nel codice e uniformità nel tempo, è stato adottato un controllo Lint specifico per Slim.

Slim Lint è compreso nel bundle con gem "slim_lint".

Sono state adottate delle convenzioni descritte nel file slim-lint.yml. Gli errori più comuni sono:

  • Le righe oltre le 72 colonne
  • Utilizzo di single e double quotes
  • Ottimizzazione di ruby in mezzo agli slim
  • Controllo dell'indentazione non strutturale
  • Whitespaces e trailing spaces
  • Spaziature in funzioni, parametri e interpolazioni

Riportiamo qui solo alcune soluzioni particolari utilizzate.

Righe entro i 72 caratteri

È comune che un tag possa avere numerose classi e attributi e quindi superare le 72 colonne standard. Questa eventualità è stata risolta in vari modi, a seconda dei casi

  .col-lg-2.pt-5.d-ml-flex.align-items-left.justify-content-lg-around
    p Testo

Può essere risolta grazie ad una variabile temporanea che

  ruby:
    classes = %(col-lg-2
                pt-5 d-ml-flex align-items-left
                justify-content-lg-around)
  
    div class=classes
      p Testo

In alternativa è possibile agire dirattamente sull'attributo class del tag:

  div class=["col-lg-2",
              "pt-5", "d-ml-flex", "align-items-left",
              "justify-content-lg-around"].join(" ")
    p Testo

Per gestire gli attributi, slim permette di raggrupparli tra parentesi quadre e andare su più righe. Il seguente è anche un esempio di formattazione non strutturale, ovvero che è assolutamente visuale e, a differenza dell'indentazione dei tag, non compromette l'interpretazione dello slim:

  button [aria-controls="accordion-test"
          aria-expanded="false"
          data-target="#accordion-test"
          data-toggle="collapse"
          role="tab"]
    span Apri accordion

Lint SCSS

Per eseguire il controllo del SCSS, esegui questo comando:

$ yarn lint:styles
Clone this wiki locally