Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9bf85aa

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

File tree

3 files changed

+88
-70
lines changed

3 files changed

+88
-70
lines changed

‎.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\t0ドル",
@@ -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\t0ドル",
@@ -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\t0ドル",
@@ -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\t0ドル",
@@ -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\t0ドル",
@@ -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)

AltStyle によって変換されたページ (->オリジナル) /