If it’s a BE PR, then run this:
sbt fmt
If it fails, then so will CirlceCI. If it doesn’t seem to be formatting correctly you can go in to the offending file and use Command-Shift-L (or Ctrl-Shift-L if not on Mac) or do sbt clean and then start over from the top.
If it’s a FE PR, then run this:
grunt lint
Fix any errors (if you don’t, CircleCI will squawk).This will run a javascript linter, and also a SCSS linter.
SCSS Guidelines:
- Make sure there is a namespace for each new scss file:
ex:
.feature {
.feature-component {
}
}
- Make sure the class is saying what the element does vs. using another class because you already have it (Make it semantic).
- CSS properties should be added in alphabetical order.
- Avoid vendor prefixes, use bourbon mix-ins when needed instead. @includes go above the alphabetical ordering.
- Colors should be written as lowercase HEX values. Ex: #fff vs. white or #FFFFFF
- Avoid nesting selectors too deeply.
-
Use `//` comments everywhere
-
Leading Zeros: `0.8` should be written without a leading zero as `.8`
- Avoid qualifying elements in selectors (also known as "tag-qualifying").
- Prefer the shortest shorthand form possible for properties that support it.
- Ex: margin: 1px; vs margin: 1px 1px 1px 1px;
You can read the entire lint list here:
https://github.com/brigade/scss-lint/tree/master/lib/scss_lint/linter
