Skip to content

Instantly share code, notes, and snippets.

@Sashkan
Created August 7, 2020 12:23
Show Gist options
  • Save Sashkan/0dd93a9f6027baabac380d046d3ed697 to your computer and use it in GitHub Desktop.
Save Sashkan/0dd93a9f6027baabac380d046d3ed697 to your computer and use it in GitHub Desktop.
List of usefull VSCode snippets.
{
"Print to console": {
"scope": "javascript,typescript",
"prefix": "log",
"body": [
"console.log('$1')",
"$2"
],
"description": "Log output to console"
},
"require props": {
"scope": "javascript,typescript",
"prefix": "tpr",
"body": [
"const {",
" $1,",
"} = this.props"
],
"description": "Get prop"
},
"new random string": {
"scope": "javascript",
"prefix": "rdstr",
"body": "Math.random().toString(36).substring(7)",
"description": "generates a random string"
},
"new styled-comp": {
"scope": "javascript,typescript",
"prefix": "ponsc",
"body": [
"import styled from 'styled-components'",
" ",
"const Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/} = styled.div`",
" $1",
"`",
" ",
"export default Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/}"
],
"description": "Generate styled component"
},
"import styled-comp": {
"scope": "javascript,typescript",
"prefix": "pois",
"body": [
"import Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/} from './index.styled'"
],
"description": "Import current component Styled"
},
"generate story": {
"scope": "javascript,typescript",
"prefix": "ponsb",
"body": [
"import React from 'react'",
"import { storiesOf } from '@storybook/react'",
"import ${TM_DIRECTORY/^.+\\/(.*)$/$1/} from '.'",
"",
"storiesOf('${1|Atoms,Molecules,Organisms,Pages|}/${TM_DIRECTORY/^.+\\/(.*)$/$1/}', module).add('default', () => {",
" $2",
" return (<${TM_DIRECTORY/^.+\\/(.*)$/$1/} />)",
"})",
],
"description": "Generate Story"
},
"generate es6 method": {
"scope": "javascript,typescript",
"prefix": "ponm",
"body": [
"const $1 = () => {",
" try {",
" $2",
" } catch (error) {",
" console.log('${TM_DIRECTORY/^.+\\/(.*)$/$1/} - $1', error)",
" }",
"}",
],
"description": "Generate new method"
},
"generate es6 component method": {
"scope": "javascript,typescript",
"prefix": "poncm",
"body": [
"$1 = () => {",
" try {",
" $2",
" } catch (error) {",
" console.log('${TM_DIRECTORY/^.+\\/(.*)$/$1/} - $1', error)",
" }",
"}",
],
"description": "Generate new react method"
},
"get theme prop": {
"prefix": "gsp",
"body": [
"${props => props.theme.$1};",
],
"description": "get theme prop"
},
"baseprop": {
"prefix": "bpp",
"body": [
"$1={$1}",
],
"description": "add selfnamed prop"
},
"condisc": {
"prefix": "poncs",
"body": [
"${({ $1 }) => ($1 ? '$2' : '$3')};",
],
"description": "add conditionnal prop"
},
"setState": {
"prefix": "sst",
"body": [
"this.setState((prevState, props) => ({",
" $1",
"}));"
],
"description": "setState"
},
"Create a React rendering test": {
"prefix": "ponrt",
"body": [
"import '@testing-library/jest-dom'",
"import React from 'react'",
"import {render, fireEvent, screen} from '@testing-library/react'",
"import ${TM_DIRECTORY/^.+\\/(.*)$/$1/} from './index.js'",
"",
"test('shows the children when the checkbox is checked', () => {",
" render(<${TM_DIRECTORY/^.+\\/(.*)$/$1/} />)",
" expect(screen.getByText($1)).toBeInTheDocument()",
"})"
],
"description": "Create a React rendering test"
},
"create ES16 Component": {
"prefix": "ponec",
"body": [
"import React from 'react'",
"import Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/} from './index.styled'"
"",
"const ${TM_DIRECTORY/^.+\\/(.*)$/$1/} = ({$2}) => {",
" return (",
" <Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/}>",
" ${TM_DIRECTORY/^.+\\/(.*)$/$1/}",
" </Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/}>",
" ) ",
"}",
"",
"export default ${TM_DIRECTORY/^.+\\/(.*)$/$1/}"
],
"description": "create ES16 Component"
},
"create unstyled ES6 Component": {
"prefix": "ponecr",
"body": [
"import React from 'react'",
"",
"const ${TM_DIRECTORY/^.+\\/(.*)$/$1/} = ({$2}) => {",
" return (",
" <div>",
" ${TM_DIRECTORY/^.+\\/(.*)$/$1/}",
" </div>",
" ) ",
"}",
"",
"export default ${TM_DIRECTORY/^.+\\/(.*)$/$1/}"
],
"description": "create ES16 Component"
},
"Creates a connected functional component": {
"prefix": "poner",
"body": [
"import React, { Component } from 'react'",
"import { bindActionCreators } from 'redux'",
"import { connect } from 'react-redux'",
"",
"const $1 = (props) => {",
" try {",
" return (",
" <div>",
" </div>",
" )",
" } catch (error) {",
" console.log('$1 - render()', { error })",
" return null",
" }",
"}",
"",
"export default connect(",
" (state) => ({",
" }),",
" (dispatch) => bindActionCreators({",
" action: (payload) => ({",
" type: ACTION,",
" payload,",
" }),",
" }, dispatch),",
")($1)",
"",
""
],
"description": "Creates a connected functional component"
},
"create Panopli Component": {
"prefix": "ponpc",
"body": [
"import React, { Component } from 'react'",
"import Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/} from './index.styled'",
"",
"class ${TM_DIRECTORY/^.+\\/(.*)$/$1/} extends Component {",
" render() {",
" try {",
" return (",
" <Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/}>",
" $1",
" </Styled${TM_DIRECTORY/^.+\\/(.*)$/$1/}>",
" ) ",
" } catch (error) {",
" console.log('${TM_DIRECTORY/^.+\\/(.*)$/$1/} - render()', { error })",
" return null",
" }",
" }",
"}",
"",
"export default ${TM_DIRECTORY/^.+\\/(.*)$/$1/}"
],
"description": "create Panopli Component"
},
"create Panopli Component Class": {
"prefix": "poncc",
"body": [
"class $1 extends Component {",
" render() {",
" try {",
" return (",
" <Styled$1>",
" $1",
" </Styled$1>",
" ) ",
" } catch (error) {",
" console.log('$1 - render()', { error })",
" return null",
" }",
" }",
"}",
],
"description": "create Panopli Component Class"
},
"Create a new reducer": {
"prefix": "ponr",
"body": [
"import { initialState } from './selectors'",
"import {",
" $1,",
"} from './actions'",
"",
"export default (state = initialState, { type, payload }) => {",
" switch (type) {",
" case $1:",
" return {",
" ...state,",
" $2",
" }",
" default:",
" return state",
" }",
"}",
""
],
"description": "Create a new reducer"
},
"Create a new reducer case": {
"prefix": "ponrc",
"body": [
"",
" case $1:",
" return {",
" ...state,",
" }"
],
"description": "Create a new reducer case"
},
"Create new helper": {
"prefix": "ponh",
"body": [
"const ${TM_DIRECTORY/^.+\\/(.*)$/$1/} = ($1) => {",
" try {",
" $2",
" } catch (error) {",
" console.log('Error in ${TM_DIRECTORY/^.+\\/(.*)$/$1/}', { error })",
" return $3",
" }",
"}",
"",
"export {",
" ${TM_DIRECTORY/^.+\\/(.*)$/$1/},",
"}",
""
],
"description": "Create new helper"
},
"generate es6 errorcatch": {
"scope": "javascript,typescript",
"prefix": "pone",
"body": [
"console.log('${TM_DIRECTORY/^.+\\/(.*)$/$1/} - $1', { error })",
],
"description": "Generate new error catch"
},
"Create new test": {
"prefix": "pont",
"body": [
"import ${TM_DIRECTORY/^.+\\/(.*)$/$1/} from './${TM_DIRECTORY/^.+\\/(.*)$/$1/}'",
"",
"describe('${TM_DIRECTORY/^.+\\/(.*)$/$1/}', () => {",
" test('Default test', () => {",
" expect(${TM_DIRECTORY/^.+\\/(.*)$/$1/}()).toBe()",
" })",
"})",
""
],
"description": "Create new test"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment