Why and how to keep your code quality
-
Upload
kresimir-antolic -
Category
Technology
-
view
149 -
download
4
Transcript of Why and how to keep your code quality
![Page 1: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/1.jpg)
Why and how to keep your code quality
Krešimir Antolić@kantolic
Infinum JavaScript guy
![Page 2: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/2.jpg)
This is not
![Page 3: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/3.jpg)
This will not solveSpaghetti Code
Architectural Mistakes
A Narrow Minded outlook
![Page 4: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/4.jpg)
These are just
Tools & Helpers
![Page 5: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/5.jpg)
Why?
![Page 6: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/6.jpg)
![Page 7: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/7.jpg)
Usual Use CaseYou:● programming
Michelangelo● Judge Dread of
code reviews● way of life
Other:● plebs● plebs● plebs● newbs● it’s just “work”
![Page 8: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/8.jpg)
Rules
● your
● team
● project
![Page 9: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/9.jpg)
Automatic Harassment
I see you're not writing code in the specified quality...
![Page 10: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/10.jpg)
How?
![Page 11: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/11.jpg)
“consistent coding styles between different editors and IDEs”
EditorConfig
![Page 12: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/12.jpg)
.editorconfig
[*.js]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
![Page 13: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/13.jpg)
JSHint (JSLint, ESlint)
“flags suspicious usage in programs written in JavaScript”
![Page 14: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/14.jpg)
.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
}
![Page 15: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/15.jpg)
Usage in..
jshint file-name.js
grunt jshint
![Page 16: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/16.jpg)
Sublime text
![Page 17: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/17.jpg)
JSCS
“JavaScript code style checker” - that
![Page 18: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/18.jpg)
.jscsrc{
"requireSpaceAfterKeywords": ["if","else","for","while","do","switch","return","try","catch"],
"requireParenthesesAroundIIFE": true,
"requireSpacesInFunctionExpression":{
"beforeOpeningCurlyBrace": true
}}
![Page 19: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/19.jpg)
Usage
jscs fileName.js
grunt/hulp jscs
Sublime Text
![Page 20: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/20.jpg)
jsbeautifier / JsFormat
“bjutifajs stuff”
![Page 21: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/21.jpg)
{
"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
![Page 22: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/22.jpg)
Usage
Grunt/Gulp
Sublime
![Page 23: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/23.jpg)
(s)CSS comb coding style formatter for CSS
![Page 24: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/24.jpg)
.csscomb.json{
"always-semicolon": true,
"color-case": "upper",
"block-indent": " ",
"color-shorthand": false,
"element-case": "lower",
"eof-newline": false,
"leading-zero": true,
“sort-order” : ….
}
![Page 25: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/25.jpg)
Usage
grunt/gulp
Sublime Text
![Page 26: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/26.jpg)
Before
After
![Page 27: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/27.jpg)
Scss Lint
● is your SCSS written as it should be?
![Page 28: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/28.jpg)
.scss-lint.ymllinters: BangFormat: enabled: true space_before_bang: true space_after_bang: false
BorderZero: enabled: trueEtC
![Page 29: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/29.jpg)
![Page 30: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/30.jpg)
Usage
grunt/gulp
Sublime Text
![Page 31: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/31.jpg)
Automate it!
grunt/gulp watch
IDE/Editor:task on save
git commit hooks
![Page 32: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/32.jpg)
Prevents bad commit or push
husky
![Page 33: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/33.jpg)
how to use?npm install husky --save-dev
package.json
{
"scripts": {
"precommit": "grunt lint",
"prepush": "grunt test"
}
}
![Page 34: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/34.jpg)
Plato
“JavaScript source code visualization, static analysis, and complexity tool”
![Page 35: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/35.jpg)
Usage
plato -r -l .jshintrc -x app/scripts/vendor -d report app/scripts
![Page 36: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/36.jpg)
![Page 37: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/37.jpg)
![Page 38: Why and how to keep your code quality](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a68ef31a28abad7d8b48a0/html5/thumbnails/38.jpg)
Brains