Code Monkey home page Code Monkey logo

typescript-sublime-plugin's Introduction

TypeScript Plugin for Sublime Text

Join the chat at https://gitter.im/Microsoft/TypeScript-Sublime-Plugin

The plugin uses an IO wrapper around the TypeScript language services to provide an enhanced Sublime Text experience when working with TypeScript code.

Requirements

The plug-in uses Node.js to run the TypeScript server. The plug-in looks for node in the PATH environment variable (which is inherited from Sublime).

If the node_path setting is present, this will override the PATH environment variable and the plug-in will use the value of the node_path setting as the node executable to run. See more information in our Tips and Known Issues wiki page.

Using different versions of TypeScript

This plugin can be configured to load an alternate version of TypeScript. This is typically useful for trying out nightly builds, prototyping with custom builds, or compatibility with node_modules-free package managers like Yarn 2. To do that, update the Settings - User file or your project settings with the following:

"typescript_tsdk": "<path to your folder>/node_modules/typescript/lib"

Installation

If using Package Control for Sublime Text, simply install the TypeScript package.

Alternatively, you can clone the repo directly into your Sublime plugin folder. For example, for Sublime Text 3 on a Mac this would look something like:

cd ~/"Library/Application Support/Sublime Text 3/Packages"
git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript

And on Windows:

cd "%APPDATA%\Sublime Text 3\Packages"
git clone --depth 1 https://github.com/Microsoft/TypeScript-Sublime-Plugin.git TypeScript

(--depth 1 downloads only the current version to reduce the clone size.) Note if you are using the portable version of Sublime Text, the location will be different. (See http://docs.sublimetext.info/en/latest/basic_concepts.html#the-data-directory for more info).

IMPORTANT If you already have a package called TypeScript installed, either remove this first, or clone this repo to a different folder, else module name resolution can break the plugin.

Platform support

OS:

The plugin has identical behavior across Windows, Mac, and Linux;

Sublime Text version:

The plugin supports both ST2 and ST3. However, some features are only available in ST3:

  • Tool tips
  • Error list

On Windows with ST2, you may see a "plugin delay" message upon startup. This happens because ST2 does not call "plugin_loaded()", so the TypeScript server process is started from within an event handler.

Where possible, the use of a Sublime Text 3 build >= 3070 is recommended, as this provides a popup API used for tool tips.

Features

The below features are available via the keyboard shortcuts shown, or via the Command Palette (^ means the ctrl key):

Feature Shortcut
Rename ^T ^M
Find references ^T ^R
Next reference ^T ^N
Prev reference ^T ^P
Format document ^T ^F
Format selection ^T ^F
Format line ^;
Format braces ^ Shift ]
Navigate to symbol ^ Alt R
Go to definition ^T^D or F12
Trigger completion ^Space
Trigger signature help Alt+,
See previous signature in the tooltip Alt + up
See next signature in the tooltip Alt + down
Paste and format ^V or โŒ˜V
Quick info ^T ^Q
Build (Win)^B or F7, (OSX) โŒ˜B or F7
Error list (via Command Palette)

The "format on key" feature is disabled by default, which formats the current line after typing ;, } or enter. To enable it, go to Preferences -> Package Settings -> TypeScript -> Plugin Settings - User, and add "typescript_auto_format": true to the json file.

For further information about the keyboard shortcuts, please refer to the Default.sublime-keymap file for common shortcuts and Default (OSX).sublime-keymap, Default (Windows).sublime-keymap, Default (Linux).sublime-keymap for OS-specific shortcuts.

Other settings

