Skip to content

Commit 9bf85aa

Browse files
Damian SznajderDamian Sznajder
Damian Sznajder
authored and
Damian Sznajder
committed
✨ Typescript working with search
1 parent 7ab4472 commit 9bf85aa

3 files changed

Lines changed: 88 additions & 70 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,7 @@
77
"out": true // set this to false to include "out" folder in search results
88
},
99
// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
10-
"typescript.tsc.autoDetect": "off"
10+
"typescript.tsc.autoDetect": "off",
11+
"prettier.semi": false,
12+
"prettier.singleQuote": true
1113
}

‎extension/index.ts‎

Lines changed: 42 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,17 @@
22
// Import the module and reference it with the alias vscode in your code below
33
import * as vscode from 'vscode'
44

5-
const snippets = require('../snippets/snippets.json')
5+
const jsSnippets = require('../snippets/snippets.json')
6+
const tsSnippets = require('../snippets/ts-snippets.json')
67

78
type Snippet = {
89
body: Array<string> | string
910
description: string
1011
prefix: Array<string> | string
1112
}
1213

13-
const convertSnippetArrayToString = (snippetArray: Array<string>): string => snippetArray.join('\n')
14+
const convertSnippetArrayToString = (snippetArray: Array<string>): string =>
15+
snippetArray.join('\n')
1416

