├── .gitignore ├── .vscode └── launch.json ├── .vscodeignore ├── CHANGELOG.md ├── LICENSE.md ├── README.md ├── images └── styled-components.png ├── package.json └── snippets └── snippets.json /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | 4 | # User-specific files 5 | *.suo 6 | *.user 7 | *.userosscache 8 | *.sln.docstates 9 | 10 | # User-specific files (MonoDevelop/Xamarin Studio) 11 | *.userprefs 12 | 13 | # Build results 14 | [Dd]ebug/ 15 | [Dd]ebugPublic/ 16 | [Rr]elease/ 17 | [Rr]eleases/ 18 | x64/ 19 | x86/ 20 | build/ 21 | bld/ 22 | [Bb]in/ 23 | [Oo]bj/ 24 | 25 | # Visual Studo 2015 cache/options directory 26 | .vs/ 27 | 28 | # MSTest test Results 29 | [Tt]est[Rr]esult*/ 30 | [Bb]uild[Ll]og.* 31 | 32 | # NUNIT 33 | *.VisualState.xml 34 | TestResult.xml 35 | 36 | # Build Results of an ATL Project 37 | [Dd]ebugPS/ 38 | [Rr]eleasePS/ 39 | dlldata.c 40 | 41 | *_i.c 42 | *_p.c 43 | *_i.h 44 | *.ilk 45 | *.meta 46 | *.obj 47 | *.pch 48 | *.pdb 49 | *.pgc 50 | *.pgd 51 | *.rsp 52 | *.sbr 53 | *.tlb 54 | *.tli 55 | *.tlh 56 | *.tmp 57 | *.tmp_proj 58 | *.log 59 | *.vspscc 60 | *.vssscc 61 | .builds 62 | *.pidb 63 | *.svclog 64 | *.scc 65 | 66 | # Chutzpah Test files 67 | _Chutzpah* 68 | 69 | # Visual C++ cache files 70 | ipch/ 71 | *.aps 72 | *.ncb 73 | *.opensdf 74 | *.sdf 75 | *.cachefile 76 | 77 | # Visual Studio profiler 78 | *.psess 79 | *.vsp 80 | *.vspx 81 | 82 | # TFS 2012 Local Workspace 83 | $tf/ 84 | 85 | # Guidance Automation Toolkit 86 | *.gpState 87 | 88 | # ReSharper is a .NET coding add-in 89 | _ReSharper*/ 90 | *.[Rr]e[Ss]harper 91 | *.DotSettings.user 92 | 93 | # JustCode is a .NET coding addin-in 94 | .JustCode 95 | 96 | # TeamCity is a build add-in 97 | _TeamCity* 98 | 99 | # DotCover is a Code Coverage Tool 100 | *.dotCover 101 | 102 | # NCrunch 103 | _NCrunch_* 104 | .*crunch*.local.xml 105 | 106 | # MightyMoose 107 | *.mm.* 108 | AutoTest.Net/ 109 | 110 | # Web workbench (sass) 111 | .sass-cache/ 112 | 113 | # Installshield output folder 114 | [Ee]xpress/ 115 | 116 | # DocProject is a documentation generator add-in 117 | DocProject/buildhelp/ 118 | DocProject/Help/*.HxT 119 | DocProject/Help/*.HxC 120 | DocProject/Help/*.hhc 121 | DocProject/Help/*.hhk 122 | DocProject/Help/*.hhp 123 | DocProject/Help/Html2 124 | DocProject/Help/html 125 | 126 | # Click-Once directory 127 | publish/ 128 | 129 | # Publish Web Output 130 | *.[Pp]ublish.xml 131 | *.azurePubxml 132 | # TODO: Comment the next line if you want to checkin your web deploy settings 133 | # but database connection strings (with potential passwords) will be unencrypted 134 | *.pubxml 135 | *.publishproj 136 | 137 | # NuGet Packages 138 | *.nupkg 139 | # The packages folder can be ignored because of Package Restore 140 | **/packages/* 141 | # except build/, which is used as an MSBuild target. 142 | !**/packages/build/ 143 | # Uncomment if necessary however generally it will be regenerated when needed 144 | #!**/packages/repositories.config 145 | 146 | # Windows Azure Build Output 147 | csx/ 148 | *.build.csdef 149 | 150 | # Windows Store app package directory 151 | AppPackages/ 152 | 153 | # Others 154 | *.[Cc]ache 155 | ClientBin/ 156 | [Ss]tyle[Cc]op.* 157 | ~$* 158 | *~ 159 | *.dbmdl 160 | *.dbproj.schemaview 161 | *.pfx 162 | *.publishsettings 163 | node_modules/ 164 | bower_components/ 165 | 166 | # RIA/Silverlight projects 167 | Generated_Code/ 168 | 169 | # Backup & report files from converting an old project file 170 | # to a newer Visual Studio version. Backup files are not needed, 171 | # because we have git ;-) 172 | _UpgradeReport_Files/ 173 | Backup*/ 174 | UpgradeLog*.XML 175 | UpgradeLog*.htm 176 | 177 | # SQL Server files 178 | *.mdf 179 | *.ldf 180 | 181 | # Business Intelligence projects 182 | *.rdl.data 183 | *.bim.layout 184 | *.bim_*.settings 185 | 186 | # Microsoft Fakes 187 | FakesAssemblies/ 188 | 189 | # Node.js Tools for Visual Studio 190 | .ntvs_analysis.dat 191 | 192 | # Visual Studio 6 build log 193 | *.plg 194 | 195 | # Visual Studio 6 workspace options file 196 | *.opt -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | { 3 | "version": "0.1.0", 4 | "configurations": [ 5 | { 6 | "name": "Launch Extension", 7 | "type": "extensionHost", 8 | "request": "launch", 9 | "runtimeExecutable": "${execPath}", 10 | "args": ["--extensionDevelopmentPath=${workspaceRoot}" ] 11 | } 12 | ] 13 | } -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .gitignore -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | All notable changes to the "vscode-styled-components-snippets" extension will be documented in this file. 3 | 4 | Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. 5 | 6 | ## [Unreleased] 7 | - Initial release -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 lXSPandora 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VS Code Styled-Components snippets 2 | ------------------- 3 | ![alt](images/styled-components.png) 4 | 5 | [![See on Market Place](https://marketplace.visualstudio.com/items?itemName=lXSPandora.vscode-styled-components-snippets)](https://marketplace.visualstudio.com/items?itemName=lXSPandora.vscode-styled-components-snippets) 6 | 7 | This extension contains code snippets and some triggers for JS Styled-Components. 8 | 9 | ## Supported languages (file extensions) 10 | * JavaScript (.js) 11 | 12 | ## Snippets 13 | 14 | Below is a list of all available snippets and the triggers of each one. The **⇥** means the `TAB` key. 15 | 16 | | Trigger | Content | 17 | | -------: | ------- | 18 | | `isc` | import styled-components | 19 | | `iscn` | import styled-components/native | 20 | | `sc` | styled component empty skeleton | 21 | | `esc` | export style component empty | 22 | 23 | 24 | Most used props from styled-components. 25 | 26 | | Props | 27 | | -------: | 28 | | `padding` | 29 | | `padding-left` | 30 | | `padding-right` | 31 | | `padding-top` | 32 | | `padding-bottom` | 33 | | `padding-horizontal` | 34 | | `padding-vertical` | 35 | | `margin` | 36 | | `margin-left` | 37 | | `margin-right` | 38 | | `margin-top` | 39 | | `margin-bottom` | 40 | | `flex` | 41 | | `background-color` | 42 | | `border-color` | 43 | | `border-radius` | 44 | | `border-style` | 45 | | `border-style` | 46 | | `color` | 47 | | `text-align` | 48 | | `width` | 49 | | `height` | 50 | | `font-size` | 51 | | `font-weight` | 52 | | `font-family` | 53 | | `flex-direction` | 54 | | `align-items` | 55 | | `justify-content` | 56 | 57 | 58 | [styled-components]: https://github.com/styled-components/styled-components 59 | -------------------------------------------------------------------------------- /images/styled-components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lXSPandora/vscode-styled-components-snippets/cd370c4eb1140d59d5b0ff5459bc324399ae2390/images/styled-components.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vscode-styled-components-snippets", 3 | "displayName": "vscode-styled-components-snippets", 4 | "description": "This extension contains code snippets and some triggers for JS Styled-Components.", 5 | "icon": "images/styled-components.png", 6 | "version": "1.0.1", 7 | "publisher": "lXSPandora", 8 | "engines": { 9 | "vscode": "^1.16.0" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "https://github.com/lXSPandora/vscode-styled-components-snippets.git" 14 | }, 15 | "categories": [ 16 | "Snippets" 17 | ], 18 | "contributes": { 19 | "snippets": [ 20 | { 21 | "language": "javascript", 22 | "path": "./snippets/snippets.json" 23 | }, 24 | { 25 | "language": "javascriptreact", 26 | "path": "./snippets/snippets.json" 27 | } 28 | ] 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /snippets/snippets.json: -------------------------------------------------------------------------------- 1 | { 2 | //Styled-Components 3 | "Styled Components: import styled-components": { 4 | "prefix": "isc", 5 | "body": "import styled from 'styled-components';" 6 | }, 7 | "Styled Components: import styled-components/native": { 8 | "prefix": "iscn", 9 | "body": "import styled from 'styled-components/native';" 10 | }, 11 | "Styled Components: styled component": { 12 | "prefix": "sc", 13 | "body": "const ${1:ComponentName} = styled.${2:Component}`\n\t\n`;" 14 | }, 15 | "Styled Components: styled component export": { 16 | "prefix": "esc", 17 | "body": 18 | "export const ${1:ComponentName} = styled.${2:ComponentType}`\n\t\n`;" 19 | }, 20 | "Styled-Components: padding": { 21 | "prefix": "padding", 22 | "body": "padding: ${2:10px};", 23 | "description": 24 | "The spacing inside all the view corners. usage: padding: 10px;" 25 | }, 26 | "Styled-Components: padding-left": { 27 | "prefix": "padding-left", 28 | "body": "padding-left: ${2:10};", 29 | "description": 30 | "The spacing left from inside the view. usage: padding-left: 10px;" 31 | }, 32 | "Styled-Components: padding-right": { 33 | "prefix": "padding-right", 34 | "body": "padding-right: ${2:10};", 35 | "description": 36 | "The spacing right from inside the view. usage: padding-right: 10px;" 37 | }, 38 | "Styled-Components: padding-top": { 39 | "prefix": "padding-top", 40 | "body": "padding-top: ${2:10};", 41 | "description": 42 | "The spacing top from inside the view. usage: padding-top: 10px;" 43 | }, 44 | "Styled-Components: padding-bottom": { 45 | "prefix": "padding-bottom", 46 | "body": "padding-bottom: ${2:10};", 47 | "description": 48 | "The spacing bottom from inside the view. usage: padding-bottom: 10px;" 49 | }, 50 | "Styled-Components: padding-vertical": { 51 | "prefix": "padding-vertical", 52 | "body": "padding-vertical: ${2:10};", 53 | "description": 54 | "The spacing at the top and bottom from inside the view. usage: padding-vertical: 10px;" 55 | }, 56 | "Styled-Components: padding-horizontal": { 57 | "prefix": "padding-horizontal", 58 | "body": "padding-horizontal: ${2:10};", 59 | "description": 60 | "The spacing at the left and right from inside the view. usage: padding-horizontal: 10px;" 61 | }, 62 | "Styled-Components: flex": { 63 | "prefix": "flex", 64 | "body": "flex: ${2:1};" 65 | }, 66 | "Styled-Components: background-color": { 67 | "prefix": "background-color", 68 | "body": "background-color: ${1:#FFFFFF};", 69 | "description": 70 | "Changes the background color of your component. usage: background-color: #FFFFF;" 71 | }, 72 | "Styled-Components: border-radius": { 73 | "prefix": "border-radius", 74 | "body": "border-radius: ${1:10};", 75 | "description": "Rouded corners to your component. usage border-radius: 10;" 76 | }, 77 | "Styled-Components: border-style": { 78 | "prefix": "border-style", 79 | "body": "border-style: ${1:solid};", 80 | "description": 81 | "Change the border style of your component. usage: border-style: solid;" 82 | }, 83 | "Styled-Components: border-width": { 84 | "prefix": "border-width", 85 | "body": "border-width: ${1:2};", 86 | "description": 87 | "Changes the width of the border of your component. usage: border-width: 1;" 88 | }, 89 | "Styled-Components: border-color": { 90 | "prefix": "border-color", 91 | "body": "border-color: ${2:#FFFFFF};", 92 | "description": 93 | "Changes the color of the border of your component. usage: border-color: #FFFFFF;" 94 | }, 95 | "Styled-Components: color": { 96 | "prefix": "color", 97 | "body": "color: ${2:#FFFFFF};", 98 | "description": 99 | "Changes the text color of your component. usage: color: #FFFFFF;" 100 | }, 101 | "Styled-Components: text-align": { 102 | "prefix": "text-align", 103 | "body": "text-align: ${2:center};", 104 | "description": 105 | "Changes the alignment of your text. usage: text-align: center" 106 | }, 107 | "Styled-Components: margin": { 108 | "prefix": "margin", 109 | "body": "margin: ${2:10};", 110 | "description": "Adds external margins to your component. usage: margin: 10;" 111 | }, 112 | "Styled-Components: margin-top": { 113 | "prefix": "margin-top", 114 | "body": "margin-top: ${2:10};", 115 | "description": 116 | "Adds margin to the top of your component. usage: margin-top: 10;" 117 | }, 118 | "Styled-Components: margin-bottom": { 119 | "prefix": "margin-bottom", 120 | "body": "margin-bottom: ${2:10};", 121 | "description": 122 | "Adds margin to the bottom of your component. usage: margin-bottom: 10;" 123 | }, 124 | "Styled-Components: margin-left": { 125 | "prefix": "margin-left", 126 | "body": "margin-left: ${2:10};", 127 | "description": 128 | "Adds margin to the left of your component. usage: margin-left: 10;" 129 | }, 130 | "Styled-Components: margin-right": { 131 | "prefix": "margin-right", 132 | "body": "margin-right: ${2:10};", 133 | "description": 134 | "Adds margin to the right of your component. usage: margin-right: 10;" 135 | }, 136 | "Styled-Components: margin-horizontal": { 137 | "prefix": "margin-horizontal", 138 | "body": "margin-horizontal: ${2:10};" 139 | }, 140 | "Styled-Components: margin-vertical": { 141 | "prefix": "margin-vertical", 142 | "body": "margin-vertical: ${2:10};" 143 | }, 144 | "Styled-Components: width": { 145 | "prefix": "width", 146 | "body": "width: ${2:100};", 147 | "description": 148 | "Changes the width size of your component. usage: width: 100;" 149 | }, 150 | "Styled-Components: height": { 151 | "prefix": "height", 152 | "body": "height: ${2:100};", 153 | "description": 154 | "Changes the height size of your component. usage: height: 100;" 155 | }, 156 | "Styled-Components: font-size": { 157 | "prefix": "font-size", 158 | "body": "font-size: ${2:16};", 159 | "description": "Changes the font size of a text." 160 | }, 161 | "Styled-Components: font-weight": { 162 | "prefix": "font-weight", 163 | "body": "font-weight: ${2:bold};", 164 | "description": "Makes the font bolder or lighter. usage: font-weight: 300;" 165 | }, 166 | "Styled-Components: font-family": { 167 | "prefix": "font-family", 168 | "body": "font-family: ${2:System};", 169 | "description": "Changes the font family. usage: font-family: roboto;" 170 | }, 171 | "Styled-Components: flex-direction": { 172 | "prefix": "flex-direction", 173 | "body": "flex-direction: ${2:row};", 174 | "description": 175 | "Changes the direction of your components, types: 'column', 'row', 'row-reverse', 'column-reverse'." 176 | }, 177 | "Styled-Components: align-items": { 178 | "prefix": "align-items", 179 | "body": "align-items: ${2:center};", 180 | "description": 181 | "The align-items property accepts 5 different values: flex-start: cross-start margin edge of the items is placed on the cross-start line flex-end: cross-end margin edge of the items is placed on the cross-end line center: items are centered in the cross-axis baseline: items are aligned such as their baselines align stretch (default): stretch to fill the container (still respect min-width/max-width)" 182 | }, 183 | "Styled-Components: justify-content": { 184 | "prefix": "justify-content", 185 | "body": "justify-content: ${2:center};", 186 | "description": 187 | "flex-start (default): items are packed toward the start line, flex-end: items are packed toward to end line, center: items are centered along the line, space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line, space-around: items are evenly distributed in the line with equal space around them" 188 | }, 189 | "Styled-Components: display": { 190 | "prefix": "display", 191 | "body": "display: ${2:flex};", 192 | "description": "Enables flex on the react web" 193 | } 194 | } 195 | --------------------------------------------------------------------------------