These settings can be overridden in Packages/User/TypeScript.sublime-settings, which you can open by going to Preferences -> Package Settings -> TypeScript -> TypeScript Settings - User.

  • error_color: the color of the lines drawn underneath/around type errors; either an empty string for the default color, or one of "region.redish", "region.orangish", "region.yellowish", "region.greenish", "region.bluish", "region.purplish", "region.pinkish"
  • error_icon: specifies a gutter icon, defaults to nothing can be set to "dot", "circle", "bookmark" or any other value accepted by Sublime Text
  • error_outlined: will draw type errors with a solid outline instead of the default which is a squiggly line underneath
  • quick_info_popup_max_width: the max width of the quick info popup, default 1024
  • node_args: array of command line arguments sent to the tsserver Node.js process before the tsserver script path (useful for e.g. changing max heap size or attaching debugger to the tsserver process)
  • tsserver_args: array of command line arguments sent to tsserver Node.js process after the tsserver script path (useful for e.g. overriding tsserver error message locale)
  • tsserver_env: environment variables to set for the tsserver Node.js process (useful for e.g. setting TSS_LOG). These variables are merged with the environment variables available to Sublime.
  • auto_complete_api_completions_only: boolean to make the autocompletion only provides typescript suggestions and hides the standard completions (aka, all the words of the page). (Default value: false).

Project System

The plugin supports two kinds of projects:

Inferred project

For loose TS files opened in Sublime, the plugin will create an inferred project and include every file that the current file refers to.

Configured project

The plugin also supports representing a TypeScript project via a tsconfig.json file. If a file of this name is detected in a parent directory, then its settings will be used by the plugin.

Screenshots

  • Project error list

  • Navigate to symbol

  • Format

  • Rename

  • Find all references

  • Quick info

  • Build configured project

  • Build loose file

Reporting Issues

Issues are being tracked via the GitHub Issues page for the project, and tagged with the appropriate issue type. Please do log issues for any bugs you find or enhancements you would like to see (after searching to see if such as issue already exists). We are excited to get your feedback and work with the community to make this plugin as awesome as possible.

Note about .tmLanguage related issues

As the TypeScript and TypeScriptReact .tmLanguage definition files are shared across multiple editors including Sublime Text, Atom-TypeScript, and Visual Studio Code, we decided to create a dedicated repo for these files to combine the efforts for improvement. The new repo is at https://github.com/Microsoft/TypeScript-TmLanguage, and all future tmLanguage-related issues will be tracked there and ported back to this repo.

Tips and Known Issues

See tips and known issues in the wiki page.

typescript-sublime-plugin's People

Contributors

addreas avatar adill avatar alecmev avatar alexburner avatar aminroosta avatar anickplx avatar artemsnisarenko avatar bertilnilsson avatar billti avatar chbrown avatar danielrosenwasser avatar danquirk avatar evandrocoan avatar hinzo avatar hoanhtien avatar idiotwu avatar jgoz avatar kbjr avatar kungfusheep avatar kylebebak avatar mattbroussard avatar mhegazy avatar msieurtoph avatar rgant avatar sandersn avatar selvasingh avatar steveluc avatar ukyo avatar w1ndy avatar zhengbli avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

typescript-sublime-plugin's Issues

Rename causes an extra "ghost" class rename to show up

Build - Pulled from TypeScript-Service Master branch at 2/19, 3:00pm
Platform - Sublime Text 3 on PC

See attached for repro project (rename from .png to .zip to unzip my project)

I have a file "dog.ts" that defines a class "Dog". I have a file called "cat.ts" that does not ///ref "dog.ts", yet it tries to create a "Dog" object (which rightfully results in a squiggle. In my "dog.ts" class, I then rename "Dog" to "AwesomeDog". For some reasons a "AwesomeDog" is then added to the bottom of my dog.ts file.

typescripthtmlapp1_b zip
renamerepro2

quickinfo request results in exception if executed on a /// <reference>

  • TS Mankala example
  • open Position.ts
  • hover over "Games.ts" on line 2

The service ends in an exception:

Err 49 Exception on executing command {"seq":108,"type":"request","command":"quickinfo","arguments":{"file":"P:/Playgrounds/sample-mankala/Position.ts","line":2,"col":24}}:
No Content.
Error: No Content.
at Errors (P:\BPT_Projects\Monaco\client\vs\languages\typescript\service\lib\tsserver.js:31147:32)
at ts.server.ts.server (P:\BPT_Projects\Monaco\client\vs\languages\typescript\service\lib\tsserver.js:31148:11)
at ts (P:\BPT_Projects\Monaco\client\vs\languages\typescript\service\lib\tsserver.js:31746:7)
at Object. (P:\BPT_Projects\Monaco\client\vs\languages\typescript\service\lib\tsserver.js:31747:3)
at Module._compile (module.js:456:26)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)

