Desenvolvedores
O NoZebra Design System fornece aos desenvolvedores front-end uma coleção de códigos HTML e SCSS reutilizáveis para criar sites e interfaces de usuário. A adoção da biblioteca permite que os desenvolvedores usem marcação, estilos e comportamento consistentes no trabalho de protótipo e produção.
Instalação
npm install --save clickjogos/nozebra-design-system#development
Pacotes Recomendados:
npm install --save-dev node-sass
npm install --save-dev postcss
npm install --save-dev autoprefixer
npm install --save-dev css-mqpacker
npm install --save-dev cssnano
npm install --save-dev cssnano
Estrutura
nozebra-design-system
├── .storybook
├── dist
├── docs
├── scripts
├── src
│ ├── abstracts
│ ├── components
│ ├── utilities
│ └── main.scss
└── tokens
├── branding
└── global
Uso
O uso dos arquivos Sass do NoZebra Design System implicam no uso do pré-processador SCSS. Todos os arquivos Sass usam a extensão de arquivo * .scss.
@import 'nozebra-design-system/dist/tokens/{brand}';
@import 'nozebra-design-system/src/main';
Definições
Atenção
Em desenvolvimento
Ferramentas
EditorConfig
O EditorConfig ajuda a manter estilos de codificação consistentes para vários desenvolvedores trabalhando no mesmo projeto em vários editores e IDEs.
.editorconfig:
root = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = lf
max_line_length = null
Babel
O Babel é uma ferramenta que é usada principalmente para converter o código ECMAScript 2015+ em uma versão compatível com versões anteriores do JavaScript em navegadores ou ambientes atuais e antigos . - Babel
npm install --save-dev @babel/core @babel/preset-env
.babelrc:
{
"presets": ["@babel/preset-env"]
}
Lint Javascript
Utilitário de linting plugável para JavaScript e JSX. - ESLint
npm install --save-dev eslint
npm install --save-dev eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
npm install --save-dev babel-eslint
ESLint plugin for Vue.js (Projetos com Vue.js)
npm install --save-dev eslint-plugin-vue
npm install --save-dev eslint-config-prettier
.eslintrc.json:
{
"root": true,
"env": {
"browser": true,
"es6": true
},
"parserOptions": {
"parser": "babel-eslint",
"ecmaVersion": 6
},
"plugins": ["standard", "vue", "import"],
"extends": [
"standard",
"plugin:vue/essential",
"prettier",
"prettier/standard",
"prettier/vue"
]
}
package.json:
"scripts": {
"lint:scripts": "eslint --ext .js,.vue ./ --fix"
}
Lint CSS
Um poderoso e moderno linter que ajuda a evitar erros e impor convenções em seus estilos. - Stylelint
npm install --save-dev stylelint
npm install --save-dev stylelint-config-recommended
Stylelint config based on SASS Guidelines
npm install --save-dev stylelint-config-sass-guidelines
npm install --save-dev stylelint-config-prettier
.stylelintrc.json:
{
"defaultSeverity": "warning",
"extends": [
"stylelint-config-recommended",
"stylelint-config-sass-guidelines",
"stylelint-config-prettier"
]
}
package.json:
"scripts": {
"lint:styles": "stylelint **/*.{css,scss,vue} --fix"
}
Prettier
Um formatador de código opinativo. - Prettier
npm install --save-dev --exact prettier
.prettierrc.json:
{
"singleQuote": true,
"semi": false,
"proseWrap": "always"
}
package.json:
"scripts": {
"format": "prettier --write **/*.{html,js,json,vue,css,scss,md}"
}
Lint Staged
Execute linters em arquivos git staged. - lint-staged
npm install --save-dev lint-staged husky
package.json:
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,vue}": [
"eslint --fix",
"prettier --write",
"git add"
],
"*.{css,scss,vue}": [
"stylelint --fix",
"prettier --write",
"git add"
],
"*.{html,json}": [
"prettier --write",
"git add"
]
}
VSCode
settings.json:
{
"editor.formatOnSave": true,
"eslint.autoFixOnSave": false,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
{
"language": "vue-html",
"autoFix": true
}
],
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true,
"vetur.format.defaultFormatterOptions": {
"prettyhtml": {
"printWidth": 80,
"wrapAttributes": true
}
},
"vetur.format.defaultFormatter.js": "prettier-eslint",
"vetur.validation.script": false,
"vetur.validation.style": false,
"vetur.validation.template": false,
"css.validate": false,
"javascript.validate.enable": false,
"less.validate": false,
"scss.validate": false
}