{"id":15118360,"url":"https://github.com/zardoy/typescript-vscode-plugins","last_synced_at":"2025-04-09T23:16:33.326Z","repository":{"id":37024210,"uuid":"449978398","full_name":"zardoy/typescript-vscode-plugins","owner":"zardoy","description":"NO LIMITS FOR TS! Isn't this the most advanced TypeScript plugin as VS Code extension ever created?","archived":false,"fork":false,"pushed_at":"2025-01-30T21:38:01.000Z","size":1504,"stargazers_count":63,"open_issues_count":81,"forks_count":5,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-04-09T23:16:21.717Z","etag":null,"topics":["typescript","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=zardoy.ts-essential-plugins","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zardoy.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":"CONTRIBUTING.MD","funding":".github/funding.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"patreon":"zardoy","custom":["https://www.paypal.me/zardoy","zardoy.com"]}},"created_at":"2022-01-20T06:18:04.000Z","updated_at":"2025-04-03T08:56:58.000Z","dependencies_parsed_at":"2022-08-19T01:41:49.540Z","dependency_job_id":"2847951a-4436-4874-aaa9-58c02a87e909","html_url":"https://github.com/zardoy/typescript-vscode-plugins","commit_stats":{"total_commits":524,"total_committers":5,"mean_commits":104.8,"dds":"0.041984732824427495","last_synced_commit":"297826b3a09ef1f2faa6bdbae74e79e9a92e57eb"},"previous_names":[],"tags_count":80,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zardoy%2Ftypescript-vscode-plugins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zardoy%2Ftypescript-vscode-plugins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zardoy%2Ftypescript-vscode-plugins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zardoy%2Ftypescript-vscode-plugins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zardoy","download_url":"https://codeload.github.com/zardoy/typescript-vscode-plugins/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248125593,"owners_count":21051771,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["typescript","vscode","vscode-extension"],"created_at":"2024-09-26T01:46:14.184Z","updated_at":"2025-04-09T23:16:33.303Z","avatar_url":"https://github.com/zardoy.png","language":"TypeScript","funding_links":["https://patreon.com/zardoy","https://www.paypal.me/zardoy","zardoy.com"],"categories":["TypeScript"],"sub_categories":[],"readme":"# TypeScript Essential Plugins\n\n**Use next-Gen TypeScript features in VSCode today!**\n\nNo-AI smart predictable completions that efficiently reuses the world of types!\n\n- Stays fast\n- No internet connection required\n\nFeature-complete TypeScript plugin that improves every single builtin feature such as completions, definitions, references and so on, and also adds even new TypeScript killer features, so you can work with large codebases faster!\nWe make completions more informative. Definitions, references (and sometimes even completions) less noisy. And finally our main goal is to provide most customizable TypeScript experience for IDE features.\n\n## TOC\n\n- [Top Features](#top-features)\n- [Minor Useful Features](#minor-useful-features)\n- [Method Snippets](#method-snippets)\n- [Volar (Vue) Support](#vue-support)\n- [Auto Imports](#auto-imports)\n- [Type Driven Completions](#type-driven-completions)\n- [Special Commands List](#special-commands-list)\n- [Contributed Code Actions](#contributed-code-actions)\n- [Rename Features](#rename-features)\n- [Even Even More](#even-even-more)\n\n\u003e *Note*: You can disable all optional features with `\u003e Disable All Optional Features` command just after installing.\n\u003e\n\u003e *Note*: Visit website for list of recommended settings: \u003chttps://ts-plugin.zardoy.com/\u003e\n\n## Top Features\n\n\u003e Note: With this plugin React experience hits different! (see below)\n\n### Special Commands \u0026 Actions\n\nSee [special commands list](#special-commands-list) ans [code actions list](#contributed-code-actions)\n\n### JSX Outline\n\n(*disabled by default*) Enable with `tsEssentialPlugins.patchOutline`\n\nAdd JSX elements to outline. It also makes sticky scroll works with your tags!\n\nSuper recommended for react. Fragments are not rendered.\n\nAlso is not supported in the web.\n\n## **Completions Built Different**\n\n90% work done in this extension highly improves completions experience!\n\n### Strict JSX Emmet\n\n(*enabled by default*) when react langs are in `emmet.excludeLanguages`\n\nEmmet that is active **only** inside JSX tags!\n\nYou can force enable this by using `Enable Strict Emmet in JSX` command.\n\n*Why?* Issues it fixes: [query](https://github.com/microsoft/vscode/issues?q=sort%3Aupdated-desc+51537+150671+142978+119736).\n\n#### Optional Emmet Features\n\n- cleanup suggestions (can be enabled `jsxEmmet.modernize`)\n- override `.` snippet\n\nIs not supported in the web for now.\n\n### Array Method Snippets\n\n(*disabled by default*)\n\nEdits array suggestions that receive predicate in the following way:\n\n```ts\nconst usersList = []\n\nusersList.map // -\u003e usersList.map((user) =\u003e )\n```\n\n### Locality Bonus\n\n(*disabled by default*, SUPER recommended, enable with `suggestions.localityBonus`)\n\nSuggestions closer to cursor will appear higher, useful for local variables (eg callback parameters), requires TS \u003e=5.0\n\nWhy not enable built-in *Locality Bonus* setting:\n\n- Sometimes it just doesn't work\n- In other cases it might lead to misleading suggestions (as it's text-based and not smart)\n\n### Case-sensitive Completions\n\n(*disabled by default*)\n\nFilter out completions that start with different casing.\n\n### Tuple Type Signatures\n\n(*disabled by default*, but super recommended)\n\nCompletions and signature help in tuple literal expressions \u0026 destructure.\n\n\u003cimg src=\"media/tuple-signature-1.png\" width=\"380\"\u003e\n\u003cimg src=\"media/tuple-signature-2.png\" width=\"400\"\u003e\n\n### Remove Definition From References\n\n(*enabled by default*)\n\n\u003chttps://github.com/microsoft/vscode/issues/160637\u003e\n\n### Remove Imports From References\n\n(*enabled by default*)\n\nRemoves import statements from references when symbol has usages in the same file. Why? Because if export thing is used in another file, it might be obvious that it is imported, and most probably you are not interested in import statements.\n\n## Minor Useful Features\n\n### `enablePlugin` setting\n\nYou can quickly disable this plugin functionality by setting this setting to false. Useful for debugging a problem for example.\n\n\u003e Note: this setting doesn't disable Vue support.\n\n### Vue Support\n\n`.vue` SFC files support is disabled, but can be enabled with setting and when [Vue Language Features (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) is installed.\n\nEnable now: `\"tsEssentialPlugins.enableVueSupport\": true` (if you're not using local `./volar.config.js`)\n\nFor the first time, it will configure `volar.vueserver.configFilePath` setting.\n\nThis also makes plugin work in Volar's takeover mode!\n\n### Web Support\n\n\u003e Note: when you open TS/JS file in the web for the first time you currently need to switch between editors to make plugin work.\n\nThere is web-only feature: fix clicking on relative `import` paths.\n\nAlternative you can try to use [vscode-typescript-web extension](https://github.com/volarjs/vscode-typescript-web/) for better web intellisense.\n\n### `in` Keyword Suggestions\n\n[Demo](https://github.com/zardoy/typescript-vscode-plugins/pull/19)\n\n### Highlight non-function Methods\n\n(*enabled by default*)\n\nHighlights non-function methods and properties. Also applies for static class methods.\n\n![non-function-methods](media/non-function-methods.png)\n\n### Indexed Signature Completions\n\n```ts\nconst bannedUsers = {\n    admin: false,\n    moderator: false,\n}\nbannedUsers[condition ? 'admin' : 'moderator'] = true\n//          adds suggestions ^      ^ deranks admin suggestion\n```\n\n### Remove Useless Code Fixes\n\n(*enabled by default*)\n\nBy default removes `Fix Missing Function Declaration` codefix. Possibly to remove more via setting.\n\n### Remove Useless Function Props\n\n(*enabled by default*)\n\nRemoves `Symbol`, `caller`, `prototype` completions on function / classes.\n\n### Keywords Insert Text\n\n(*enabled by default*)\n\nAppends *space* to almost all keywords e.g. `const `, like WebStorm does.\n\n### Patch `toString()`\n\n(*enabled by default*)\n\nPatches `toString()` insert function snippet on number types to remove annoying tab stop.\n\n### Restore Properties Sorting\n\n(*disabled by default*) enable with `tsEssentialPlugins.fixSuggestionsSorting`\n\nTry to restore [original](https://github.com/microsoft/TypeScript/issues/49012) properties sorting in some places such as object destructure \u0026 dot property access.\n\n### File Extension Suggestions\n\nWe extend completion list with extensions from module augmentation (e.g. `.css` files if you have `declare module '*.css'`).\nBut for unchecked contexts list of extensions can be extended with `tsEssentialPlugins.additionalIncludeExtensions` setting.\n\n### Mark Code Actions\n\n(*enabled by default* with two settings)\n\nMark all TS code actions with `🔵`, so you can be sure they're coming from TypeScript, and not some other extension.\n\n### Additional Types Suggestions\n\n```ts\n// Adds types in default constraint:\ntype A\u003cT extends 'foo' | 'bar' = ''\u003e = ...\n```\n\n### Builtin Code Fix Fixes\n\nWith this plugin fixes some builtin code actions and these code fixes will work *correctly*:\n\n```ts\n// ctrl+s fix: only one async is added\nconst syncFunction = () =\u003e {\n    await fetch()\n    await fetch()\n}\nconst a = 5\n// const to let fix\na = 6\n```\n\n### Format Ignore Directives\n\nWe support [format ignore directives](https://github.com/microsoft/TypeScript/issues/18261)\n\n## Type-Driven Completions\n\nAll in this section requires TypeScript nightly extension.\n\n### JSX Elements\n\nTo Enable: `\"tsEssentialPlugins.experiments.excludeNonJsxCompletions\": true`\n\nWe can filter out completions so only Function Components stay in your list:\n\n```tsx\nclass Foo {}\nconst Bar = () =\u003e \u003cdiv /\u003e\n\nconst elem = \u003c/* Bar is suggested, Foo not\n```\n\nSuper handy in MUI + Electron projects.\n\nClass components are not supported (no need).\n\n### Change kind to function\n\nEnable with `tsEssentialPlugins.experiments.changeKindToFunction`\n\n![change-icon-kind](media/change-kind.png)\n\n## Method Snippets\n\n(*enabled by default*)\n\nExpands arrow callback completions with signature snippet. Also adds additional undo stack!\n\nExample:\n\n```ts\nconst callback = (arg) =\u003e {}\ncallback -\u003e callback(arg)\n```\n\n#### Configuration\n\nThere are value descriptions for two settings:\n\n`tsEssentialPlugins.methodSnippets.insertText`:\n\n```ts\nconst example = ({ a }, b?, c = 5, ...d) =\u003e { }\n\n// binding-name (default)\nexample({ a }, b, c, ...d)\n// always-declaration (also popular)\nexample({ a }, b?, c = 5, ...d)\n// always-name\nexample(__0, b, c, d)\n```\n\n`tsEssentialPlugins.methodSnippets.skip`:\n\n```ts\nconst example = ({ a }, b?, c = 5, ...d) =\u003e { }\n\n// only-rest\nexample({ a }, b, c)\n// optional-and-rest (default)\nexample({ a })\n// all\nexample() // (cursor inside)\n// no-skip (popular)\nexample({ a }, b, c, ...d)\n```\n\n`tsEssentialPlugins.methodSnippets.multipleSignatures`:\n\n```ts\n// overload 1\nfunction foo(this: {}, a)\n// overload 2\nfunction foo(this: {}, b)\nfunction foo(this: {}) {}\n\n// pick-first (default)\nfoo(a)\n// empty\nfoo(|)\n```\n\n`disableMethodSnippets.jsxAttributes`:\n\n```tsx\nconst callback = (arg) =\u003e {}\nfunction Foo() {\n    return \u003cdiv onClick={callback/* when true (default) - no expansion here */} /\u003e\n}\n```\n\n`tsEssentialPlugins.methodSnippets.previewSignature`:\n\nOptionally resolve insertText of all completion at suggest trigger:\n\n![method-snippets-insert-text](media/method-snippets-insert-text.png)\n\n### Ambiguous Suggestions\n\nSome variables like `Object` or `lodash` are common to access properties as well as call directly:\n\n```ts\nObject.assign(...)\nObject()\n// or\nlodash.version\nlodash(...)\n```\n\nTo not be annoying, we don't insert a method snippet on such suggestion accept.\n\nInstead, for these *ambiguous* suggestions we require you to accept the same suggestion twice to ensure you actually want a method snippet.\n\n## Auto Imports\n\nWith 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:\n\n- I never want to see `join` suggestion from `path/win32` module (it's a Node.js [module](https://nodejs.org/dist/latest-v18.x/docs/api/path.html#pathwin32), defined via module augmentation)\n- I never want to see any suggestions from `path/*` modules\n- I always want `join` to be imported from `path/posix` module on window (also would appear first in completions \u0026 single quick fix)\n- I always want `useState` to be imported from local files first\n\nSome settings examples:\n\n\u003c!-- just duplicated from configurationType --\u003e\n\n```jsonc\n\"suggestions.ignoreAutoImports\": [\n  \"path\", // ignore path, but not path/posix or path/win32 modules\n  \"path/*\", // ignore path, path/posix and path/win32\n  \"path/*#join\", // ignore path, path/posix and path/win32, but only join symbol\n  \"path/*#join,resolve\", // ignore path, path/posix and path/win32, but only join and resolve symbol\n],\n\"autoImport.changeSorting\": {\n    \"join\": [\"path/posix\"], // other suggestions will be below\n    \"resolve\": [\"*\", \"path/posix\"], // make `path/posix` appear below any other suggestions\n    \"useState\": [\".\"], // `.` (dot) is reserved for local suggestions, which makes them appear above other\n},\n// for some even more specific cases?\n// \"autoImport.alwaysIgnoreInImportAll\": [\"lodash\"] // exclude all possible imports from import all request\n```\n\n\u003e Note: changeSorting might not preserve sorting of other existing suggestions which not defined by rules, there is WIP\n\u003e Also I'm thinking of making it learn and sync most-used imports automatically\n\n### Namespace Imports\n\nIf you always want some modules to be imported automatically as namespace import, you're lucky as there is `autoImport.changeToNamespaceImport` setting for this.\n\nExample:\n\nYou're completing following Node.js code in empty file:\n\n```ts\nreadFileSync\n```\n\nDefault completion and code fix will change it to:\n\n```ts\nimport { readFileSync } from 'fs'\n\nreadFileSync\n```\n\nBut if you setup this setting:\n\n```json\n\"tsEssentialPlugins.autoImport.changeToNamespaceImport\": {\n    \"fs\": {},\n},\n```\n\nCompleting the same code or accepting import code fix will result:\n\n```ts\nimport * as fs from 'fs'\n\nfs.readFileSync\n```\n\nThere is also a way to specify different name for namespace or use default import instead.\n\nHowever there are cases where you have some modules injected globally in your application (e.g. global `React` variable), then you can specify *auto imports feature* to use them instead of adding an import:\n\n```json\n\"tsEssentialPlugins.autoImport.changeToNamespaceImport\": {\n    \"react\": {\n        \"namespace\": \"React\",\n        \"addImport\": false\n    },\n},\n```\n\n`useState` -\u003e `React.useState`\n\n## Rename Features\n\nThere is builtin mechanism to rename variable occurrences in strings \u0026 comments, it is disabled in VS Code without a way to enable it.\n\nHowever this extension also has builtin keybinding `Ctrl+Shift+Enter` that can be pressed when input box is visible to enable aforementioned behavior for renaming with preview.\n\nBut note renaming in strings \u0026 comments will happen only for files in which variable is actually referenced.\n\nYou can add this to `keybindings.json` to disable previewing before renaming:\n\n```js\n{\n    \"key\": \"ctrl+shift+enter\",\n    \"command\": \"tsEssentialPlugins.acceptRenameWithParams\",\n    \"args\": {\n        \"strings\": true,\n        \"comments\": true,\n        // \"preview\": true // true by default\n        // \"alias\": true // you can also specify here wether to introduce alias on rename if applicable (overriding global setting)\n    },\n    \"when\": \"renameInputVisible\"\n}\n```\n\n\u003e Note: VS Code has builtin setting to disable introducing aliases (e.g. for imports \u0026 object properties): `typescript.preferences.useAliasesForRenames`\n\n## Special Commands List\n\n### Go to / Select Nodes by Kind\n\nExtremely powerful command that allows you to leverage AST knowledge of opened file.\n\nUse cases: select all comments to exclude searching in comments. Or search \u0026 replace only within strings / find interested JSX attribute node.\n\n## Contributed Code Actions\n\n### Swap Keys and Values in Object\n\n\u003e *Note*: Code action displayed **only** when object is fully explicitly selected\n\nExample:\n\n```ts\nconst obj = {\n    key1: 'someValue',\n    key2: getSuperUniqueKey()\n}\n// turns into\nconst obj = {\n    'someValue': 'key1',\n    [getSuperUniqueKey()]: 'key2'\n}\n```\n\n### Turn Array Into Object\n\n```ts\nconst data = [\n    {\n        // test\n        key: 'bar',\n        a: 0\n    },\n    {\n        key: 'baz',\n        // yes\n        b: 1\n    }\n]\n```\n\nAfter selecting code action, you'll get asked for key to used (here you can use only `key`) and after applying:\n\n```ts\nconst a = {\n    'bar': {\n        a: 0\n    },\n    'baz': {\n        // yes\n        b: 1\n    }\n}\n```\n\n(note that for now refactoring removes properties with comments!)\n\n## Even Even More\n\nAlso please take a look at extension settings, as this extension has much more features than described here!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzardoy%2Ftypescript-vscode-plugins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzardoy%2Ftypescript-vscode-plugins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzardoy%2Ftypescript-vscode-plugins/lists"}