Skip to content

Commit 7a7f32a

Browse files
author
Damian Sznajder
committed
refactor: adjust snippets generation and prettier config application
1 parent 51a693a commit 7a7f32a

File tree

9 files changed

+104
-89
lines changed

9 files changed

+104
-89
lines changed

‎docs/Snippets.md

-3
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,8 @@ I.E. `tsrcc`
6767
| `rconst→` | `constructor(props) with this.state` |
6868
| `rconc→` | `constructor(props, context) with this.state` |
6969
| `est→` | `this.state = { }` |
70-
| `cwm→` | `componentWillMount = () => { }` DEPRECATED!!! |
7170
| `cdm→` | `componentDidMount = () => { }` |
72-
| `cwr→` | `componentWillReceiveProps = (nextProps) => { }` DEPRECATED!!! |
7371
| `scu→` | `shouldComponentUpdate = (nextProps, nextState) => { }` |
74-
| `cwup→` | `componentWillUpdate = (nextProps, nextState) => { }` DEPRECATED!!! |
7572
| `cdup→` | `componentDidUpdate = (prevProps, prevState) => { }` |
7673
| `cwun→` | `componentWillUnmount = () => { }` |
7774
| `gdsfp→` | `static getDerivedStateFromProps(nextProps, prevState) { }` |

‎package.json

