Typescript-plugin-proactive-code-fixes NPM

typescript-plugin-proactive-code-fixes

TypeScript Langauge Service Plugin with several small proactive code refactors to solve errors (diagnostics) like creating constructor when a non existent one is invoked, declaring a variable or class when non existent one is defined, reassigning a const, etc. The tool is based both on the context of the user and on the current diagnostic error in cursor position / selection

The objective is to provide most refactor suggestions for agile code development seen in other strongly typed languages / IDEs like Java/eclipse

In general refactors are non aggressive so the shouldn't do harm. Still more testing is needed and some suggestions appear where they shouldn't or viceversa doesn's appear in al places where they should. Still I think it's useful and is sowly reaching the objective.

Fixes and Refactors

A lot is still to be fixed and implemented but we have several helpful and stable fixes working already:

Fixing and refactoring variables

Implementing types / prototyping

Declare classes and interfaces when trying to extend or implement something that doesn't exist
Declare an interface from return value
Declare missing constructors when calling new A(a,b) on a class/interface that doesn't declare it
Declare interface from return value
Fix object literal so it implements its interface or class. It will adding / remove or change object literal members so it comply with its interface or class
declare member - complements the code fix already existing in typescript to fullfill all cases. declaring missing properties / methods
add missing return statement
Declare missing classes and interfaces
Make member public (change the scope of a member when expression is trying to access it)
Refactoring
Transform parameter list into single "named" parameter. Splits variable declaration list in individual variable statements.
Arrow Functions - add / remove body braces.
Extract interface from class or object literal declaration.
Delegate Methods to Property
Transform string concatenation into string templates and viceversa

Formatting

change string literal quotes
remove empty lines form selected region

and more to come!!

Editor Support

This plugin will work with any text editor that leverages TypeScript Language Service. I've successfully tested Visual Studio Code (without any extension) and Atom editor using atom-typescript package. But other editors should also work like Sublime Text, webstorm, eclipse, emacs, vim. (TODO: test)

The same example using vscode and atom is shown in Declare an interface from return value demo and the same is true for the rest of the fixes (I only show vscode for the rest).

How to install and use it

npm i --save-dev typescript-plugin-proactive-code-fixes

In your tsconfig.json, add the plugin like this:

{
  "compilerOptions": {
    "plugins": [{
        "name": "typescript-plugin-proactive-code-fixes"
    }]
  }
}

Make sure you have installed typescript in your project (npm i --save-dev typescript) the editor you are using uses that typescript and not another. For example, Visual Studio Code comes with its own typescript version, so you need to "Select TypeScript Version" of the workspace:

{
  "typescript.tsdk": "node_modules/typescript/lib"
}

In Atom editor, if you use atom-typescript package you don't need to do anything since by default it will use the workspace's TypeScript version.

Fixes and demos

Variable related fixes and refactors

Quick fixes when you forgot to declare variables, have duplicates, reassigning a constant or need to transform a list of variable declarations into single declaration statements, etc:

Variable related fixes and refactors

Transform parameter list into single object parameter

When you have functions accepting several parameters and you keep adding more and more, sometimes it's a good idea to convert the parameter list into a single parameter object that implements an interface so the contract is there and not in the function signature.

This is particularly useful when writing APIs that need to maintain backwards compatibility.

Select a fragment of a parameter declaration list and it will offer to declare all parameters in an interface and use them as an object literal.

Idea taken from here: https://github.com/Microsoft/TypeScript/issues/23552

Demo in Atom editor:

Transform parameter list into a single object parameter Atom editor demo

Arrow Functions remove and add body braces

Arrow Function - remove - add body braces vscode editor demo

Extract interface from class or object literal declaration

Extract interface from class or object literal declaration vscode editor demo

Delegate Methods to Property

When you want to expose the methods of a property in parent class or interface. Suggested when standing in a class or interface property.

Delegate Methods to Property- vscode editor demo

String concatenation to templates and viceversa

String concatenation to templates and viceversa - vscode editor demo

Declare classes and interfaces

No much to say here - if you extends or implements an class or interface that is not declared yet the refactor will suggest you to declare it.

Declare classes and interfaces vscode demo

Declare constructors

Basic refactor of any descent strongly typed language IDE

vscode demo creating variables and constructors declarations

Declare interfaces from return values

Useful for quickly prototype interfaces when writing the implementation.

Visual Studio Code Editor

Declare interfaces from return values - Visual Studio Code Editor

Atom Editor

Declare interfaces from return values - Atom Editor

TODO

create a json file {production: false}. npm prepare script will change it to {production: true}. index.ts will import it and it will log and load utility plugins only if production === false so its faster on production and we can log a lot stuff and heavy utilities while development
config - fixes have great ideas for config but is not currently working.
programmatical API
unit test: test that the suggestion appear only when it should - in other words test for false positive predicate
generate tsdocs because all fixes are very well documented / roadmap.
Performance - getAppRefactors is taking almost sec. Make a generic predicate with cache (get which diags are in current position and cache it - make a generic predicate since almost all use the same thing)
apply all quick fixes in this file ! define a mechanism of priorities when two or more fixes attach the same position.
perhaps we could just recreate the simple-ast sourcefile instead of the whole project
use getcodefixes instead of refactors - blocked - done but no way of defining expensive fixes
make sure for each if error is selected in problems view then that selection will suggest the fix
new member declarations should add jsdoc
declare return type very buggy