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 d410801

Browse files
Damian SznajderDamian Sznajder
Damian Sznajder
authored and
Damian Sznajder
committed
refactor: adjust snippets generation and prettier config application
1 parent de763f2 commit d410801

File tree

9 files changed

+104
-89
lines changed

9 files changed

+104
-89
lines changed

‎docs/Snippets.md

Lines changed: 0 additions & 3 deletions
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

Lines changed: 32 additions & 14 deletions
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

Lines changed: 11 additions & 24 deletions
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+
exportconst 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

Lines changed: 13 additions & 20 deletions
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 = awaitgetPrettierConfig();
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

Lines changed: 35 additions & 5 deletions
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

Lines changed: 1 addition & 1 deletion
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 ? awaitparseSnippet(rawSnippet) : '';
26+
const body = rawSnippet ? parseSnippet(rawSnippet.body) : '';
2727

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

‎src/sourceSnippets/hooks.ts

Lines changed: 0 additions & 10 deletions
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

Lines changed: 8 additions & 8 deletions
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

Lines changed: 4 additions & 4 deletions
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)

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