├── .vscode
└── launch.json
├── .vscodeignore
├── CHANGELOG.md
├── README.md
├── assets
└── code.png
├── package.json
├── snippets
└── snippets.json
├── test.js
└── vsc-extension-quickstart.md
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | // A launch configuration that launches the extension inside a new window
2 | // Use IntelliSense to learn about possible attributes.
3 | // Hover to view descriptions of existing attributes.
4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5 | {
6 | "version": "0.2.0",
7 | "configurations": [
8 | {
9 | "name": "Extension",
10 | "type": "extensionHost",
11 | "request": "launch",
12 | "runtimeExecutable": "${execPath}",
13 | "args": [
14 | "--extensionDevelopmentPath=${workspaceFolder}"
15 | ]
16 | }
17 | ]
18 | }
--------------------------------------------------------------------------------
/.vscodeignore:
--------------------------------------------------------------------------------
1 | .vscode/**
2 | .vscode-test/**
3 | .gitignore
4 | vsc-extension-quickstart.md
5 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to the "styled-components-snippets" extension will be documented in this file.
4 |
5 | Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
6 |
7 | ## [Unreleased]
8 |
9 | - Initial release
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | 
5 |
6 |
Styled Components Snippets
7 |
8 |
9 | ## Table of Contents
10 |
11 | - [Table of Contents](#table-of-contents)
12 | - [About the Project](#about-the-project)
13 | - [Styled Components React](#styled-components-react)
14 | - [Styled Components React Native](#styled-components-react-native)
15 | - [License](#license)
16 | - [Contact](#contact)
17 |
18 | ## About the Project
19 |
20 | This project aims to provide a set of Snippets for the creation of components with the library Styled Components. Features Snippets for ReactJS and React Native. They help you to have greater productivity in development.
21 |
22 | ## Styled Components React
23 |
24 | Below is the list of Snippets available for React JS:
25 |
26 | | Snippet | Content |
27 | | ----------------------: | ----------------------------------------------------------------------------- |
28 | | `scr-header →` | Creates a **header** Component |
29 | | `scr-nav →` | Creates a **nav** Component |
30 | | `scr-main →` | Creates a **main** Component |
31 | | `scr-section →` | Creates a **section** Component |
32 | | `scr-aside →` | Creates a **aside** Component |
33 | | `scr-footer →` | Creates a **footer** Component |
34 | | `scr-div →` | Creates a **div** Component |
35 | | `scr-h1 →` | Creates a **h1** Component |
36 | | `scr-h2 →` | Creates a **h2** Component |
37 | | `scr-h3 →` | Creates a **h3** Component |
38 | | `scr-h4 →` | Creates a **h4** Component |
39 | | `scr-h1 →` | Creates a **h1** Component |
40 | | `scr-form →` | Creates a **form** Component |
41 | | `scr-input →` | Creates a **input** Component |
42 | | `scr-textarea →` | Creates a **textarea** ponent |
43 | | `scr-label →` | Creates a **input** Component |
44 | | `scr-button →` | Creates a **button** Component |
45 | | `scr-table →` | Creates a **table** Component |
46 | | `scr-span →` | Creates a **span** Component |
47 | | `scr-a →` | Creates a **a** Component |
48 | | `scr-article →` | Creates a **article** Component |
49 |
50 | ## Styled Components React Native
51 |
52 | Below is a list of the Snippets available for React Native:
53 |
54 | | Snippet | Content |
55 | | ----------------------: | ----------------------------------------------------------------------------- |
56 | | `scrn-view →` | Creates a **View** Component |
57 | | `scrn-saview →` | Creates a **SafeAreaView** Component |
58 | | `scrn-kaview →` | Creates a **KeyboardAvoidingView** Compontent |
59 | | `scrn-text →` | Creates a **Text** Component |
60 | | `scrn-input →` | Creates a **Input** Component |
61 | | `scrn-button →` | Creates a **Button** Component |
62 | | `scrn-to →` | Creates a **TouchableOpacity** Component |
63 | | `scrn-thl →` | Creates a **TouchableHighlight** Component |
64 | | `scrn-flatlist →` | Creates a **FlatList** Component |
65 | | `scrn-image →` | Creates a **Image** Component |
66 |
67 |
68 | ## License
69 |
70 | Distributed under the *MIT license*. See `LICENSE` for more information.
71 |
72 |
73 | ## Contact
74 |
75 | Daniel Sousa - [Github](https://github.com/danielsousast) - **daniel.sousa.developer@gmail.com**
--------------------------------------------------------------------------------
/assets/code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/danielsousast/styled-components-snippets/28b20d67ae606a0c45fb33bd8cf1ac31156936b1/assets/code.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styled-components-snippets",
3 | "displayName": "Styled Components Snippets",
4 | "description": "Snippets for Styled Components ",
5 | "version": "0.3.0",
6 | "icon": "assets/code.png",
7 | "repository": {
8 | "type": "git",
9 | "url": "https://github.com/danielsousast/styled-components-snippets"
10 | },
11 | "publisher": "danielsousadev",
12 | "engines": {
13 | "vscode": "^1.42.0"
14 | },
15 | "categories": [
16 | "Snippets"
17 | ],
18 | "contributes": {
19 | "snippets": [
20 | {
21 | "language": "javascriptreact",
22 | "path": "./snippets/snippets.json"
23 | },
24 | {
25 | "language": "javascript",
26 | "path": "./snippets/snippets.json"
27 | },
28 | {
29 | "language": "typescript",
30 | "path": "./snippets/snippets.json"
31 | },
32 | {
33 | "language": "typescriptreact",
34 | "path": "./snippets/snippets.json"
35 | }
36 | ]
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/snippets/snippets.json:
--------------------------------------------------------------------------------
1 | {
2 | "styledNativeView": {
3 | "prefix": "scrn-view",
4 | "body": [
5 | "export const ${1} = styled.View`",
6 | "${2}",
7 | "`;"
8 | ],
9 | "description": "Styled View for React Native"
10 | },
11 | "styledNativeKeyboardAvoidingView": {
12 | "prefix": "scrn-kaview",
13 | "body": [
14 | "export const ${1} = styled.KeyboardAvoidingView`",
15 | "${2}",
16 | "`;"
17 | ],
18 | "description": "Styled KeyboardAvoidingView for React Native"
19 | },
20 | "styledNativeSafeAreaView": {
21 | "prefix": "scrn-saview",
22 | "body": [
23 | "export const ${1} = styled.SafeAreaView`",
24 | "${2}",
25 | "`;"
26 | ],
27 | "description": "Styled SafeAreaView for React Native"
28 | },
29 | "styledNativeScrollView": {
30 | "prefix": "scrn-scroll",
31 | "body": [
32 | "export const ${1} = styled.ScrollView`",
33 | "${2}",
34 | "`;"
35 | ],
36 | "description": "Styled ScrollView for React Native"
37 | },
38 | "styledNativeText": {
39 | "prefix": "scrn-text",
40 | "body": [
41 | "export const ${1} = styled.Text`",
42 | "${2}",
43 | "`;"
44 | ],
45 | "description": "Styed Text for React Native"
46 | },
47 | "styledNativeInput": {
48 | "prefix": "scrn-input",
49 | "body": [
50 | "export const ${1} = styled.TextInput`",
51 | "${2}",
52 | "`;"
53 | ],
54 | "description": "Create Styled TextInput for React Native"
55 | },
56 | "styledNativeButton": {
57 | "prefix": "scrn-button",
58 | "body": [
59 | "export const ${1} = styled.Button`",
60 | "${2}",
61 | "`;"
62 | ],
63 | "description": "Create Styled Button for React Native"
64 | },
65 | "styledNativImage": {
66 | "prefix": "scrn-image",
67 | "body": [
68 | "export const ${1} = styled.Image`",
69 | "${2}",
70 | "`;"
71 | ],
72 | "description": "Create Styled Image for React Native"
73 | },
74 | "styledNativeTouchableOpacity": {
75 | "prefix": "scrn-to",
76 | "body": [
77 | "export const ${1} = styled.TouchableOpacity`",
78 | "${2}",
79 | "`;"
80 | ],
81 | "description": "Styled TextInput for React Native"
82 | },
83 | "styledNativeTouchableHighlight": {
84 | "prefix": "scrn-thl",
85 | "body": [
86 | "export const ${1} = styled.TouchableHighlight`",
87 | "${2}",
88 | "`;"
89 | ],
90 | "description": "Styled TouchableHighlight for React Native"
91 | },
92 | "styledNativeFlatList": {
93 | "prefix": "scrn-flatlist",
94 | "body": [
95 | "export const ${1} = styled.FlatList`",
96 | "${2}",
97 | "`;"
98 | ],
99 | "description": "Styled FlatList for React Native"
100 | },
101 |
102 | "styledReactDiv": {
103 | "prefix": "scr-div",
104 | "body": [
105 | "export const ${1} = styled.div`",
106 | "${2}",
107 | "`;"
108 | ],
109 | "description": "Styled div for React"
110 | },
111 | "styledReactH1": {
112 | "prefix": "scr-h1",
113 | "body": [
114 | "export const ${1} = styled.h1`",
115 | "${2}",
116 | "`;"
117 | ],
118 | "description": "Styled h1 for React"
119 | },
120 | "styledReactH2": {
121 | "prefix": "scr-h2",
122 | "body": [
123 | "export const ${1} = styled.h2`",
124 | "${2}",
125 | "`;"
126 | ],
127 | "description": "Styled h2 for React"
128 | },
129 | "styledReactH3": {
130 | "prefix": "scr-h3",
131 | "body": [
132 | "export const ${1} = styled.h3`",
133 | "${2}",
134 | "`;"
135 | ],
136 | "description": "Styled h3 for React"
137 | },
138 | "styledReactH4": {
139 | "prefix": "scr-h4",
140 | "body": [
141 | "export const ${1} = styled.h4`",
142 | "${2}",
143 | "`;"
144 | ],
145 | "description": "Styled h4 for React"
146 | },
147 | "styledReacInput": {
148 | "prefix": "scr-input",
149 | "body": [
150 | "export const ${1} = styled.input`",
151 | "${2}",
152 | "`;"
153 | ],
154 | "description": "Styled input for React"
155 | },
156 | "styledReactTextArea": {
157 | "prefix": "scr-textarea",
158 | "body": [
159 | "export const ${1} = styled.textarea`",
160 | "${2}",
161 | "`;"
162 | ],
163 | "description": "Styled textarea for React"
164 | },
165 | "styledReactLabel": {
166 | "prefix": "scr-label",
167 | "body": [
168 | "export const ${1} = styled.label`",
169 | "${2}",
170 | "`;"
171 | ],
172 | "description": "Styled label for React"
173 | },
174 | "styledReactSelect": {
175 | "prefix": "scr-select",
176 | "body": [
177 | "export const ${1} = styled.select`",
178 | "${2}",
179 | "`;"
180 | ],
181 | "description": "Styled select for React"
182 | },
183 | "styledReactButton": {
184 | "prefix": "scr-button",
185 | "body": [
186 | "export const ${1} = styled.button`",
187 | "${2}",
188 | "`;"
189 | ],
190 | "description": "Styled button for React"
191 | },
192 | "styledReactForm": {
193 | "prefix": "scr-form",
194 | "body": [
195 | "export const ${1} = styled.form`",
196 | "${2}",
197 | "`;"
198 | ],
199 | "description": "Styled form for React"
200 | },
201 | "styledReactUl": {
202 | "prefix": "scr-ul",
203 | "body": [
204 | "export const ${1} = styled.ul`",
205 | "${2}",
206 | "`;"
207 | ],
208 | "description": "Styled ul for React"
209 | },
210 | "styledReactOl": {
211 | "prefix": "scr-ol",
212 | "body": [
213 | "export const ${1} = styled.ol`",
214 | "${2}",
215 | "`;"
216 | ],
217 | "description": "Styled ol for React"
218 | },
219 | "styledReactLi": {
220 | "prefix": "scr-li",
221 | "body": [
222 | "export const ${1} = styled.li`",
223 | "${2}",
224 | "`;"
225 | ],
226 | "description": "Styled li for React"
227 | },
228 | "styledReactHeader": {
229 | "prefix": "scr-header",
230 | "body": [
231 | "export const ${1} = styled.header`",
232 | "${2}",
233 | "`;"
234 | ],
235 | "description": "Styled header for React"
236 | },
237 | "styledReactMain": {
238 | "prefix": "scr-main",
239 | "body": [
240 | "export const ${1} = styled.main`",
241 | "${2}",
242 | "`;"
243 | ],
244 | "description": "Styled main for React"
245 | },
246 | "styledReactNav": {
247 | "prefix": "scr-nav",
248 | "body": [
249 | "export const ${1} = styled.nav`",
250 | "${2}",
251 | "`;"
252 | ],
253 | "description": "Styled nav for React"
254 | },
255 | "styledReactSection": {
256 | "prefix": "scr-section",
257 | "body": [
258 | "export const ${1} = styled.section`",
259 | "${2}",
260 | "`;"
261 | ],
262 | "description": "Styled section for React"
263 | },
264 | "styledReactAddress": {
265 | "prefix": "scr-address",
266 | "body": [
267 | "export const ${1} = styled.address`",
268 | "${2}",
269 | "`;"
270 | ],
271 | "description": "Styled address for React"
272 | },
273 | "styledReactArticle": {
274 | "prefix": "scr-article",
275 | "body": [
276 | "export const ${1} = styled.article`",
277 | "${2}",
278 | "`;"
279 | ],
280 | "description": "Styled article for React"
281 | },
282 | "styledReactAside": {
283 | "prefix": "scr-aside",
284 | "body": [
285 | "export const ${1} = styled.aside`",
286 | "${2}",
287 | "`;"
288 | ],
289 | "description": "Styled aside for React"
290 | },
291 | "styledReactFooter": {
292 | "prefix": "scr-footer",
293 | "body": [
294 | "export const ${1} = styled.footer`",
295 | "${2}",
296 | "`;"
297 | ],
298 | "description": "Styled footer for React"
299 | },
300 | "styledReactLink": {
301 | "prefix": "scr-a",
302 | "body": [
303 | "export const ${1} = styled.a`",
304 | "${2}",
305 | "`;"
306 | ],
307 | "description": "Styled a for React"
308 | },
309 | "styledReactSpan": {
310 | "prefix": "scr-span",
311 | "body": [
312 | "export const ${1} = styled.span`",
313 | "${2}",
314 | "`;"
315 | ],
316 | "description": "Styled span for React"
317 | },
318 | "styledReactTable": {
319 | "prefix": "scr-table",
320 | "body": [
321 | "export const ${1} = styled.table`",
322 | "${2}",
323 | "`;"
324 | ],
325 | "description": "Styled table for React"
326 | }
327 | }
--------------------------------------------------------------------------------
/test.js:
--------------------------------------------------------------------------------
1 | export const t = styled.button`
2 |
3 | `;
--------------------------------------------------------------------------------
/vsc-extension-quickstart.md:
--------------------------------------------------------------------------------
1 | # Welcome to your VS Code Extension
2 |
3 | ## What's in the folder
4 |
5 | * This folder contains all of the files necessary for your extension.
6 | * `package.json` - this is the manifest file that defines the location of the snippet file and specifies the language of the snippets.
7 | * `snippets/snippets.json` - the file containing all snippets.
8 |
9 | ## Get up and running straight away
10 |
11 | * Press `F5` to open a new window with your extension loaded.
12 | * Create a new file with a file name suffix matching your language.
13 | * Verify that your snippets are proposed on intellisense.
14 |
15 | ## Make changes
16 |
17 | * You can relaunch the extension from the debug toolbar after making changes to the files listed above.
18 | * You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes.
19 |
20 | ## Install your extension
21 |
22 | * To start using your extension with Visual Studio Code copy it into the `/.vscode/extensions` folder and restart Code.
23 | * To share your extension with the world, read on https://code.visualstudio.com/docs about publishing an extension.
24 |
--------------------------------------------------------------------------------