Skip to content

Commit 3c74f23

Browse files
Damian SznajderDamian Sznajder
Damian Sznajder
authored and
Damian Sznajder
committed
feat: add initial settings for extension
1 parent 42fa163 commit 3c74f23

12 files changed

+1239
-1391
lines changed

‎.github/workflows/typescript_and_lint.yml

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
name: Typescript & lint
2+
3+
on: :push
4+
5+
jobs:
6+
lint:
7+
runs-on: ubuntu-latest
8+
steps:
9+
- uses: actions/checkout@v2
10+
- uses: actions/setup-node@v2
11+
with:
12+
node-version: "16"
13+
14+
- uses: actions/cache@v2
15+
id: yarn-cache
16+
with:
17+
path: "**/node_modules"
18+
key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
19+
20+
- name: Install
21+
run: yarn install --frozen-lockfile
22+
23+
- name: Lint
24+
run: yarn lint
25+
26+
- name: Typescript
27+
run: yarn typescript

‎.vscodeignore

+1
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ src/**
33
.gitignore
44
**/tsconfig.json
55
*.ts
6+
webpack.config.js

‎package.json

+69-23
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
{
22
"name": "es7-react-js-snippets",
3-
"displayName": "ES7+ React/Redux/GraphQL/React-Native snippets",
4-
"description": "Simple extensions for React, Redux and Graphql in JS/TS with ES7+ syntax",
3+
"displayName": "ES7+ React/Redux/React-Native snippets",
4+
"description": "Extensions for React (React-Native), Redux and GraphQL snippets in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.",
55
"version": "3.2.0",
66
"publisher": "dsznajder",
77
"icon": "images/logo.png",
8+
"browser": "./lib/index.js",
9+
"main": "./lib/index.js",
810
"keywords": [
911
"snippets",
1012
"react",
1113
"redux",
1214
"react-native",
15+
"customizable",
1316
"javascript",
14-
"typescript"
17+
"typescript",
18+
"prettier"
1519
],
1620
"license": "MIT",
1721
"repository": {
1822
"type": "git",
1923
"url": "https://github.com/dsznajder/vscode-es7-javascript-react-snippets"
2024
},
2125
"engines": {
22-
"vscode": "^1.45.0"
26+
"vscode": "^1.60.0"
2327
},
2428
"categories": [
2529
"Snippets"
@@ -28,32 +32,74 @@
2832
"ui",
2933
"workspace"
3034
],
31-
"browser": "./out/extension.js",
32-
"main": "./lib/index.js",
3335
"capabilities": {
3436
"virtualWorkspaces": true,
3537
"untrustedWorkspaces": {
3638
"supported": true
3739
}
3840
},
3941
"activationEvents": [
40-
"onCommand:extension.snippetSearch"
42+
"onCommand:esReactSnippets.search"
4143
],
4244
"contributes": {
4345
"commands": [
4446
{
45-
"command": "extension.snippetSearch",
46-
"title": "ES7 snippet search"
47+
"command": "esReactSnippets.search",
48+
"title": "Snippet search"
4749
}
4850
],
4951
"keybindings": [
5052
{
51-
"command": "extension.snippetSearch",
53+
"command": "esReactSnippets.search",
5254
"key": "ctrl+alt+r",
5355
"mac": "shift+cmd+r",
5456
"when": "editorTextFocus"
5557
}
5658
],
59+
"configuration": {
60+
"title": "ES React/React-Native/Redux snippets",
61+
"properties": {
62+
"esReactSnippets.settings.prettierEnabled": {
63+
"type": "boolean",
64+
"markdownDescription": "Integrate prettier settings with code generated from snippets.",
65+
"default": true
66+
},
67+
"esReactSnippets.settings.importReactOnTop": {
68+
"type": "boolean",
69+
"markdownDescription": "Controls if snippets should add `import React from 'react';` at the top of components.\nPreviously components like that were used with `_` prefix.",
70+
"default": true
71+
},
72+
"esReactSnippets.settings.typescript": {
73+
"type": "boolean",
74+
"markdownDescription": "Controls if React components have typescript Props typing.",
75+
"default": false
76+
},
77+
"esReactSnippets.settings.semiColons": {
78+
"type": "boolean",
79+
"markdownDescription": "Controls if snippets should use semi colons.\nOnly applies when `#esReactSnippets.settings.prettierEnabled#` is disabled",
80+
"default": true
81+
},
82+
"esReactSnippets.settings.singleQuote": {
83+
"type": "boolean",
84+
"markdownDescription": "Controls if snippets should use single quotes.\nOnly applies when `#esReactSnippets.settings.prettierEnabled#` is disabled",
85+
"default": true
86+
},
87+
"esReactSnippets.settings.tabWidth": {
88+
"type": "number",
89+
"markdownDescription": "Controls how many spaces snippets will have.\nOnly applies when `#esReactSnippets.settings.prettierEnabled#` is disabled",
90+
"default": 2
91+
},
92+
"esReactSnippets.settings.componentPropsPrefix": {
93+
"type": "string",
94+
"markdownDescription": "Controls which prefix snippets should use for component props.\nOnly applies when `#esReactSnippets.settings.typescript#` is enabled.",
95+
"default": "type",
96+
"enum": [
97+
"type",
98+
"interface"
99+
]
100+
}
101+
}
102+
},
57103
"snippets": [
58104
{
59105
"language": "javascript",
@@ -82,28 +128,28 @@
82128
]
83129
},
84130
"scripts": {
85-
"vscode:prepublish": "yarn run package",
86-
"compile": "tsc -p ./ --noEmit false --outDir lib/",
87-
"compile:web": "webpack --mode production --devtool hidden-source-map",
131+
"vscode:prepublish": "yarn compile",
132+
"compile": "rm -rf lib; tsc -p ./ --noEmit false --module commonjs --outDir lib",
133+
"lint": "eslint --ext .js,.ts,.tsx ./src/",
88134
"watch": "tsc -watch -p ./",
89-
"watch:web": "webpack --watch",
90-
"package": "yarn compile && webpack --mode production --devtool hidden-source-map",
91135
"typescript": "tsc --noEmit"
92136
},
93137
"dependencies": {
138+
"prettier": "2.5.1",
94139
"vscode": "1.1.37"
95140
},
96141
"devDependencies": {
97-
"@types/node": "16.9.6",
98-
"@types/vscode": "1.60.0",
99-
"eslint": "7.32.0",
142+
"@babel/cli": "7.16.0",
143+
"@babel/preset-typescript": "7.16.5",
144+
"@types/node": "17.0.4",
145+
"@types/prettier": "2.4.2",
146+
"@types/vscode": "1.63.1",
147+
"esbuild": "0.14.8",
148+
"eslint": "8.5.0",
100149
"eslint-config-satya164": "3.1.10",
101150
"eslint-plugin-simple-import-sort": "7.0.0",
102-
"prettier": "2.4.1",
103-
"ts-loader": "^9.2.6",
104-
"typescript": "4.4.3",
105-
"webpack": "^5.64.4",
106-
"webpack-cli": "^4.9.1"
151+
"prettier": "2.5.1",
152+
"typescript": "4.5.4"
107153
},
108154
"prettier": {
109155
"bracketSameLine": false,

‎src/helpers.ts

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import prettier, { Options } from "prettier";
2+
import { workspace } from "vscode";
3+
4+
export type ExtensionSettings = {
5+
prettierEnabled: boolean;
6+
semiColons: boolean;
7+
importReactOnTop: boolean;
8+
quotes: boolean;
9+
typescript: boolean;
10+
tabWidth: number;
11+
componentPropsPrefix: "type" | "interface";
12+
};
13+
14+
export const convertSnippetArrayToString = (snippetArray: Array<string>) => snippetArray.join("\n");
15+
16+
export const getPrettierConfig = async (): Promise<Options> => {
17+
const settings = workspace.getConfiguration(
18+
"esReactSnippets.settings",
19+
) as unknown as ExtensionSettings;
20+
21+
const prettierConfig = await prettier.resolveConfig("");
22+
23+
return {
24+
semi: settings.semiColons,
25+
singleQuote: settings.quotes,
26+
tabWidth: 2,
27+
parser: "typescript",
28+
...(settings.prettierEnabled && prettierConfig),
29+
};
30+
};

‎src/index.ts

+5-49
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,11 @@
1-
import * as vscode from "vscode";
1+
import { commands, ExtensionContext } from "vscode";
22

3-
import jsSnippets from "./snippets/snippets.json";
4-
import tsSnippets from "./snippets/ts-snippets.json";
3+
import snippetSearch from "./snippetSearch";
54

6-
const convertSnippetArrayToString = (snippetArray: Array<string>) => snippetArray.join("\n");
5+
export function activate(context: ExtensionContext) {
6+
const snippetSearchCommand = commands.registerCommand("esReactSnippets.search", snippetSearch);
77

8-
export function activate(context: vscode.ExtensionContext) {
9-
const {
10-
commands: { registerCommand },
11-
window: { showQuickPick, activeTextEditor },
12-
} = vscode;
13-
14-
const disposable = registerCommand("extension.snippetSearch", async () => {
15-
const javascriptSnippets = Object.entries(jsSnippets);
16-
const typescriptSnippets = Object.entries(tsSnippets);
17-
const snippetsArray = javascriptSnippets.concat(typescriptSnippets);
18-
19-
const items = snippetsArray.map(
20-
// @ts-expect-error
21-
([shortDescription, { prefix, body, description }], index) => {
22-
const value = typeof prefix === "string" ? prefix : prefix[0];
23-
24-
return {
25-
id: index,
26-
description: description || shortDescription,
27-
label: value,
28-
value,
29-
body,
30-
};
31-
},
32-
);
33-
34-
const options = {
35-
matchOnDescription: true,
36-
matchOnDetail: true,
37-
placeHolder: "Search snippet",
38-
};
39-
40-
const snippet = (await showQuickPick(items, options)) || {
41-
body: "",
42-
};
43-
44-
const body =
45-
typeof snippet.body === "string" ? snippet.body : convertSnippetArrayToString(snippet.body);
46-
47-
if (activeTextEditor) {
48-
activeTextEditor.insertSnippet(new vscode.SnippetString(body));
49-
}
50-
});
51-
52-
context.subscriptions.push(disposable);
8+
context.subscriptions.push(snippetSearchCommand);
539
}
5410

5511
export function deactivate() {}

‎src/snippetSearch.ts

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { SnippetString, window } from "vscode";
2+
import prettier from "prettier";
3+
4+
import { convertSnippetArrayToString, getPrettierConfig } from "./helpers";
5+
import jsSnippets from "./snippets/snippets.json";
6+
import tsSnippets from "./snippets/ts-snippets.json";
7+
8+
const snippetSearch = async () => {
9+
const { showQuickPick, activeTextEditor } = window;
10+
11+
const javascriptSnippets = Object.entries(jsSnippets);
12+
const typescriptSnippets = Object.entries(tsSnippets);
13+
const snippetsArray = javascriptSnippets.concat(typescriptSnippets);
14+
15+
const items = snippetsArray.map(
16+
// @ts-expect-error
17+
([shortDescription, { prefix, body, description }], index) => {
18+
const value = typeof prefix === "string" ? prefix : prefix[0];
19+
20+
return {
21+
id: index,
22+
description: description || shortDescription,
23+
label: value,
24+
value,
25+
body,
26+
};
27+
},
28+
);
29+
30+
const options = {
31+
matchOnDescription: true,
32+
matchOnDetail: true,
33+
placeHolder: "Search snippet",
34+
};
35+
36+
const snippet = (await showQuickPick(items, options)) || {
37+
body: "",
38+
};
39+
40+
const body =
41+
typeof snippet.body === "string" ? snippet.body : convertSnippetArrayToString(snippet.body);
42+
43+
if (activeTextEditor) {
44+
const config = await getPrettierConfig();
45+
const parsedBody = prettier.format(body, config);
46+
console.log(JSON.stringify(parsedBody), JSON.stringify(body));
47+
48+
activeTextEditor.insertSnippet(new SnippetString(body));
49+
}
50+
};
51+
52+
export default snippetSearch;

‎src/snippets/ts-snippets.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -314,7 +314,7 @@
314314
],
315315
"description": "Creates a React Native Arrow Function Component with ES7 module system, TypeScript interface and StyleSheet"
316316
},
317-
"Export interface": {
317+
"exportInterface": {
318318
"prefix": "expint",
319319
"body": ["export interface ${1:${TM_FILENAME_BASE}} {$0}"]
320320
},

0 commit comments

Comments
 (0)