+32-14
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,18 @@
3939
}
4040
},
4141
"activationEvents": [
42-
"onCommand:esReactSnippets.search"
42+
"onCommand:reactSnippets.search"
4343
],
4444
"contributes": {
4545
"commands": [
4646
{
47-
"command": "esReactSnippets.search",
47+
"command": "reactSnippets.search",
4848
"title": "Snippet search"
4949
}
5050
],
5151
"keybindings": [
5252
{
53-
"command": "esReactSnippets.search",
53+
"command": "reactSnippets.search",
5454
"key": "ctrl+alt+r",
5555
"mac": "shift+cmd+r",
5656
"when": "editorTextFocus"
@@ -59,37 +59,37 @@
5959
"configuration": {
6060
"title": "ES React/React-Native/Redux snippets",
6161
"properties": {
62-
"esReactSnippets.settings.prettierEnabled": {
62+
"reactSnippets.settings.prettierEnabled": {
6363
"type": "boolean",
6464
"markdownDescription": "Integrate prettier settings with code generated from snippets.",
6565
"default": false
6666
},
67-
"esReactSnippets.settings.importReactOnTop": {
67+
"reactSnippets.settings.importReactOnTop": {
6868
"type": "boolean",
6969
"markdownDescription": "Controls if snippets should add `import React from 'react';` at the top of components.\nUse if you have React +17 and use jsx transform.",
7070
"default": true
7171
},
72-
"esReactSnippets.settings.typescript": {
72+
"reactSnippets.settings.typescript": {
7373
"type": "boolean",
7474
"markdownDescription": "Controls if React components have typescript Props typing.",
7575
"default": false
7676
},
77-
"esReactSnippets.settings.semiColons": {
77+
"reactSnippets.settings.semiColons": {
7878
"type": "boolean",
79-
"markdownDescription": "Controls if snippets should use semi colons.\nOnly applies when `#esReactSnippets.settings.prettierEnabled#` is disabled",
79+
"markdownDescription": "Controls if snippets should use semi colons.\nOnly applies when `#reactSnippets.settings.prettierEnabled#` is disabled",
8080
"default": true
8181
},
82-
"esReactSnippets.settings.singleQuote": {
82+
"reactSnippets.settings.singleQuote": {
8383
"type": "boolean",
84-
"markdownDescription": "Controls if snippets should use single quotes.\nOnly applies when `#esReactSnippets.settings.prettierEnabled#` is disabled",
84+
"markdownDescription": "Controls if snippets should use single quotes.\nOnly applies when `#reactSnippets.settings.prettierEnabled#` is disabled",
8585
"default": true
8686
},
87-
"esReactSnippets.settings.tabWidth": {
87+
"reactSnippets.settings.tabWidth": {
8888
"type": "number",
89-
"markdownDescription": "Controls how many spaces snippets will have.\nOnly applies when `#esReactSnippets.settings.prettierEnabled#` is disabled",
89+
"markdownDescription": "Controls how many spaces snippets will have.\nOnly applies when `#reactSnippets.settings.prettierEnabled#` is disabled",
9090
"default": 2
9191
},
92-
"esReactSnippets.settings.typescriptComponentPropsStatePrefix": {
92+
"reactSnippets.settings.typescriptComponentPropsStatePrefix": {
9393
"type": "string",
9494
"markdownDescription": "Controls which prefix for typescript snippets should use for props/state.",
9595
"default": "type",
@@ -99,7 +99,25 @@
9999
]
100100
}
101101
}
102-
}
102+
},
103+
"snippets": [
104+
{
105+
"language": "javascript",
106+
"path": "./src/snippets/generated.json"
107+
},
108+
{
109+
"language": "javascriptreact",
110+
"path": "./src/snippets/generated.json"
111+
},
112+
{
113+
"language": "typescript",
114+
"path": "./src/snippets/generated.json"
115+
},
116+
{
117+
"language": "typescriptreact",
118+
"path": "./src/snippets/generated.json"
119+
}
120+
]
103121
},
104122
"scripts": {
105123
"vscode:prepublish": "yarn compile",

‎src/generateSnippets.ts

+11-24
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { writeFileSync } from 'fs';
1+
import { writeFile } from 'fs';
22
import { workspace } from 'vscode';
33

44
import { ExtensionSettings, replaceSnippetPlaceholders } from './helpers';
@@ -46,18 +46,12 @@ export type Snippets = {
4646
[key in SnippetKeys]: Snippet;
4747
};
4848

49-
let snippetsCache: string | null = null;
50-
5149
const getSnippets = () => {
52-
if (snippetsCache) {
53-
return snippetsCache;
54-
}
55-
5650
const config = workspace.getConfiguration(
57-
'esReactSnippets',
51+
'reactSnippets',
5852
) as unknown as ExtensionSettings;
5953

60-
const snippets: Snippets = [
54+
const snippets = [
6155
...componentsSnippets,
6256
...consoleSnippets,
6357
...hooksSnippets,
@@ -72,23 +66,16 @@ const getSnippets = () => {
7266
return acc;
7367
}, {} as Snippets);
7468

75-
const jsonSnippets = replaceSnippetPlaceholders(
76-
JSON.stringify(snippets, null, 2),
77-
config,
78-
);
79-
80-
snippetsCache = jsonSnippets;
81-
return jsonSnippets;
69+
return replaceSnippetPlaceholders(JSON.stringify(snippets, null, 2), config);
8270
};
8371

84-
const generateSnippets = () =>
72+
export const generateSnippets = () =>
8573
new Promise((resolve) => {
86-
console.time('generate');
8774
const jsonSnippets = getSnippets();
88-
console.timeEnd('generate');
89-
90-
writeFileSync(__dirname + '/snippets/generated.json', jsonSnippets);
91-
return resolve(true);
75+
writeFile(__dirname + '/snippets/generated.json', jsonSnippets, (error) => {
76+
if (error) {
77+
console.error(error);
78+
}
79+
return resolve(true);
80+
});
9281
});
93-
94-
export default generateSnippets;

‎src/helpers.ts

+13-20
Original file line numberDiff line numberDiff line change
@@ -42,44 +42,37 @@ export const revertSnippetPlaceholders = (snippetString: string) =>
4242
.replace(new RegExp(/\${3:third}/, 'g'), SnippetPlaceholders.ThirdTab)
4343
.replace(new RegExp(/\$0/, 'g'), SnippetPlaceholders.LastTab);
4444

45-
export const getPrettierConfig = async (): Promise<Options> => {
45+
let prettierConfig: prettier.Options | null;
46+
47+
prettier
48+
.resolveConfig('', { editorconfig: true })
49+
.then((config) => (prettierConfig = config));
50+
51+
export const getPrettierConfig = (): Options => {
4652
const settings = workspace.getConfiguration(
47-
'esReactSnippets.settings',
53+
'reactSnippets.settings',
4854
) as unknown as ExtensionSettings;
4955

50-
const prettierConfig = await prettier.resolveConfig('', {
51-
editorconfig: true,
52-
});
53-
5456
return {
5557
semi: settings.semiColons,
5658
singleQuote: settings.quotes,
5759
tabWidth: settings.tabWidth,
60+
parser: 'typescript',
5861
...(settings.prettierEnabled && prettierConfig),
5962
};
6063
};
6164

62-
export const parseSnippet = async (snippet: {
63-
description: any;
64-
label: string;
65-
body: string[];
66-
}) => {
65+
export const parseSnippet = (body: string[]) => {
6766
const workspaceConfig = workspace.getConfiguration(
68-
'esReactSnippets',
67+
'reactSnippets',
6968
) as unknown as ExtensionSettings;
70-
const snippetBody =
71-
typeof snippet.body === 'string' ? snippet.body : snippet.body.join('\n');
69+
const snippetBody = typeof body === 'string' ? body : body.join('\n');
7270

73-
const prettierConfig = await getPrettierConfig();
71+
const prettierConfig = getPrettierConfig();
7472
const parsedBody = prettier.format(
7573
revertSnippetPlaceholders(snippetBody),
7674
prettierConfig,
7775
);
7876

79-
console.log(
80-
parsedBody,
81-
replaceSnippetPlaceholders(parsedBody, workspaceConfig),
82-
);
83-
8477
return replaceSnippetPlaceholders(parsedBody, workspaceConfig);
8578
};

‎src/index.ts

+35-5
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,47 @@
1-
import { commands, ExtensionContext } from 'vscode';
1+
import {
2+
commands,
3+
ConfigurationChangeEvent,
4+
ExtensionContext,
5+
window,
6+
workspace,
7+
} from 'vscode';
28

3-
import generateSnippets from './generateSnippets';
9+
import { generateSnippets } from './generateSnippets';
410
import snippetSearch from './snippetSearch';
511

6-
export async function activate(context: ExtensionContext) {
7-
await generateSnippets();
12+
const showRestartMessage = async ({
13+
affectsConfiguration,
14+
}: ConfigurationChangeEvent) => {
15+
let timeoutId: NodeJS.Timeout | undefined;
16+
if (affectsConfiguration('reactSnippets')) {
17+
await generateSnippets();
18+
timeoutId && clearTimeout(timeoutId);
19+
timeoutId = setTimeout(() => {
20+
window
21+
.showWarningMessage(
22+
'React Snippets: Please restart VS Code to apply snippet formatting changes',
23+
'Restart VS Code',
24+
'Ignore',
25+
)
26+
.then((action?: string) => {
27+
if (action === 'Restart VS Code') {
28+
commands.executeCommand('workbench.action.reloadWindow');
29+
}
30+
});
31+
}, 3000);
32+
}
33+
};
834

35+
export async function activate(context: ExtensionContext) {
36+
workspace.onDidChangeConfiguration(showRestartMessage);
937
const snippetSearchCommand = commands.registerCommand(
10-
'esReactSnippets.search',
38+
'reactSnippets.search',
1139
snippetSearch,
1240
);
1341

1442
context.subscriptions.push(snippetSearchCommand);
43+
44+
await generateSnippets();
1545
}
1646

1747
export function deactivate() {}

‎src/snippetSearch.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const snippetSearch = async () => {
2323
placeHolder: 'Search snippet by prefix or description',
2424
});
2525

26-
const body = rawSnippet ? await parseSnippet(rawSnippet) : '';
26+
const body = rawSnippet ? parseSnippet(rawSnippet.body) : '';
2727

2828
if (activeTextEditor) {
2929
activeTextEditor.insertSnippet(new SnippetString(body));

‎src/sourceSnippets/hooks.ts

-10
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,10 @@ type HookMappings = {
99
useMemo: 'useMemoSnippet';
1010
useReducer: 'useReducerSnippet';
1111
useRef: 'useRefSnippet';
12-
useState: 'useStateSnippet';
1312
};
1413

1514
export type HooksSnippet = SnippetMapping<HookMappings>;
1615

17-
const useState: HooksSnippet = {
18-
key: 'useState',
19-
prefix: 'useStateSnippet',
20-
body: [
21-
`const [${SnippetPlaceholders.FirstTab}, set${SnippetPlaceholders.FirstTab}/(.*)/${SnippetPlaceholders.FirstTab}:/capitalize}/}] = useState(${SnippetPlaceholders.SecondTab})`,
22-
],
23-
};
24-
2516
const useEffect: HooksSnippet = {
2617
key: 'useEffect',
2718
prefix: 'useEffectSnippet',
@@ -111,7 +102,6 @@ const useLayoutEffect: HooksSnippet = {
111102
};
112103

113104
export default [
114-
useState,
115105
useEffect,
116106
useContext,
117107
useReducer,

‎src/sourceSnippets/imports.ts

+8-8
Original file line numberDiff line numberDiff line change
@@ -155,35 +155,35 @@ const importNoModuleName: ImportsSnippet = {
155155
key: 'importNoModuleName',
156156
prefix: 'imn',
157157
body: [
158-
`import '${SnippetPlaceholders.FirstTab}'${SnippetPlaceholders.LastTab}`,
159-
'',
158+
`import '${SnippetPlaceholders.FirstTab}'`,
159+
SnippetPlaceholders.LastTab,
160160
],
161161
};
162162

163163
const importDestructing: ImportsSnippet = {
164164
key: 'importDestructing',
165165
prefix: 'imd',
166166
body: [
167-
`import { ${SnippetPlaceholders.SecondTab} } from '${SnippetPlaceholders.FirstTab}'${SnippetPlaceholders.LastTab}`,
168-
'',
167+
`import { ${SnippetPlaceholders.SecondTab} } from '${SnippetPlaceholders.FirstTab}'`,
168+
SnippetPlaceholders.LastTab,
169169
],
170170
};
171171

172172
const importEverything: ImportsSnippet = {
173173
key: 'importEverything',
174174
prefix: 'ime',
175175
body: [
176-
`import * as ${SnippetPlaceholders.SecondTab} from '${SnippetPlaceholders.FirstTab}'${SnippetPlaceholders.LastTab}`,
177-
'',
176+
`import * as ${SnippetPlaceholders.SecondTab} from '${SnippetPlaceholders.FirstTab}'`,
177+
SnippetPlaceholders.LastTab,
178178
],
179179
};
180180

181181
const importAs: ImportsSnippet = {
182182
key: 'importAs',
183183
prefix: 'ima',
184184
body: [
185-
`import { ${SnippetPlaceholders.SecondTab} as ${SnippetPlaceholders.ThirdTab} } from '${SnippetPlaceholders.FirstTab}'${SnippetPlaceholders.LastTab}`,
186-
'',
185+
`import { ${SnippetPlaceholders.SecondTab} as ${SnippetPlaceholders.ThirdTab} } from '${SnippetPlaceholders.FirstTab}'`,
186+
SnippetPlaceholders.LastTab,
187187
],
188188
};
189189

‎src/sourceSnippets/others.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -55,17 +55,17 @@ const exportDestructing: OthersSnippet = {
5555
key: 'exportDestructing',
5656
prefix: 'exd',
5757
body: [
58-
`export { ${SnippetPlaceholders.SecondTab} } from '${SnippetPlaceholders.FirstTab}'${SnippetPlaceholders.LastTab}`,
59-
'',
58+
`export { ${SnippetPlaceholders.SecondTab} } from '${SnippetPlaceholders.FirstTab}'`,
59+
SnippetPlaceholders.LastTab,
6060
],
6161
};
6262

6363
const exportAs: OthersSnippet = {
6464
key: 'exportAs',
6565
prefix: 'exa',
6666
body: [
67-
`export { ${SnippetPlaceholders.SecondTab} as ${SnippetPlaceholders.ThirdTab} } from '${SnippetPlaceholders.FirstTab}'${SnippetPlaceholders.LastTab}`,
68-
'',
67+
`export { ${SnippetPlaceholders.SecondTab} as ${SnippetPlaceholders.ThirdTab} } from '${SnippetPlaceholders.FirstTab}'`,
68+
SnippetPlaceholders.LastTab,
6969
],
7070
};
7171

0 commit comments

Comments
 (0)