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) {}