Este projeto visa a disponibilização de um conjunto de Snippets ou atalhos para criação de componentes e arquivos de configuração em aplicações ReactJS.
Começando
Instalação
Para instalar uma extensão você pode executar o Command Pallete através do comando Ctrl + Shift + P ou Cmd + Shift + P , digitar Install Extensions e por fim dar um Enter, feito isso pesquise por Guru Javascript e você vai encontrar a extensão Guru Javascript Snippets.
Linguagens Suportadas
JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)
Jest (.tsx, .ts, .js, .jsx)
Snippets
Abaixo segue a lista com todos os Snippets disponíveis e os gatilhos para cada um. O ⇥ significa a tecla TAB.
Creates a React Memo Function Component with ES7 module system and TypeScript interface
ts-rmce →
Creates a React Memo Function Component with ES7 module system and TypeScript interface
ts-expint →
Create a Interface with export
ts-exptp →
Create a Type with export
JavaScript
Gatilho
Conteúdo
rc-anonfn →
Creates an anonymous function in ES7 syntax
rc-cmbb →
Create a bigger block of comment
rc-context →
Create React context
rc-destruct →
Creates and assigns a local variable using object destructing
exp-as →
Export as alias
exp-def →
Export default
exp-def-anonfn →
Export default function in ES7 syntax
exp-namfn →
Export named function in ES7 syntax
for-in →
Iterating over property values of iterable objects
for-of →
Iterating over property names of iterable objects
for-each →
Creates a forEach statement in ES7 syntax
fwd-ref →
Forward ref statement used inside component
imp-rco →
Import react as object
imp-rc →
Create syntax for import react
imp →
Create syntax for import
rc-hoc →
Create high order component
rc-hoc-redux →
Create high order component with redux
imp-prop-tp →
Create syntax for import prop-types
imp-brw-router →
Create syntax for import BrowserRouter
ts-exptp →
Create a Type with export
ts-exptp →
Create a Type with export
ts-exptp →
Create a Type with export
Style
Gatilho
Conteúdo
styled-react →
Create ReactJS Styled Components file
styled-comp →
Create styled component
exp-styled-comp →
Create export styled component
exp-def-sc →
Create export default styled component
Console Log
Gatilho
Conteúdo
clg-ass →
If the specified expression is false, the message is written to the console along with a stack trace module system and TypeScript interface
clg-cl →
Clears the console
clg-co →
Writes the the number of times that count() has been invoked at the same line and with the same label
clg-dir →
Prints a JavaScript representation of the specified object
clg-err →
Displays a message in the console and also includes a stack trace from where the method was called
clg-group →
Groups and indents all following output by an additional level, until console.groupEnd() is called.
clg-ge →
Closes out the corresponding console.group().
clg-info →
Displays a message in the console but also displays a blue information icon along with the logged message
clg-warn →
Displays a message in the console but also displays a yellow warning icon along with the logged message
clg →
Displays a message in the console
clg-block →
Create a console log block
clg-obj →
Logs property with name
Contribuição
Contribuições são o que fazem a comunidade open source um lugar incrível para aprender, inspirar e criar. Qualquer contribuição que você fizer será muito apreciada.
Faça um Fork do projeto
Crie uma Branch para sua Feature (git checkout -b feature/FeatureIncrivel)
Adicione suas mudanças (git add .)
Comite suas mudanças (git commit -m 'Adicionando uma Feature incrível!)
Faça o Push da Branch (git push origin feature/FeatureIncrivel)
Abra uma Pull Request
Licença
Distribuído sob a licença MIT. Veja LICENSE para mais informações.
