diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 2987096..7731ae6 100644
--- a/.vscode/extensions.json
+++ b/.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"]
 }
diff --git a/.vscode/launch.json b/.vscode/launch.json
index e0b27b7..9647865 100644
--- a/.vscode/launch.json
+++ b/.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": [
diff --git a/.vscode/settings.json b/.vscode/settings.json
index ffeaf91..6d9419c 100644
--- a/.vscode/settings.json
+++ b/.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
 }
diff --git a/.vscode/tasks.json b/.vscode/tasks.json
index 078ff7e..34edf97 100644
--- a/.vscode/tasks.json
+++ b/.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": [
diff --git a/extension/index.ts b/extension/index.ts
index f5c0663..e36127f 100644
--- a/extension/index.ts
+++ b/extension/index.ts
@@ -2,7 +2,8 @@
 // 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> &#124; string
@@ -10,7 +11,8 @@ type Snippet = {
 prefix: Array<string> &#124; 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 &#124;&#124; 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 &#124;&#124; 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)) &#124;&#124; { 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)) &#124;&#124; {
+ 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)
 }
diff --git a/snippets/ts-snippets.json b/snippets/ts-snippets.json
index 6a34010..ebe35fd 100644
--- a/snippets/ts-snippets.json
+++ b/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\t0ドル",
@@ -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\t0ドル",
@@ -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\t0ドル",
@@ -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\t0ドル",
@@ -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\t0ドル",
@@ -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() {",
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://patch-diff.githubusercontent.com/raw/r5n-labs/vscode-react-javascript-snippets/pull/79.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://patch-diff.githubusercontent.com/raw/r5n-labs/vscode-react-javascript-snippets/pull/79.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>