FYI: Sass linting

[Andy Armstrong]

TLDR; Sass linting is now available in edx-platform and can be used by any IDAs.

With all the upcoming work on our Sass and with the switch to Bootstrap, the FedX team decided to implement a Sass linter for use within our applications. We chose stylelint which, much like eslint, supports the ability to have an npm package containing shared linting rules. We mostly adopted the recommended set of rules, which are documented here:

• CSS rules
  
• SCSS-specific rules

The Jenkins quality build for the edx-platform repo now runs the linter automatically, so your PR will fail if your Sass changes don't follow the rules. In addition, there is a new npm package that can be installed into any IDA to provide the same validation:

https://github.com/edx/eslint-config-edx

Most code editors should pick up our eslint and stylelint configs so that you can see violations as you work. For more details, see here:

https://openedx.atlassian.net/wiki/spaces/OpenDev/pages/92209202/Editors+IDEs

Please let me know if you have any questions.

Thanks,

 - Andy

P.S. We haven't yet fixed all of the Sass violations in edx-platform (there are over 15,000 of them!), so as with most of our linters there is an expected number of violations defined that can't be exceeded.

--

Andy Armstrong

edX | UI Architect  | an...@edx.org  

141 Portland Street, 9th floor

Cambridge, MA 02139

http://www.edx.org

[Andy Armstrong]

Correction: here are the links for stylelint-config-edx:

 - GitHub: https://github.com/edx/stylelint-config-edx

 - npm: https://www.npmjs.com/package/@edx/stylelint-config-edx