|
7 | 7 |
|
8 | 8 | - [Top Features](#top-features) |
9 | 9 | - [Minor Useful Features](#minor-useful-features) |
| 10 | +- [Method Snippets](#method-snippets) |
10 | 11 | - [Auto Imports](#auto-imports) |
| 12 | +- [Type Driven Completions](#type-driven-completions) |
11 | 13 | - [Rename Features](#rename-features) |
12 | 14 | - [Special Commands List](#special-commands-list) |
13 | 15 | - [Contributed Code Actions](#contributed-code-actions) |
@@ -35,19 +37,6 @@ Also is not supported in the web. |
35 | 37 |
|
36 | 38 | 90% work done in this extension highly improves completions experience! |
37 | 39 |
|
38 | | -### Method Snippets |
39 | | - |
40 | | -(*enabled by default*) |
41 | | - |
42 | | -Expands arrow callbacks with signature snippet with adding additional undo stack! |
43 | | - |
44 | | -Example: |
45 | | - |
46 | | -```ts |
47 | | -const callback = (arg) => {} |
48 | | -callback -> callback(arg) |
49 | | -``` |
50 | | - |
51 | 40 | ### Strict Emmet |
52 | 41 |
|
53 | 42 | (*enabled by default*) when react langs are in `emmet.excludeLanguages` |
@@ -127,7 +116,9 @@ There is web-only feature: fix clicking on relative `import` paths. |
127 | 116 |
|
128 | 117 | (*enabled by default*) |
129 | 118 |
|
130 | | -Highlights and lifts non-function methods. Also applies for static class methods. |
| 119 | +Highlights non-function methods and properties. Also applies for static class methods. |
| 120 | + |
| 121 | + |
131 | 122 |
|
132 | 123 | ### Indexed Signature Completions |
133 | 124 |
|
@@ -175,8 +166,6 @@ Try to restore [original](https://github.com/microsoft/TypeScript/issues/49012) |
175 | 166 | We extend completion list with extensions from module augmentation (e.g. `.css` files if you have `declare module '*.css'`). |
176 | 167 | But for unchecked contexts list of extensions can be extended with `tsEssentialPlugins.additionalIncludeExtensions` setting. |
177 | 168 |
|
178 | | -<!-- ## Type-Driven Completions --> |
179 | | - |
180 | 169 | ### Mark Code Actions |
181 | 170 |
|
182 | 171 | (*enabled by default* with two settings) |
@@ -205,6 +194,102 @@ const a = 5 |
205 | 194 | a = 6 |
206 | 195 | ``` |
207 | 196 |
|
| 197 | +### Format Ignore Directives |
| 198 | + |
| 199 | +We support [format ignore directives](https://github.com/microsoft/TypeScript/issues/18261) |
| 200 | + |
| 201 | +## Type-Driven Completions |
| 202 | + |
| 203 | +All in this section requires TypeScript nightly extension. |
| 204 | + |
| 205 | +### JSX Elements |
| 206 | + |
| 207 | +To Enable: `"tsEssentialPlugins.experiments.excludeNonJsxCompletions": true` |
| 208 | + |
| 209 | +We can filter out completions so only Function Components stay in your list: |
| 210 | + |
| 211 | +```tsx |
| 212 | +class Foo {} |
| 213 | +const Bar = () => <div /> |
| 214 | + |
| 215 | +const elem = </* Bar is suggested, Foo not |
| 216 | +``` |
| 217 | +
|
| 218 | +Super handy in MUI + Electron projects. |
| 219 | +
|
| 220 | +Class components are not supported (no need). |
| 221 | +
|
| 222 | +### Change kind to function |
| 223 | +
|
| 224 | +Enable with `tsEssentialPlugins.experiments.changeKindToFunction` |
| 225 | +
|
| 226 | + |
| 227 | +
|
| 228 | +## Method Snippets |
| 229 | +
|
| 230 | +(*enabled by default*) |
| 231 | +
|
| 232 | +Expands arrow callback completions with signature snippet. Also adds additional undo stack! |
| 233 | +
|
| 234 | +Example: |
| 235 | +
|
| 236 | +```ts |
| 237 | +const callback = (arg) => {} |
| 238 | +callback -> callback(arg) |
| 239 | +``` |
| 240 | +
|
| 241 | +#### Configuration |
| 242 | +
|
| 243 | +There are value descriptions for two settings: |
| 244 | +
|
| 245 | +`tsEssentialPlugins.methodSnippets.insertText`: |
| 246 | +
|
| 247 | +```ts |
| 248 | +const example = ({ a }, b?, c = 5, ...d) => { } |
| 249 | +// binding-name (default) |
| 250 | +example({ a }, b, c, ...d) |
| 251 | +// always-declaration (also popular) |
| 252 | +example({ a }, b?, c = 5, ...d) |
| 253 | +// always-name |
| 254 | +example(__0, b, c, d) |
| 255 | +``` |
| 256 | +
|
| 257 | +`tsEssentialPlugins.methodSnippets.skip`: |
| 258 | +
|
| 259 | +```ts |
| 260 | +const example = ({ a }, b?, c = 5, ...d) => { } |
| 261 | +// only-rest |
| 262 | +example({ a }, b, c) |
| 263 | +// optional-and-rest |
| 264 | +example({ a }) |
| 265 | +// no-skip (default) |
| 266 | +example({ a }, b, c, ...d) |
| 267 | +``` |
| 268 | +
|
| 269 | +`tsEssentialPlugins.methodSnippets.multipleSignatures`: |
| 270 | +
|
| 271 | +```ts |
| 272 | +// overload 1 |
| 273 | +function foo(this: {}, a) |
| 274 | +// overload 2 |
| 275 | +function foo(this: {}, b) |
| 276 | +function foo(this: {}) {} |
| 277 | +
|
| 278 | +// pick-first (default) |
| 279 | +foo(a) |
| 280 | +// empty |
| 281 | +foo(|) |
| 282 | +``` |
| 283 | +
|
| 284 | +`disableMethodSnippets.jsxAttributes`: |
| 285 | +
|
| 286 | +```tsx |
| 287 | +const callback = (arg) => {} |
| 288 | +function Foo() { |
| 289 | + return <div onClick={callback/* when true (default) - no expansion here */} /> |
| 290 | +} |
| 291 | +``` |
| 292 | + |
208 | 293 | ## Auto Imports |
209 | 294 |
|
210 | 295 | With this plugin you have total (almost) control over auto imports that appear in completions, quick fixes and import all quick fix. Some examples of what you can do: |
@@ -320,7 +405,9 @@ Another options that is accepted is |
320 | 405 |
|
321 | 406 | ### Go to / Select Nodes by Kind |
322 | 407 |
|
323 | | -Use cases: search excluding comments, search & replace only within strings, find interested JSX attribute node |
| 408 | +Extremely powerful command that allows you to leverage AST knowledge of opened file. |
| 409 | + |
| 410 | +Use cases: select all comments to exclude searching in comments. Or search & replace only within strings / find interested JSX attribute node. |
324 | 411 |
|
325 | 412 | ## Contributed Code Actions |
326 | 413 |
|
|
0 commit comments