Brace completion does not correctly handle overtyping

if I type

interface I {

It completes to

interface I {}

by inserting the close brace.

However, if I now type the close brace myself, it inserts another one, rather than overtyping the inserted one.

interface I { }}

Error takes a very long time to appear

Open checker.ts, and navigate to the line

globalESSymbolConstructorSymbol = getGlobalValueSymbol("Symbol");

Change it to the following:

globalESSymbolConstructorSymbol = getGlobalValueSymbol("Symbol", 0);

This new code is wrong, but it takes a very long time (at least 20 seconds) for an error to appear.

Then remove the extra argument, and the error also lingers for a very long time.

Navigation to a reference via find all references doesn't work

Steps to reproduce (Sublime Text 3):

  1. Add bpt\diagnostics\common to your project.
  2. Open control.ts.
  3. Go to line 33, put the cursor on "oldRoot" and press ctrl + t, r.
  4. In the references list that opens, try clicking on any references.

Expected: Sublime navigates to the line you clicked on.
Actual: Nothing happens.

Support requests in the JSON format

Currently requests are a simple string and the responses use JSON. It should be supported to make the request using JSON as well and to correlate the request with a response. Each request should have a response.

Implement signature help

If I have

declare function foo(s: string);
declare function foo(n: number);
foo(

It is very helpful to see the signatures of foo. Though I'm not sure whether it is better to use the completion list UI or the status bar.

Broken pipe error after installing on Sublime 3 on Mac

I've just installed the plugin on the mac by cloning this repo into the Packages folder. I opened checker.ts, and colorization and completion are working, but nothing else is.

When I open the console, I keep seeing the quickinfo command coming through, but it results in a broken pipe error:

{"command": "quickinfo", "arguments": {"line": 197, "col": 38, "file": "/Users/jfreeman/ts/src/compiler/checker.ts"}, "type": "request", "seq": 311}
Traceback (most recent call last):
  File "/Applications/Sublime Text.app/Contents/MacOS/sublime_plugin.py", line 549, in run_
    return self.run(edit)
  File "/Users/jfreeman/Library/Application Support/Sublime Text 3/Packages/TypeScript.py", line 787, in run
    cli.service.quickInfo(self.view.file_name(), getLocationFromView(self.view), self.handleQuickInfo)
  File "/Users/jfreeman/Library/Application Support/Sublime Text 3/Packages/libs/serviceproxy.py", line 95, in quickInfo
    self.__comm.sendCmd(onCompletedJson, jsonStr, req.seq)
  File "/Users/jfreeman/Library/Application Support/Sublime Text 3/Packages/libs/nodeclient.py", line 85, in sendCmd
    self.postCmd(cmd)
  File "/Users/jfreeman/Library/Application Support/Sublime Text 3/Packages/libs/nodeclient.py", line 121, in postCmd
    self.__serverProc.stdin.write(cmd.encode())
BrokenPipeError: [Errno 32] Broken pipe

And when I make an edit, I get:

{"command": "change", "arguments": {"line": 198, "file": "/Users/jfreeman/ts/src/compiler/checker.ts", "endLine": 198, "insertString": "", "col": 27, "endCol": 28}, "type": "request", "seq": 371}
Traceback (most recent call last):
  File "/Applications/Sublime Text.app/Contents/MacOS/sublime_plugin.py", line 374, in on_text_command
    res = callback.on_text_command(v, name, args)
  File "/Users/jfreeman/Library/Application Support/Sublime Text 3/Packages/TypeScript.py", line 589, in on_text_command
    sendReplaceChangesForRegions(view, self.expandEmptyLeft(view.sel()), "")
  File "/Users/jfreeman/Library/Application Support/Sublime Text 3/Packages/TypeScript.py", line 358, in sendReplaceChangesForRegions
    cli.service.change(view.file_name(), location, endLocation, insertString)
  File "/Users/jfreeman/Library/Application Support/Sublime Text 3/Packages/libs/serviceproxy.py", line 23, in change
    self.__comm.postCmd(jsonStr)
  File "/Users/jfreeman/Library/Application Support/Sublime Text 3/Packages/libs/nodeclient.py", line 121, in postCmd
    self.__serverProc.stdin.write(cmd.encode())
BrokenPipeError: [Errno 32] Broken pipe

Error string is not shown if the class doesn't implement the methods for the interface

[found by Will Anderson]

interface ITest {
foo(): number;
}

class Sub implements ITest {
constructor() {
}
}

Sub will show a squiggly but when clicked on it the error doesn't show up in the status bar. The output window show this exception:

{"command": "quickinfo", "type": "request", "arguments": {"line": 7, "col": 9, "file": "E:\tls\samples\test.ts"}, "seq": 1970}
Traceback (most recent call last):
File "C:\Program Files\Sublime Text 3\sublime_plugin.py", line 549, in run_
return self.run(edit)
File "C:\Users\hania\AppData\Roaming\Sublime Text 3\Packages\TypeScript\TypeScript.py", line 841, in run
self.view.set_status("typescript_error", errorText)
File "C:\Program Files\Sublime Text 3\sublime.py", line 887, in set_status
sublime_api.view_set_status(self.view_id, key, value)
TypeError: String required

An error at the EOF has no span

var map:

This gives the correct error ("Type expected"), but has no span if it is at the end of the file. In cases like these, VS uses the last character of the file as the span. That way the user sees that there is an error.

Stale errors (both spans and messages)

Type the following:

C

As expected, you get an error on C: "Cannot find name C".

Now insert the word "static" before "C".

Expected: New error "Declaration or statement expected" on the word "static".
Actual: Status bar still shows old message with old span.

No format/indent on paste

if (true) {

}
var x = 'hello';

Copy the last line to the clipboard, and paste it inside the if block.

Expected: var statement gets indented
Actual: does not get indented

VS has this functionality.

Page up/down in intellisense menu

I keep expecting page up/down to work in the intellisense menu because it can be very long. Instead it closes the menu and does page up/down on the document. This would just be nice to have.

Slow plugin warning

Opened bpt\diagnostics folder in Sublime Text 2 and was randomly clicking around in the files pane to open different files, when I saw this warning within first 10 seconds.

Unfortunately I don't have clear repro steps. I will update if I am to do it deterministically.

capture

Squigglies only appear on first export violation

Make a new file in sublime text 3 and paste this into the editor:

export class Foo {
}

export class Bar extends Foo {
}

You will see a squiggly under Foo because we are exporting a class in a non-module. However, you will not see a squiggly under Bar.

Expected: Squigglies under both Foo and Bar.

Support requests in the JSON format

Currently requests are a simple string and the responses use JSON. It should be supported to make the request using JSON as well and to correlate the request with a response. Each request should have a response.

Toggle comment does not work for TypeScript

In the edit menu, there is a toggle comment command, but it does not do anything. I would expect it to put // before all the lines in my selection. There is toggle block comment as well.

Support occurrences highlighting

When the cursor resides on a word, it would be helpful to populate appropriate regions.

Looks like add_regions might be the relevant API, with sublime.DRAW_NO_FILL for now.

Consider the Roslyn timeouts:

  • 1.5 seconds after edits
  • 50 milliseconds for non-destructive events (i.e. arrow keys, clicks)

Have file A ///ref file B, and make use of a class defined in file B. In file A, a rename on the class will not cause a rename in file B, resulting in a syntax error

Build - Pulled from TypeScript-Service Master branch at 2/19, 3:00pm
Platform - Sublime Text 3 on PC

See attached for repro project (rename from .png to .zip to unzip my project)

I have two files, cat.ts that defined "Cat" class, and dog.ts that ///ref cat.ts, and creates multiple "Cat" objects. In dog.ts, go to a "Cat" and do a rename to "AwesomeCat". Notice that only "Cat"s in dog.ts gets renamed, cat.ts still has "Cat". Also, I noticed that in dog.ts", the class that was defined as "Dog" got renamed to be "AwesomeCat" - it should have been left alone as "Dog".

typescripthtmlapp1 zip
renamebug

Open-bracket + Enter doesn't indent

Reproduction steps

  • Open a new file in Sublime Text 3
  • Save the file as "test.ts"
  • Type this:
class NewClass {
  • Hit the <ENTER> key

Expected result

class NewClass {
<TAB><CURSOR HERE>
}

Actual result

class NewClass {
<CURSOR HERE>}

Details

  • Sublime Text 3 Build 3065
  • TypeScript plugin distributed February 17
  • Windows 8.1

Plugin should be able to figure out if a file is an AMD module

Make a new file and paste this into sublime text 3:

import blah = require("blah");

export class Foo {
}

You will see red squigglies under the import statement with the error "Cannot compile external modules unless the '--module' flag is provided.

  • How do I provide the --module flag?
  • It seems like the language service understands this is a module, because if I remove the import line I get a squiggly under 'Foo' because the file is no longer a module.

non fatal error message when loading the plugin

In the output window, we are getting module not found error for jsonhelpers.

Seems like sublime is loading all the py files in the current folder. The solution would be to move the library files to a sub folder.

[Found by AlecG]

F12 go-to-definition is broken

Go-to-def is Ctrl+T,Ctrl+D. Go to declaration doesn't even have a well-defined concept in our language. Let's just make the two equivalent.

Never mind, it seems that the keybinding is go-to-defintion, but it is not working correctly.

From parser.ts

module ts {
    var nodeConstructors = new Array<new () => Node>(SyntaxKind.Count);
    /* @internal */ export var parseTime = 0;

    export function getNodeConstructor(kind: SyntaxKind): new () => Node {
        return nodeConstructors[kind] || (nodeConstructors[kind] = objectAllocator.getNodeConstructor(kind));
    }

If you try F12 on Node, it will only work if types.ts is open.

If you try F12 on nodeConstructors, kind, SyntaxKind, or objectAllocator, nothing happens (e.g."Unable to find nodeConstructors"), even if types.ts is open.

If you try F12 on getNodeConstructor of objectAllocator.getNodeConstructor, it takes you to the wrong place (i.e. it takes you to the above function definition, instead of ObjectAllocator in core.ts

Keep in mind, Ctrl+T, Ctrl+D works for all of these

The language service still references a file although it got deleted from disk

In ref.ts have some class

in test.ts have some class that extends the class in ref.ts

close ref.ts from the editor.

Delete (or rename) ref.ts in the file system.

type anything in test.ts and the reference tag at the top doesn't show as error. You can even still reference the members in the parent class.

Expected, it should show few errors in test.ts since ref.ts was gone.

Display function arguments after autocomplete

The auto-complete is fantastic, but the one major thing missing is help filling in arguments. Right now, after I press enter to insert a function name, I immediate go to definition on the function to see its arguments. Then I go back and try to fill them in. And this gets tedious if the argument is a complex type with lots of constructor arguments.

It would be really great if you could display these to the user after they auto-complete a function name.

Auto-formatting causes huge lag in ST3 with new files

Reproduction steps

  • Open a new file in Sublime Text 3
  • Save the file as "test.ts"
  • Type this:
var test = false
  • Type ; (semicolon)

Expected result

A semicolon appears instantly.

Actual result

Long (2-5 second) period of time where ST3 appears frozen and doesn't respond to keypresses. Semicolon (and all other keys pressed) appear after lag.

Details

  • Sublime Text 3 Build 3065
  • TypeScript plugin distributed February 17
  • Windows 8.1

"Cannot find name" error name is jumbled with actual text

I've only managed to repro this on a F12 code file. I put it up at \bptfs1\public\roblou\tsss\selfTestPageUI.ts. There are lots of errors here for missing things but it also reproes in the actual source directory.

Find onKeyDown, highlight Event, type KeyboardEvent. I get something different every time depending on whether I type the full string myself or use autocomplete.

This is ST3 on PC.

bug1

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.