diff --git a/settings/html.completion.cson b/settings/html.completion.cson index 343822c..8e5c26f 100644 --- a/settings/html.completion.cson +++ b/settings/html.completion.cson @@ -1,4 +1,4 @@ -'.text.html, .text.css, .source.js': +'.text.html, .text.css, .source.scss, .source.sass, .source.js, .source.jsx, .source.ts, .source.tsx': 'editor': 'completions': [ diff --git a/settings/icons.fontawesome.cson b/settings/icons.fontawesome.cson index 9242401..250a5dd 100644 --- a/settings/icons.fontawesome.cson +++ b/settings/icons.fontawesome.cson @@ -1,4 +1,4 @@ -'.text.html, .source.css, .source.sass, .source.less, .source.jade': +'.text.html, .source.css, .source.sass, .source.scss, .source.less, .source.jade, .source.jsx, .source.tsx': 'editor': 'completions': [ 'fa-lg' diff --git a/settings/icons.glyphicons.cson b/settings/icons.glyphicons.cson index 01631a7..655ceb4 100644 --- a/settings/icons.glyphicons.cson +++ b/settings/icons.glyphicons.cson @@ -1,4 +1,4 @@ -'.text.html, .source.css, .source.sass, .source.less, .source.jade': +'.text.html, .source.css, .source.sass, .source.scss, .source.less, .source.jade, .source.jsx, .source.tsx': 'editor': 'completions': [ 'glyphicon-asterisk' diff --git a/settings/icons.octicons.cson b/settings/icons.octicons.cson index 12f902e..e9bc68a 100644 --- a/settings/icons.octicons.cson +++ b/settings/icons.octicons.cson @@ -1,4 +1,4 @@ -'.text.html, .source.css, .source.sass, .source.less, .source.jade': +'.text.html, .source.css, .source.sass, .source.scss, .source.less, .source.jade, .source.jsx, .source.tsx': 'editor': 'completions': [ 'octicon-alert' diff --git a/snippets/react-components.cson b/snippets/react-components.cson new file mode 100644 index 0000000..5e714eb --- /dev/null +++ b/snippets/react-components.cson @@ -0,0 +1,315 @@ +'.source.jsx, .source.tsx': + + 'Icon': + 'prefix': 'icon' + 'body': """ + + """ + + 'Octicons by GitHub': + 'prefix': 'oi' + 'body': """ + $0 + """ + + 'Fontawesome Icon': + 'prefix': 'fa' + 'body': """ + + """ + + 'Button': + 'prefix': 'btn' + 'body': """ + + """ + + 'Button Modal': + 'prefix': 'btn-modal' + 'body': """ + + """ + + 'Dropdown': + 'prefix': 'dropdown' + 'body': """ +
+ + +
+ """ + + 'Menu Item': + 'prefix': 'menuitem' + 'body': """ +
  • $2
  • + """ + + 'Menu Header': + 'prefix': 'menuheader' + 'body': """ +
  • $1
  • + """ + + 'Menu Divider': + 'prefix': 'menudivider' + 'body': """ +
  • + """ + + 'Button Group': + 'prefix': 'btn-group' + 'body': """ +
    + ${3:btn} +
    + """ + + 'Button Group Vertical': + 'prefix': 'btn-group-vertical' + 'body': """ +
    + ${3:btn} +
    + """ + + 'Button Toolbar': + 'prefix': 'btn-toolbar' + 'body': """ +
    + ${1:btngroup} +
    + """ + + 'Input Group': + 'prefix': 'input-group' + 'body': """ +
    + $1 + + $3 +
    + """ + + 'Tab': + 'prefix': 'nav-tabs' + 'body': """ + + """ + + 'Item': + 'prefix': 'item' + 'body': """ +
  • $2
  • + """ + + 'Pills': + 'prefix': 'nav-pills' + 'body': """ + + """ + + 'Navbar': + 'prefix': 'nav-' + 'body': """ + + """ + + 'Breadcrumbs': + 'prefix': 'breadcrumb' + 'body': """ +
      + $1 +
    + """ + + 'Pagination': + 'prefix': 'pagination' + 'body': """ + + """ + + "Pager": + 'prefix': 'pager' + 'body': """ + + """ + + 'Label': + 'prefix': 'label-' + 'body': """ + $2 + """ + + 'Badge': + 'prefix': 'badge' + 'body': """ + $2 + """ + + 'Jumbotron': + 'prefix': 'jumbotron' + 'body': """ +
    +

    ${1:Hello, world!}

    +

    $2

    +
    + """ + + 'Page Header': + 'prefix': 'page-header' + 'body': """ +
    +

    $1 $2

    +
    + """ + + 'Thumbnail': + 'prefix': 'thumbnail' + 'body': """ + + ${1:$2} + + """ + + 'Alert': + 'prefix': 'alert' + 'body': """ +
    $2
    + """ + + 'Alert Close': + 'prefix': 'close' + 'body': """ + + """ + + 'Alert Link': + 'prefix': 'alert-link' + 'body': """ + $2 + """ + + 'Progress Bar': + 'prefix': 'progress-' + 'body': """ +
    +
    + $2 +
    +
    + """ + + 'List Group': + 'prefix': 'list-group' + 'body': """ + + """ + + 'List Group Item': + 'prefix': 'list-item' + 'body': """ +
  • $1
  • + """ + + 'Panel': + 'prefix': 'panel' + 'body': """ +
    + ${1:
    +

    $2

    +
    } +
    + $3 +
    + ${4:
    + $5 +
    } +
    + """ + + 'Well': + 'prefix': 'well' + 'body': """ +
    + $2 +
    + """ + + 'Blockquote Reverse': + 'prefix': 'blockquote-reverse' + 'body': """ +
    + $2 +
    + """ + + 'List Unstyled': + 'prefix': 'list-unstyled' + 'body': """ + + """ + + 'List Inline': + 'prefix': 'list-inline' + 'body': """ + + """ + + 'Dl Horizontal': + 'prefix': 'dl-horizontal' + 'body': """ +
    + ${1:
    $2
    +
    $3
    } +
    + """ + + 'Table': + 'prefix': 'table-' + 'body': """ + + $2 +
    + """ + + 'Form Group': + 'prefix': 'form-group' + 'body': """ +
    + + + ${6:

    ${7:Help text here.}

    } +
    + """ diff --git a/snippets/react-grid.cson b/snippets/react-grid.cson new file mode 100644 index 0000000..c17675b --- /dev/null +++ b/snippets/react-grid.cson @@ -0,0 +1,65 @@ +'.source.jsx, .source.tsx': + + 'Container': + 'prefix': 'con' + 'body': """ +
    + $1 +
    + """ + + 'Container Fluid': + 'prefix': 'conf' + 'body': """ +
    + $1 +
    + """ + + 'Row': + 'prefix': 'row' + 'body': """ +
    + $1 +
    + """ + + 'Column': + 'prefix': 'col-' + 'body': """ +
    + $3 +
    + """ + + 'Column Extra Small': + 'prefix': 'col-xs' + 'body': """ +
    + $0 +
    + """ + + 'Column Small': + 'prefix': 'col-sm' + 'body': """ +
    + $0 +
    + """ + + 'Column Medium': + 'prefix': 'col-md' + 'body': """ +
    + $0 +
    + """ + + 'Column Large': + 'prefix': 'col-lg' + 'body': """ +
    + $0 +
    + """ diff --git a/snippets/react-templates.cson b/snippets/react-templates.cson new file mode 100644 index 0000000..fe4f964 --- /dev/null +++ b/snippets/react-templates.cson @@ -0,0 +1,157 @@ +'.source.jsx, .source.tsx': + + 'Modal': + 'prefix': 'modal' + 'body': """ + + """ + + 'Accordion': + 'prefix': 'accordion' + 'body': """ +
    +
    +
    +

    + + $4 + +

    +
    +
    +
    + $6 +
    +
    +
    +
    + """ + + 'Accordion Item': + 'prefix': 'accordion-item' + 'body': """ +
    +
    +

    + + $3 + +

    +
    +
    +
    + $5 +
    +
    + $6 +
    + """ + + 'Carousel': + 'prefix': 'carousel' + 'body': """ +
    + +
      +
    1. +
    2. +
    3. +
    + + +
    +
    + $3 +
    + $4 +
    +
    + $5 +
    + + + + + + + + +
    + """ + + 'Carousel Item': + 'prefix': 'carousel-item' + 'body': """ +
    + $2 +
    +

    $3

    +

    $4

    +
    +
    + """ + + 'Navbar': + 'prefix': 'navbar' + 'body': """ + + """ + + 'Navbar Dropdown': + 'prefix': 'navbar-dropdown' + 'body': """ +
  • + ${1:Menu Item} + +
  • + """ diff --git a/snippets/react-typography.cson b/snippets/react-typography.cson new file mode 100644 index 0000000..7ad2f70 --- /dev/null +++ b/snippets/react-typography.cson @@ -0,0 +1,33 @@ +'.source.jsx, .source.tsx': + + 'Initialism': + 'prefix': 'initialism' + 'body': '$2' + + 'Lead': + 'prefix': 'lead' + 'body': '

    $0

    ' + + 'Heading 1': + 'prefix': 'h1-' + 'body': '

    $1 ${2:$3}

    ' + + 'Heading 2': + 'prefix': 'h2-' + 'body': '

    $1 ${2:$3}

    ' + + 'Heading 3': + 'prefix': 'h3-' + 'body': '

    $1 ${2:$3}

    ' + + 'Heading 4': + 'prefix': 'h4-' + 'body': '

    $1 ${2:$3}

    ' + + 'Heading 5': + 'prefix': 'h5-' + 'body': '
    $1 ${2:$3}
    ' + + 'Heading 6': + 'prefix': 'h6-' + 'body': '
    $1 ${2:$3}
    '