This document discusses various tools and techniques for maintaining code quality, including EditorConfig for consistent code styling across editors, JSHint/JSLint/ESLint for flagging suspicious JavaScript usage, JSCS for enforcing a JavaScript code style, jsbeautifier/JsFormat for formatting code, (S)CSScomb for formatting CSS/SCSS code, Scss Lint for checking SCSS code quality, and automating these processes with Grunt/Gulp tasks and Git hooks. It also mentions the Plato tool for visualizing and analyzing code complexity. The overall message is that these linters, formatters, and automation help enforce code quality and style guidelines on a team project.

1. Why and how to keep
your code quality
Krešimir Antolić
@kantolic
Infinum JavaScript guy

2. This is not

3. This will not solve
Spaghetti Code
Architectural
Mistakes
A Narrow Minded
outlook

4. These are just
Tools & Helpers

5. Why?

7. Usual Use Case
You:
● programming
Michelangelo
● Judge Dread of
code reviews
● way of life
Other:
● plebs
● plebs
● plebs
● newbs
● it’s just “work”

8. Rules
● your
● team
● project

9. Automatic Harassment
I see you're not writing
code in the specified
quality...

10. How?

11. “consistent coding styles between different
editors and IDEs”
EditorConfig

12. .editorconfig
[*.js]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

13. JSHint (JSLint, ESlint)
“flags suspicious usage in programs written in
JavaScript”

14. .jshintrc
{
"browser": true, "bitwise": true,
"boss": true, "camelcase": true,
"forin": true, "curly": true,
"eqeqeq": true, "immed": true,
"indent": 2, "latedef": true,
"newcap": true, "noarg": true,
"quotmark": "single", "regexp": true,
"undef": true, "unused": true,
"strict": true, "trailing": true,
"smarttabs": false, "jquery": true
}

15. Usage in..
jshint file-name.js
grunt jshint

16. Sublime text

17. JSCS
“JavaScript code style checker”
- that

18. .jscsrc
{
"requireSpaceAfterKeywords": ["if","
else","for","while","do","switch","return","
try","catch"],
"requireParenthesesAroundIIFE": true,
"requireSpacesInFunctionExpression":{
"beforeOpeningCurlyBrace": true
}}

19. Usage
jscs fileName.js
grunt/hulp jscs
Sublime Text

20. jsbeautifier / JsFormat
“bjutifajs stuff”

21. {
"indent_size": 2,
"indent_char": " ",
"indent_level": 0,
"indent_with_tabs": false,
"preserve_newlines": true,
"max_preserve_newlines": 10,
"jslint_happy": false,
"brace_style": "collapse",
"keep_array_indentation": false,
"keep_function_indentation": false,
"space_before_conditional": false,
"break_chained_methods": false,
"eval_code": false,
"unescape_strings": false,
"wrap_line_length": 0
}
.jsbeautifyrc

22. Usage
Grunt/Gulp
Sublime

23. (s)CSS comb
coding style formatter for
CSS

24. .csscomb.json
{
"always-semicolon": true,
"color-case": "upper",
"block-indent": " ",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": false,
"leading-zero": true,
“sort-order” : ….
}

25. Usage
grunt/gulp
Sublime Text

26. Before
After

27. Scss Lint
● is your SCSS
written as it should
be?

28. .scss-lint.yml
linters:
BangFormat:
enabled: true
space_before_bang: true
space_after_bang: false
BorderZero:
enabled: true

30. Usage
grunt/gulp
Sublime Text

31. Automate it!
grunt/gulp watch
IDE/Editor:
task on save
git commit hooks

32. Prevents bad commit
or push
husky

33. how to use?
npm install husky --save-dev
package.json
{
"scripts": {
"precommit": "grunt lint",
"prepush": "grunt test"
}
}

34. Plato
“JavaScript source code
visualization, static
analysis, and complexity
tool”

35. Usage
plato -r -l .jshintrc -x
app/scripts/vendor -d report
app/scripts

38. Brains