Meu VS Code snippets

Code snippets são blocos de códigos dinâmicos e reutilizáveis. Você pode usar extensões que já possuem vários snippets prontos e você pode criar para aqueles seus códigos que você digita repetitivamente.

Para as tarefas comuns, eu estou usando esta extensão:

React-Native/React/Redux snippets for es6/es7

Os snippets que criei:

{
"React Component": {
"prefix": "myrc",
"description": "React Component",
"body": [
"import React from \"react\";",
"import PropTypes from \"prop-types\";",
"",
"const ${TM_FILENAME_BASE} = () => (",
" $1",
");",
"",
"${TM_FILENAME_BASE}.defaultProps = {};",
"",
"${TM_FILENAME_BASE}.propTypes = {};",
"",
"export default ${TM_FILENAME_BASE};"
]
},
"Component Storybook": {
"prefix": "mycs",
"description": "Component Storybook",
"body": [
"import React from \"react\";",
"",
"import ${TM_FILENAME_BASE/(.stories)//} from \"./${TM_FILENAME_BASE/(.stories)//}\";",
"",
"export default {",
" title: \"Components|${1|Atoms,Molecules,Organisms,Templates,Pages|}/${TM_FILENAME_BASE/(.stories)//}\",",
" component: ${TM_FILENAME_BASE/(.stories)//}",
"};",
"",
"export const usage = () => (",
" <${TM_FILENAME_BASE/(.stories)//}>$2",
");"
]
},
"Component Unit Test": {
"prefix": "myct",
"description": "Component Unit Test",
"body": [
"import React from \"react\";",
"import { render, screen } from \"test-utils\";",
"",
"import ${TM_FILENAME_BASE/(.test)//} from \"./${TM_FILENAME_BASE/(.test)//}\";",
"",
"test('$1', () => {",
" render(<${TM_FILENAME_BASE/(.test)//}>);",
"});"
]
},
"Import styled from styled-components": {
"prefix": "imst",
"description": "Import styled from styled-components",
"body": ["import styled from \"styled-components\";"]
},
"Import from Testing Library React": {
"description": "Import from Testing Library React",
"scope": "javascript",
"prefix": "imtlr",
"body": ["import { $1 } from \"@testing-library/react\";"]
},
"Import default module": {
"description": "Import default module",
"scope": "javascript",
"prefix": "imdm",
"body": ["import ${name} from \"$1\";"]
},
"Import named module": {
"description": "Import named module",
"scope": "javascript",
"prefix": "imnm",
"body": ["import { $2 } from \"$1\";"]
},
"Add PropType to component": {
"description": "Add PropType to component",
"scope": "javascript",
"prefix": "propc",
"body": [
"${TM_FILENAME_BASE}.propTypes = {",
" $1",
"};",
"",
"${TM_FILENAME_BASE}.defaultProps = {",
" $2",
"};"
]
}
}