Linting rules and examples of bad/good code with lint rules #2
Conversation
|
|
||
| ## Linting rules | ||
|
|
||
| We use the following rules when linting files: |
There was a problem hiding this comment.
Is there a link to the config where these are defined?
There was a problem hiding this comment.
not yet, will add one. it's very close to govuk_lint
config/.sass-lint.yml
Outdated
| - allow-single-line: true | ||
| class-name-format: | ||
| - 1 | ||
| - convention: hyphenatedlowercase |
There was a problem hiding this comment.
Should this be hyphenatedbem?
config/.sass-lint.yml
Outdated
| no-debug: 1 | ||
| no-duplicate-properties: 1 | ||
| no-empty-rulesets: 1 | ||
| no-extends: 0 |
There was a problem hiding this comment.
It would be good to prevent use of extend, can we set this to 1 instead so it'll warn?
config/.sass-lint.yml
Outdated
| no-important: 0 | ||
| no-invalid-hex: 1 | ||
| no-mergeable-selectors: 0 | ||
| no-misspelled-properties: 0 |
There was a problem hiding this comment.
no-misspelled-properties will enforce the correct spelling of CSS properties, this is probably sensible to check for too.
config/.sass-lint.yml
Outdated
| - convention: hyphenatedlowercase | ||
| property-sort-order: 0 | ||
| property-units: 0 | ||
| quotes: 0 |
There was a problem hiding this comment.
It's probably worth picking one, for consistency. Double quotes?
quotes:
- 1
- style: double
|
will go through all and also add good/bad examples |
There was a problem hiding this comment.
This looks good, two tiny things - I think we should link to the config/.sass-lint.yml file from the docs.
How is style.scss being used? Can we remove it from this commit if it isn't being referenced.
If the list of rules we are supporting could be headings, rather than bullet points - I think it would be easier to see where each example ends.
|
ups regarding styl.scss :( |
|
rake aborted! |
|
Should this be using |
|
don't think we need ruby hence sass-lint (not scss-lint ruby package), as it's node based |
|
@igloosi First line reads "The following scss-lint", which led me to believe that's what's being used. |
|
oh, the comments in the sass-lint file |
Explain linting rules and provide bad/good code examples
docs/coding-standards/css.md
Outdated
| # Linting | ||
|
|
||
| To ensure code quality and consistency in our Sass files we check that certain style rules are followed using a project [YAML file](../config/.sass-lint.yml) | ||
| As we're using node-sass parser to parse our scss files, the packing of choice is [sass-lint](https://github.com/sasstools/sass-lint). |
Spelling out some linting rules and setup.