Why and how to keep your code quality

Krešimir Antolić@kantolic

Infinum JavaScript guy

This is not

This will not solveSpaghetti Code

Architectural Mistakes

A Narrow Minded outlook

These are just

Tools & Helpers

Why?

Usual Use CaseYou:● programming

Michelangelo● Judge Dread of

code reviews● way of life

Other:● plebs● plebs● plebs● newbs● it’s just “work”

Rules

● your

● team

● project

Automatic Harassment

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

How?

“consistent coding styles between different editors and IDEs”

EditorConfig

.editorconfig

[*.js]

indent_style = space

indent_size = 2

end_of_line = lf

charset = utf-8

trim_trailing_whitespace = true

insert_final_newline = true

JSHint (JSLint, ESlint)

“flags suspicious usage in programs written in JavaScript”

.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

}

Usage in..

jshint file-name.js

grunt jshint

Sublime text

JSCS

“JavaScript code style checker” - that

.jscsrc{

"requireSpaceAfterKeywords": ["if","else","for","while","do","switch","return","try","catch"],

"requireParenthesesAroundIIFE": true,

"requireSpacesInFunctionExpression":{

"beforeOpeningCurlyBrace": true

}}

Usage

jscs fileName.js

grunt/hulp jscs

Sublime Text

jsbeautifier / JsFormat

“bjutifajs stuff”

{

"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

Usage

Grunt/Gulp

Sublime

(s)CSS comb coding style formatter for CSS

.csscomb.json{

"always-semicolon": true,

"color-case": "upper",

"block-indent": " ",

"color-shorthand": false,

"element-case": "lower",

"eof-newline": false,

"leading-zero": true,

“sort-order” : ….

}

Usage

grunt/gulp

Sublime Text

Before

After

Scss Lint

● is your SCSS written as it should be?

.scss-lint.ymllinters: BangFormat: enabled: true space_before_bang: true space_after_bang: false

BorderZero: enabled: trueEtC

Usage

grunt/gulp

Sublime Text

Automate it!

grunt/gulp watch

IDE/Editor:task on save

git commit hooks

Prevents bad commit or push

husky

how to use?npm install husky --save-dev

package.json

{

"scripts": {

"precommit": "grunt lint",

"prepush": "grunt test"

}

}

Plato

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

Usage

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

Brains