1517
// this method is called when your extension is activated
1618
// your extension is activated the very first time the command is executed
@@ -22,33 +24,47 @@ export function activate(context: vscode.ExtensionContext) {
2224
// The command has been defined in the package.json file
2325
// Now provide the implementation of the command with registerCommand
2426
// The commandId parameter must match the command field in package.json
25-
let disposable = vscode.commands.registerCommand('extension.snippetSearch', async () => {
26-
const items = Object.entries(snippets as Array<Snippet>).map(
27-
([shortDescription, { prefix, body, description }], index) => {
28-
const value = typeof prefix === 'string' ? prefix : prefix[0]
29-
30-
return {
31-
id: index,
32-
description: description || shortDescription,
33-
label: value,
34-
value,
35-
body,
27+
const disposable = vscode.commands.registerCommand(
28+
'extension.snippetSearch',
29+
async () => {
30+
const javascriptSnippets = Object.entries(jsSnippets as Array<Snippet>)
31+
const typescriptSnippets = Object.entries(tsSnippets as Array<Snippet>)
32+
const snippetsArray: Array<[string, Snippet]> = javascriptSnippets.concat(
33+
typescriptSnippets
34+
)
35+
36+
const items = snippetsArray.map(
37+
([shortDescription, { prefix, body, description }], index) => {
38+
const value = typeof prefix === 'string' ? prefix : prefix[0]
39+
40+
return {
41+
id: index,
42+
description: description || shortDescription,
43+
label: value,
44+
value,
45+
body
46+
}
3647
}
37-
},
38-
)
48+
)
3949

40-
const options = {
41-
matchOnDescription: true,
42-
matchOnDetail: true,
43-
placeHolder: 'Search snippet',
44-
}
50+
const options = {
51+
matchOnDescription: true,
52+
matchOnDetail: true,
53+
placeHolder: 'Search snippet'
54+
}
4555

46-
const snippet = (await vscode.window.showQuickPick(items, options)) || { body: '' }
47-
const activeTextEditor = vscode.window.activeTextEditor
48-
const body =
49-
typeof snippet.body === 'string' ? snippet.body : convertSnippetArrayToString(snippet.body)
50-
activeTextEditor && activeTextEditor.insertSnippet(new vscode.SnippetString(body))
51-
})
56+
const snippet = (await vscode.window.showQuickPick(items, options)) || {
57+
body: ''
58+
}
59+
const activeTextEditor = vscode.window.activeTextEditor
60+
const body =
61+
typeof snippet.body === 'string'
62+
? snippet.body
63+
: convertSnippetArrayToString(snippet.body)
64+
activeTextEditor &&
65+
activeTextEditor.insertSnippet(new vscode.SnippetString(body))
66+
}
67+
)
5268

5369
context.subscriptions.push(disposable)
5470
}

‎snippets/ts-snippets.json‎

Lines changed: 43 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
{
2-
"reactClassComponent": {
3-
"prefix": "rcc",
2+
"typeScriptReactClassComponent": {
3+
"prefix": "tsrcc",
44
"body": [
55
"import React, { Component } from 'react'",
66
"",
7-
"export interface I${1:${TM_FILENAME_BASE}}Props {",
7+
"interface Props {",
88
"\t",
99
"}",
10-
"export interface I${1:${TM_FILENAME_BASE}}State {",
10+
"interface State {",
1111
"\t",
1212
"}",
1313
"",
14-
"export default class ${1:${TM_FILENAME_BASE}} extends Component<I${1:${TM_FILENAME_BASE}}Props, I${1:${TM_FILENAME_BASE}}State> {",
14+
"export default class ${1:${TM_FILENAME_BASE}} extends Component<Props, State> {",
1515
"\tstate = {}",
1616
"",
1717
"\trender() {",
@@ -26,19 +26,19 @@
2626
],
2727
"description": "Creates a React component class with ES7 module system and TypeScript interfaces"
2828
},
29-
"reactClassExportComponent": {
30-
"prefix": "rce",
29+
"typeScriptReactClassExportComponent": {
30+
"prefix": "tsrce",
3131
"body": [
3232
"import React, { Component } from 'react'",
3333
"",
34-
"export interface I${1:${TM_FILENAME_BASE}}Props {",
34+
"interface Props {",
3535
"\t",
3636
"}",
37-
"export interface I${1:${TM_FILENAME_BASE}}State {",
37+
"interface State {",
3838
"\t",
3939
"}",
4040
"",
41-
"class ${1:${TM_FILENAME_BASE}} extends Component<I${1:${TM_FILENAME_BASE}}Props, I${1:${TM_FILENAME_BASE}}State> {",
41+
"class ${1:${TM_FILENAME_BASE}} extends Component<Props, State> {",
4242
"\tstate = {}",
4343
"",
4444
"\trender() {",
@@ -55,16 +55,16 @@
5555
],
5656
"description": "Creates a React component class with ES7 module system and TypeScript interfaces"
5757
},
58-
"reactFunctionalExportComponent": {
59-
"prefix": "rfce",
58+
"typeScriptReactFunctionalExportComponent": {
59+
"prefix": "tsrfce",
6060
"body": [
6161
"import React from 'react'",
6262
"",
63-
"export interface I${1:${TM_FILENAME_BASE}}Props {",
63+
"interface Props {",
6464
"\t",
6565
"}",
6666
"",
67-
"function ${1:${TM_FILENAME_BASE}}(): I${1:${TM_FILENAME_BASE}}Props {",
67+
"function ${1:${TM_FILENAME_BASE}}(): Props {",
6868
"\treturn (",
6969
"\t\t<div>",
7070
"\t\t\t$0",
@@ -77,16 +77,16 @@
7777
],
7878
"description": "Creates a React Functional Component with ES7 module system and TypeScript interface"
7979
},
80-
"reactFunctionalComponent": {
81-
"prefix": "rfc",
80+
"typeScriptReactFunctionalComponent": {
81+
"prefix": "tsrfc",
8282
"body": [
8383
"import React from 'react'",
8484
"",
85-
"export interface I${1:${TM_FILENAME_BASE}}Props {",
85+
"interface Props {",
8686
"\t",
8787
"}",
8888
"",
89-
"export default function ${1:${TM_FILENAME_BASE}}(): I${1:${TM_FILENAME_BASE}}Props {",
89+
"export default function ${1:${TM_FILENAME_BASE}}(): Props {",
9090
"\treturn (",
9191
"\t\t<div>",
9292
"\t\t\t$0",
@@ -97,16 +97,16 @@
9797
],
9898
"description": "Creates a React Functional Component with ES7 module system and TypeScript interface"
9999
},
100-
"reactArrowFunctionExportComponent": {
101-
"prefix": "rafce",
100+
"typeScriptReactArrowFunctionExportComponent": {
101+
"prefix": "tsrafce",
102102
"body": [
103103
"import React from 'react'",
104104
"",
105-
"export interface I${1:${TM_FILENAME_BASE}}Props {",
105+
"interface Props {",
106106
"\t",
107107
"}",
108108
"",
109-
"const ${1:${TM_FILENAME_BASE}}: React.FC<I${1:${TM_FILENAME_BASE}}Props> = () => {",
109+
"const ${1:${TM_FILENAME_BASE}}: React.FC<Props> = () => {",
110110
"\treturn (",
111111
"\t\t<div>",
112112
"\t\t\t$0",
@@ -119,16 +119,16 @@
119119
],
120120
"description": "Creates a React Arrow Function Component with ES7 module system and TypeScript interface"
121121
},
122-
"reactArrowFunctionComponent": {
123-
"prefix": "rafc",
122+
"typeScriptReactArrowFunctionComponent": {
123+
"prefix": "tsrafc",
124124
"body": [
125125
"import React from 'react'",
126126
"",
127-
"export interface I${1:${TM_FILENAME_BASE}}Props {",
127+
"interface Props {",
128128
"\t",
129129
"}",
130130
"",
131-
"export const ${1:${TM_FILENAME_BASE}}: React.FC<I${1:${TM_FILENAME_BASE}}Props> = () => {",
131+
"export const ${1:${TM_FILENAME_BASE}}: React.FC<Props> = () => {",
132132
"\treturn (",
133133
"\t\t<div>",
134134
"\t\t\t$0",
@@ -139,16 +139,16 @@
139139
],
140140
"description": "Creates a React Arrow Function Component with ES7 module system and TypeScript interfaces"
141141
},
142-
"reactClassPureComponent": {
143-
"prefix": "rpc",
142+
"typeScriptReactClassPureComponent": {
143+
"prefix": "tsrpc",
144144
"body": [
145145
"import React, { PureComponent } from 'react'",
146146
"",
147-
"export interface I${1:${TM_FILENAME_BASE}}Props {",
147+
"interface Props {",
148148
"\t",
149149
"}",
150150
"",
151-
"export default class ${1:${TM_FILENAME_BASE}} extends PureComponent<I${1:${TM_FILENAME_BASE}}Props> {",
151+
"export default class ${1:${TM_FILENAME_BASE}} extends PureComponent<Props> {",
152152
"\trender() {",
153153
"\t\treturn (",
154154
"\t\t\t<div>",
@@ -161,16 +161,16 @@
161161
],
162162
"description": "Creates a React pure component class with ES7 module system and TypeScript interface"
163163
},
164-
"reactClassExportPureComponent": {
165-
"prefix": "rpce",
164+
"typeScriptReactClassExportPureComponent": {
165+
"prefix": "tsrpce",
166166
"body": [
167167
"import React, { PureComponent } from 'react'",
168168
"",
169-
"export interface I${1:${TM_FILENAME_BASE}}Props {",
169+
"interface Props {",
170170
"\t",
171171
"}",
172172
"",
173-
"class ${1:${TM_FILENAME_BASE}} extends PureComponent<I${1:${TM_FILENAME_BASE}}Props> {",
173+
"class ${1:${TM_FILENAME_BASE}} extends PureComponent<Props> {",
174174
"\trender() {",
175175
"\t\treturn (",
176176
"\t\t\t<div>",
@@ -185,16 +185,16 @@
185185
],
186186
"description": "Creates a React pure component class with ES7 module system and TypeScript interface"
187187
},
188-
"reactFunctionMemoComponent": {
189-
"prefix": "rmc",
188+
"typeScriptReactFunctionMemoComponent": {
189+
"prefix": "tsrmc",
190190
"body": [
191191
"import React, { memo } from 'react'",
192192
"",
193-
"export interface I${1:${TM_FILENAME_BASE}}Props {",
193+
"interface Props {",
194194
"\t",
195195
"}",
196196
"",
197-
"export default memo(function ${1:${TM_FILENAME_BASE}}({}: I${1:${TM_FILENAME_BASE}}Props) {",
197+
"export default memo(function ${1:${TM_FILENAME_BASE}}({}: Props) {",
198198
"\treturn (",
199199
"\t\t<div>",
200200
"\t\t\t$0",
@@ -205,20 +205,20 @@
205205
],
206206
"description": "Creates a React Memo Function Component with ES7 module system and TypeScript interface"
207207
},
208-
"reactClassCompomentRedux": {
209-
"prefix": "rcredux",
208+
"typeScriptReactClassCompomentRedux": {
209+
"prefix": "tsrcredux",
210210
"body": [
211211
"import React, { Component } from 'react'",
212212
"import { connect } from 'react-redux'",
213213
"",
214-
"export interface I${1:${TM_FILENAME_BASE}}Props {",
214+
"interface Props {",
215215
"\t",
216216
"}",
217-
"export interface I${1:${TM_FILENAME_BASE}}State {",
217+
"interface State {",
218218
"\t",
219219
"}",
220220
"",
221-
"export class ${1:${TM_FILENAME_BASE}} extends Component<I${1:${TM_FILENAME_BASE}}Props, I${1:${TM_FILENAME_BASE}}State> {",
221+
"export class ${1:${TM_FILENAME_BASE}} extends Component<Props, State> {",
222222
"\tstate = {}",
223223
"",
224224
"\trender() {",

0 commit comments

Comments
 (0)