✨ Typescript working with search

.vscode/extensions.json

@@ -1,5 +1,3 @@
 {
-  // See http://go.microsoft.com/fwlink/?LinkId=827846
-  // for the documentation about the extensions.json format
   "recommendations": ["ms-vscode.vscode-typescript-tslint-plugin"]
 }

.vscode/launch.json

@@ -1,7 +1,3 @@
-// A launch configuration that compiles the extension and then opens it inside a new window
-// Use IntelliSense to learn about possible attributes.
-// Hover to view descriptions of existing attributes.
-// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 {
   "version": "0.2.0",
   "configurations": [

.vscode/settings.json

@@ -1,11 +1,11 @@
-// Place your settings in this file to overwrite default and user settings.
 {
   "files.exclude": {
-    "out": false // set this to true to hide the "out" folder with the compiled JS files
+    "out": false
   },
   "search.exclude": {
-    "out": true // set this to false to include "out" folder in search results
+    "out": true
   },
-  // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-  "typescript.tsc.autoDetect": "off"
+  "typescript.tsc.autoDetect": "off",
+  "prettier.semi": false,
+  "prettier.singleQuote": true
 }

.vscode/tasks.json

@@ -1,5 +1,3 @@
-// See https://go.microsoft.com/fwlink/?LinkId=733558
-// for the documentation about the tasks.json format
 {
   "version": "2.0.0",
   "tasks": [

extension/index.ts

@@ -2,15 +2,17 @@
 // Import the module and reference it with the alias vscode in your code below
 import * as vscode from 'vscode'
 
-const snippets = require('../snippets/snippets.json')
+const jsSnippets = require('../snippets/snippets.json')
+const tsSnippets = require('../snippets/ts-snippets.json')
 
 type Snippet = {
   body: Array<string> | string
   description: string
   prefix: Array<string> | string
 }
 
-const convertSnippetArrayToString = (snippetArray: Array<string>): string => snippetArray.join('\n')
+const convertSnippetArrayToString = (snippetArray: Array<string>): string =>
+  snippetArray.join('\n')
 
 // this method is called when your extension is activated
 // your extension is activated the very first time the command is executed
@@ -22,33 +24,47 @@ export function activate(context: vscode.ExtensionContext) {
   // The command has been defined in the package.json file
   // Now provide the implementation of the command with registerCommand
   // The commandId parameter must match the command field in package.json
-  let disposable = vscode.commands.registerCommand('extension.snippetSearch', async () => {
-    const items = Object.entries(snippets as Array<Snippet>).map(
-      ([shortDescription, { prefix, body, description }], index) => {
-        const value = typeof prefix === 'string' ? prefix : prefix[0]
-
-        return {
-          id: index,
-          description: description || shortDescription,
-          label: value,
-          value,
-          body,
+  const disposable = vscode.commands.registerCommand(
+    'extension.snippetSearch',
+    async () => {
+      const javascriptSnippets = Object.entries(jsSnippets as Array<Snippet>)
+      const typescriptSnippets = Object.entries(tsSnippets as Array<Snippet>)
+      const snippetsArray: Array<[string, Snippet]> = javascriptSnippets.concat(
+        typescriptSnippets
+      )
+
+      const items = snippetsArray.map(
+        ([shortDescription, { prefix, body, description }], index) => {
+          const value = typeof prefix === 'string' ? prefix : prefix[0]
+
+          return {
+            id: index,
+            description: description || shortDescription,
+            label: value,
+            value,
+            body
+          }
         }
-      },
-    )
+      )
 
-    const options = {
-      matchOnDescription: true,
-      matchOnDetail: true,
-      placeHolder: 'Search snippet',
-    }
+      const options = {
+        matchOnDescription: true,
+        matchOnDetail: true,
+        placeHolder: 'Search snippet'
+      }
 
-    const snippet = (await vscode.window.showQuickPick(items, options)) || { body: '' }
-    const activeTextEditor = vscode.window.activeTextEditor
-    const body =
-      typeof snippet.body === 'string' ? snippet.body : convertSnippetArrayToString(snippet.body)
-    activeTextEditor && activeTextEditor.insertSnippet(new vscode.SnippetString(body))
-  })
+      const snippet = (await vscode.window.showQuickPick(items, options)) || {
+        body: ''
+      }
+      const activeTextEditor = vscode.window.activeTextEditor
+      const body =
+        typeof snippet.body === 'string'
+          ? snippet.body
+          : convertSnippetArrayToString(snippet.body)
+      activeTextEditor &&
+        activeTextEditor.insertSnippet(new vscode.SnippetString(body))
+    }
+  )
 
   context.subscriptions.push(disposable)
 }

snippets/ts-snippets.json

@@ -1,17 +1,17 @@
 {
-  "reactClassComponent": {
-    "prefix": "rcc",
+  "typeScriptReactClassComponent": {
+    "prefix": "tsrcc",
     "body": [
       "import React, { Component } from 'react'",
       "",
-      "export interface I${1:${TM_FILENAME_BASE}}Props {",
+      "interface Props {",
       "\t",
       "}",
-      "export interface I${1:${TM_FILENAME_BASE}}State {",
+      "interface State {",
       "\t",
       "}",
       "",
-      "export default class ${1:${TM_FILENAME_BASE}} extends Component<I${1:${TM_FILENAME_BASE}}Props, I${1:${TM_FILENAME_BASE}}State> {",
+      "export default class ${1:${TM_FILENAME_BASE}} extends Component<Props, State> {",
       "\tstate = {}",
       "",
       "\trender() {",
@@ -26,19 +26,19 @@
     ],
     "description": "Creates a React component class with ES7 module system and TypeScript interfaces"
   },
-  "reactClassExportComponent": {
-    "prefix": "rce",
+  "typeScriptReactClassExportComponent": {
+    "prefix": "tsrce",
     "body": [
       "import React, { Component } from 'react'",
       "",
-      "export interface I${1:${TM_FILENAME_BASE}}Props {",
+      "interface Props {",
       "\t",
       "}",
-      "export interface I${1:${TM_FILENAME_BASE}}State {",
+      "interface State {",
       "\t",
       "}",
       "",
-      "class ${1:${TM_FILENAME_BASE}} extends Component<I${1:${TM_FILENAME_BASE}}Props, I${1:${TM_FILENAME_BASE}}State> {",
+      "class ${1:${TM_FILENAME_BASE}} extends Component<Props, State> {",
       "\tstate = {}",
       "",
       "\trender() {",
@@ -55,16 +55,16 @@
     ],
     "description": "Creates a React component class with ES7 module system and TypeScript interfaces"
   },
-  "reactFunctionalExportComponent": {
-    "prefix": "rfce",
+  "typeScriptReactFunctionalExportComponent": {
+    "prefix": "tsrfce",
     "body": [
       "import React from 'react'",
       "",
-      "export interface I${1:${TM_FILENAME_BASE}}Props {",
+      "interface Props {",
       "\t",
       "}",
       "",
-      "function ${1:${TM_FILENAME_BASE}}(): I${1:${TM_FILENAME_BASE}}Props {",
+      "function ${1:${TM_FILENAME_BASE}}(): Props {",
       "\treturn (",
       "\t\t<div>",
       "\t\t\t$0",
@@ -77,16 +77,16 @@
     ],
     "description": "Creates a React Functional Component with ES7 module system and TypeScript interface"
   },
-  "reactFunctionalComponent": {
-    "prefix": "rfc",
+  "typeScriptReactFunctionalComponent": {
+    "prefix": "tsrfc",
     "body": [
       "import React from 'react'",
       "",
-      "export interface I${1:${TM_FILENAME_BASE}}Props {",
+      "interface Props {",
       "\t",
       "}",
       "",
-      "export default function ${1:${TM_FILENAME_BASE}}(): I${1:${TM_FILENAME_BASE}}Props {",
+      "export default function ${1:${TM_FILENAME_BASE}}(): Props {",
       "\treturn (",
       "\t\t<div>",
       "\t\t\t$0",
@@ -97,16 +97,16 @@
     ],
     "description": "Creates a React Functional Component with ES7 module system and TypeScript interface"
   },
-  "reactArrowFunctionExportComponent": {
-    "prefix": "rafce",
+  "typeScriptReactArrowFunctionExportComponent": {
+    "prefix": "tsrafce",
     "body": [
       "import React from 'react'",
       "",
-      "export interface I${1:${TM_FILENAME_BASE}}Props {",
+      "interface Props {",
       "\t",
       "}",
       "",
-      "const ${1:${TM_FILENAME_BASE}}: React.FC<I${1:${TM_FILENAME_BASE}}Props> = () => {",
+      "const ${1:${TM_FILENAME_BASE}}: React.FC<Props> = () => {",
       "\treturn (",
       "\t\t<div>",
       "\t\t\t$0",
@@ -119,16 +119,16 @@
     ],
     "description": "Creates a React Arrow Function Component with ES7 module system and TypeScript interface"
   },
-  "reactArrowFunctionComponent": {
-    "prefix": "rafc",
+  "typeScriptReactArrowFunctionComponent": {
+    "prefix": "tsrafc",
     "body": [
       "import React from 'react'",
       "",
-      "export interface I${1:${TM_FILENAME_BASE}}Props {",
+      "interface Props {",
       "\t",
       "}",
       "",
-      "export const ${1:${TM_FILENAME_BASE}}: React.FC<I${1:${TM_FILENAME_BASE}}Props> = () => {",
+      "export const ${1:${TM_FILENAME_BASE}}: React.FC<Props> = () => {",
       "\treturn (",
       "\t\t<div>",
       "\t\t\t$0",
@@ -139,16 +139,16 @@
     ],
     "description": "Creates a React Arrow Function Component with ES7 module system and TypeScript interfaces"
   },
-  "reactClassPureComponent": {
-    "prefix": "rpc",
+  "typeScriptReactClassPureComponent": {
+    "prefix": "tsrpc",
     "body": [
       "import React, { PureComponent } from 'react'",
       "",
-      "export interface I${1:${TM_FILENAME_BASE}}Props {",
+      "interface Props {",
       "\t",
       "}",
       "",
-      "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent<I${1:${TM_FILENAME_BASE}}Props> {",
+      "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent<Props> {",
       "\trender() {",
       "\t\treturn (",
       "\t\t\t<div>",
@@ -161,16 +161,16 @@
     ],
     "description": "Creates a React pure component class with ES7 module system and TypeScript interface"
   },
-  "reactClassExportPureComponent": {
-    "prefix": "rpce",
+  "typeScriptReactClassExportPureComponent": {
+    "prefix": "tsrpce",
     "body": [
       "import React, { PureComponent } from 'react'",
       "",
-      "export interface I${1:${TM_FILENAME_BASE}}Props {",
+      "interface Props {",
       "\t",
       "}",
       "",
-      "class ${1:${TM_FILENAME_BASE}} extends PureComponent<I${1:${TM_FILENAME_BASE}}Props> {",
+      "class ${1:${TM_FILENAME_BASE}} extends PureComponent<Props> {",
       "\trender() {",
       "\t\treturn (",
       "\t\t\t<div>",
@@ -185,16 +185,16 @@
     ],
     "description": "Creates a React pure component class with ES7 module system and TypeScript interface"
   },
-  "reactFunctionMemoComponent": {
-    "prefix": "rmc",
+  "typeScriptReactFunctionMemoComponent": {
+    "prefix": "tsrmc",
     "body": [
       "import React, { memo } from 'react'",
       "",
-      "export interface I${1:${TM_FILENAME_BASE}}Props {",
+      "interface Props {",
       "\t",
       "}",
       "",
-      "export default memo(function ${1:${TM_FILENAME_BASE}}({}: I${1:${TM_FILENAME_BASE}}Props) {",
+      "export default memo(function ${1:${TM_FILENAME_BASE}}({}: Props) {",
       "\treturn (",
       "\t\t<div>",
       "\t\t\t$0",
@@ -205,20 +205,20 @@
     ],
     "description": "Creates a React Memo Function Component with ES7 module system and TypeScript interface"
   },
-  "reactClassCompomentRedux": {
-    "prefix": "rcredux",
+  "typeScriptReactClassCompomentRedux": {
+    "prefix": "tsrcredux",
     "body": [
       "import React, { Component } from 'react'",
       "import { connect } from 'react-redux'",
       "",
-      "export interface I${1:${TM_FILENAME_BASE}}Props {",
+      "interface Props {",
       "\t",
       "}",
-      "export interface I${1:${TM_FILENAME_BASE}}State {",
+      "interface State {",
       "\t",
       "}",
       "",
-      "export class ${1:${TM_FILENAME_BASE}} extends Component<I${1:${TM_FILENAME_BASE}}Props, I${1:${TM_FILENAME_BASE}}State> {",
+      "export class ${1:${TM_FILENAME_BASE}} extends Component<Props, State> {",
       "\tstate = {}",
       "",
       "\trender() {",