Code style - Prettier
Non-default options:
// .prettierrc
{
"printWidth": 120,
"singleQuote": true,
"arrowParens": "always"
}
Note: the Require Prama option might be useful while transitioning
CI
Configure a pre-commit hook
Extra
Check out the Editor Integrations
Using tslint-config-airbnb, tslint-config-prettier
// tslint.json
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended",
"tslint-config-airbnb",
"tslint-config-prettier"
],
"jsRules": {},
"rules": {
...
"ter-arrow-parens": [true, "always"],
...
},
"rulesDirectory": []
}
We use BEM CSS class naming. In short:
Block: Standalone entity that is meaningful on its own.
Eg.
header
,container
,menu
,checkbox
,input
Element: A part of a block that has no standalone meaning and is semantically tied to its block.
Eg.
menu__item
,list__item
,checkbox__caption
,header__title
Modifier: A flag on a block or element. Use them to change appearance or behavior.
Eg.
menu__item--disabled
,list__item--highlighted
,checkbox--checked
,button--primary
Use angular-bem for BEM classes.
<div class="header">
<h1 class="header__title">
Hello, and welcome to <span class="header__title--accented">Bitrise</span>
</h1>
</div>
Linting with stylelint
We use an extended version of stylelint-config-recommended with a list of property orders. See .stylelintrc for the list of rules.
Plugins: stylelint-order
Mixin naming convention:
TODO
{
...
"scripts": {
...
"lint:style": "stylelint \"./**/*.scss\""
}
}