VSCode extensions

[zardoy]

Comment if you know that one of these already exists.

Plugins, that would be awesome to have:

• impoved paths: path.join(__dirname , special markers drop file with alt with paste unix-path to file normalize paths on paste

Links to search:

• VSCode Marketplace
• https://awesomeopensource.com/projects/vscode-extension

[zardoy]

NPM THE FASTEST

• done
• manage packages command:
  • intellisense in both
  • • | add for installing (auto install @types if project don't have type defs check not types) + prediction for dep/devDep + auto install peer deps (vk-mat)
  • • | del for removing (auto remove @types)
  • ! | up for upgrading - investigate
  • mv [dep direct | dev devDep | peer | opt optional] move dep in package.json only
  • npm to open npm page of dep
  • yarn to open yarn/package of dep
• open module folder (show version right + direct or not)
• auto install deps on git pull
• replacement for: typac types-installer
• meaningful messages Do you wish to continue installation? if migrated (like material-ui) suggest installing that package. special message for @types/*
• Install TypeScript support (use ttypescript in projects, tsconfig presets)
• Restrict usage only with your package manager (add prescript like in another-game-with-ilya)

Package.json autocompletion:

• name:

  • workspace if at least one exists: same org plus dir name
  • workspace if no exists or not workspace: dir name, (possibly prefixed with origin author or npm login - disabled by default)
  • repository: origin, workspace handled with path (config - short or full)
  • author
  • node, engine
  • bin - investigate
  • license: MIT
  • main, types - outDir +
  • deprecate typings
  • files: outDir
  • version: 0.0.0-development

• Investigate fields rename:

  • name
  • repository

[zardoy]

TypeScript symbol search

The killer feature: regexps

Provide search inside TypeScript files for type symbols, but some of them:

• Review with outline (types in VSCode settings)

• markers

• Types name

• namespaces

• Interface names (TypeInterface)

• property name (filter in: Type, Interface; filter which: method, predicate type)

• function name

Allow context switch:
default: root

• Type/Interface[].
• function/method[]: parameter: name / type predicate; in body.

[zardoy]

Change Brace Type: Bracketeer

Provides simple command to change opening and closing brace type. Useful for fixing syntax errors while refactoring.

[zardoy]

Most Like Brace (stale)

Introduce two modes:

• AutoFix (investigate with .value in Volar)
• QuickFix suggestion

Examples

TODO: investigate

[zardoy]

SyntaxFix

Utility-extension for fixing syntax errors.

This extension doesn't mean to provide refactors / code style fixes and so on. There's ESLint --fix with plugins for you. Checkout XO plugins list, for example it can enforce you to have querySelector only in the whole codebase.

Examples

{ d = 5; u: 9; } /* -> */ { d: 5, u: 9 }

Braces

TBD

Notes

• Don't provide (or encourage to use) autofixer for the whole file (or files). (see below)

Usage

You need to understand how it works and you'd better to always see what you're going to fix, otherwise it can totally broke anything. That's why you should always apply autofix only for selected lines.

[zardoy]

IMP EXP: Better Snippets

Priority: high

[zardoy]

Map Key or Values

Target: TS only for now

Snippet to replace all keys (with filtering by regex support) or values

[zardoy]

Filter Suggestions

Priority: high

Support for now: JSX, object arguments

Later: Used only where on options arguments (where property suggestions are available):

Shortcuts to:

1. Show only callbacks
2. non-callbacks
3. Write custom type (predicate)

[zardoy]

Exact Suggestions: in TS Essential Plugins

Priority: high

This extension kick offs all useless suggestions in these places:

Basic Support

• export const|from|default
  from by default should be enabled only for index.ts/mjs files

Extended Support

Related

Some kind of that suggestions have cmstead.js-codeformer on actions like introduce...

[zardoy]

Wrap console.time

Solution: builtin Surround with Snippet or Surround (ADS!)

Also detects name with 1st ttsc plugin

[zardoy]

TypeScript Type playground

Status: investigating for builtin/external ext by core

TypeScript playground (ts playground) is fun, but let's take this expression:

type A<T> = T extends Record<string, infer U> ? U : T;

And I want to test this generic. In ts playground I can write another type and hover over it:

type B = A<number>
   number (in hover)

But what if I want to change type? I need to hover again, and again.

• Test any type instantly (probably integrate with notebooks)

• Highlight generic path

• Hover any type in testing type
  In example above with when testing type A<{ a: string, b: 5 }> it should highlight T extends Record<string, infer U> ? U path and hovering on U should display string | 5

• Toggle / show diff with generic and without (only if type generic has one argument)

• change name

[zardoy]

VSCode Framework

Helps authoring extensions with (or without vscode-framework).

• Autocomplete product icon reference

[zardoy]

Dynamic Snippets (Live Templates)

Status: available now as a feature of Zardoy Experiments
Will be in postfix 2

const requiredDeps = ['...']
requiredDeps.forof -> for (const requiredDep of requiredDeps) {}

[zardoy]

Search JSDoc

Search in context for JSDoc: description or value of specifig tag.

Context can be:

• Properties of: function arg (object), Iterface, type, whole packages!

[zardoy]

Regex101

Status: using codeactions from Zardoy Experiments to preview regexs on this site. Too hard to reimplement.

Try to 1:1 implement https://regex101.com/

• regex suggestions in replace and obj match

[zardoy]

Git Push Please

Status: still would be good to have

[zardoy]

Insane Snippets: Better Snippets

location:

• line start
• writing object property
• writing object value
• writing
• inside string literal
• where type:
  • number, boolean, string
  • async (thenable)
  • object that have property [regex o] [with type]
  • object that have property

type:

• complete line statement (insert semicolon)

• create snippet from code command

Postfix Snippets

Can be extended from JSDoc.

Const name inference [eslint link]:

• optional.get('userId')
• or getWhatever('userId')

[zardoy]

TypeScript Typing Snippets: Better Snippets

• Auto close <>

Only explicit.

• P -> Parameters
• p -> Pick
• pa -> Partial
• t -> typeof
• r -> Record
• rt -> ReturnType
• nn -> NonNullable
• E -> Extract
• e -> Exclude

Special:

These are also define them on top of the file:

• MaybePromise<>
• AsyncVoid<> == void | Promise<void>
• ex -> Except type-fest, define otherwise

[zardoy]

More TypeScript Fixes: in TS Essential Plugins

Refactorings

Actions, only when you know what are you doing:

• can be undefined - add !

Syntax: covered by SyntaxFix

QuickFixes:

• missing props: something like ts QuickFixes now we have builtin codeaction, but only snippet-like. TODO: reuse builtin, insert snippet on use
• missing arg destruct props

[zardoy]

TypeScript Explorer

Status: would be good to have, not worth implementing

Explore:

• (Exported) Types with type predicate
• (Exported) variables with type predicate

Variants to use:

• (primary) side-view
• full view
• open quickpick with arg

[zardoy]

Enhanced Terminal

Status: would be good to have, not worth implementing atm

• add node_modules commands as they were in %PATH%
• any support of fig

[zardoy]

Send talku

• ignore. not extension

• windi

• apollo

• tailwind

TODO: https://github.com/telesoho/vscode-markdown-paste-image

[zardoy]

Markdown Extended Snippets: Better Snippets

[zardoy]

Always Tab

Status: works with import today in Zardoy Experiments

Always teleports you in these regions (vice-versa):

Two < > on the same line means you can jump forth-and-back.
< > and [ ] on one line means you can only jump only < > -> [ ]
< > and [ ] means areas

import <{ something }> from <"./imp">
export <{ something }> from <"./imp">
const <{ something }> = require(<"./imp">)
<( args )> => [return value] (but only if body on the same line) would be hard to implement

Ensure:

when closure that disables usage in snippets, suggestions

investigate suggestions

[zardoy]

Cosmiconfig

Desc: Autocomplete configs.

Show autocomplete:

• for now only in:
  • under package.json prop
  • .rc.json

Commands:

• add $schema JSON propety for native autocompletion: Add schema json property for this config

Builtin Configs

Later.

Bootstrap repo some-configs as a temporary store for application configs, that do not have their config on schemasctore.

Bundle with all popular configs: some-config + schemastore.

[zardoy]

Readable Snapshots

[zardoy]

TypeScript Interactive

Like quokka, but:

• uses esbuild and diagnostic API
• auto installs required modules with pnpm --ignore-scripts
• follow active file mode: change cwd, when left side editor changes

More?

TypeScript playground features: display types inline

[zardoy]

Vetur Addons: Vetur Extended

0. Usages at name
1. Definitions and usages for date, computed, props in v- directives.
2. Make from '' clickable if path src/module exists but module not.
3. class...

[zardoy]

JSON TS Type

Alternative way to specify $schema in JSON files for getting completions. Example:

{
    "$type": "../index.ts#ConfigurationType",
    "config": ""
}

.ts should be optional

Plans: patch JSON service with provided $schema pointing to in-memory schema, generated from TS via TJS.

For first time, only exported types will be supported, then will can support (via patching) the script.

[zardoy]

Platform Specific Settings

• Investigate extension

[zardoy]

VSCode Scripting

Write scripts using full VSCode API