Skip to content

Rewrite atom-typescript to use tsserver API #1166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 74 commits into from
Mar 20, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
74 commits
Select commit Hold shift + click to select a range
67c15e3
Update Typescript
guncha Nov 18, 2016
7600890
Create TypescriptServiceClient
guncha Nov 25, 2016
20d3552
Notify tsserver of open, change and close events
guncha Nov 26, 2016
50e884c
Use errors from tsserver
guncha Nov 26, 2016
053d190
Update some typings
guncha Nov 26, 2016
65f0e93
Make linter use tsserver diagnostics, fix a one off error
guncha Nov 26, 2016
758d28b
Show pending requests
guncha Nov 27, 2016
2bd6455
Convert all uses of quickinfo
guncha Nov 27, 2016
093442d
Worky work on the work work
guncha Nov 30, 2016
ad6d932
Update Typescript
guncha Nov 30, 2016
b4075b5
Merge branch 'update-typescript' into use-tsserver
guncha Nov 30, 2016
db2e62c
Map between filePaths and editors
guncha Nov 30, 2016
967cbce
Add tslib and use importHelpers
guncha Nov 30, 2016
f16a8ba
Remove some more codes, wait until grammar is loaded to start the plugin
guncha Dec 1, 2016
35cecd5
Delete more things
guncha Dec 1, 2016
46f6e05
Delete all the things
guncha Dec 1, 2016
cafe364
Trim down the dependencies and more
guncha Dec 1, 2016
ae981ee
Use ES6, use push style linter
guncha Dec 3, 2016
a6d9cde
Highlight occurrences in the open file
guncha Dec 4, 2016
b88e6ad
Create TypescriptEditorPane
guncha Dec 4, 2016
081cd0f
Only check all open files on save
guncha Dec 4, 2016
c33ed0c
Make mainPanel not global
guncha Dec 5, 2016
a2dd02e
* Update the config file name in panel better
guncha Dec 5, 2016
a76ede1
Create an empty StatusPanel
guncha Dec 5, 2016
8a9baf2
stuiff
guncha Dec 9, 2016
efda87f
Show TS version, project path and pending requests in status bar
guncha Dec 17, 2016
a8b1709
Debounce the pending dispaly
guncha Dec 17, 2016
2e867a3
Show emit status in the status panel
guncha Dec 17, 2016
7743ef2
Re-implement the autocomplete provider
guncha Dec 19, 2016
efc183c
Tweak the highlighting a little
guncha Dec 19, 2016
ce6c5f2
Remove unused react typings
guncha Dec 19, 2016
79fd8ba
Fix minor things with the autocomplete provider
guncha Dec 22, 2016
616d6c3
Don’t trigger occurrences when editing
guncha Dec 22, 2016
e5ab667
Use onDidStopChanging for change notifications
guncha Dec 22, 2016
84b1fba
Restore goToDefinition command
guncha Dec 22, 2016
907b796
Fix some issues with the emit status, completions
guncha Dec 22, 2016
9f2f2ea
Fix server getting out of sync due to changes event
guncha Dec 22, 2016
c2ee088
Add CheckAllFiles and FindReferences commands
guncha Dec 22, 2016
3ceb31a
add ClearErrors command, show progress while checking all files
guncha Dec 23, 2016
e1cccbe
Add Build command
guncha Dec 23, 2016
66b4cc5
Implement basic rename refactor
guncha Dec 25, 2016
67167c8
Rename some files for consistency
guncha Dec 25, 2016
191990f
Ensure changes right before saving are picked up
guncha Dec 27, 2016
bf05d06
Log tsserver output with console.warn
guncha Dec 28, 2016
2138ef8
Use a nightly Typescript to fix the line ending issue
guncha Dec 28, 2016
7522bcd
Format tsconfig.json and update some config vars
guncha Dec 28, 2016
f42ee98
Turn on strictNullChecks
guncha Dec 29, 2016
8e7d942
Use EventEmitter instead of custom code in Client
guncha Dec 31, 2016
eafb1fe
Create a TypescriptBuffer class that wraps Buffer
guncha Dec 31, 2016
1ba0235
Add “Format Code” command
guncha Jan 8, 2017
698abd6
Organize the utils a little
guncha Jan 8, 2017
3271f05
Use default tab width for format cmd
guncha Jan 8, 2017
c7e03a7
renameRefactor should use TypescriptBuffer
guncha Jan 8, 2017
bafadfe
Merge remote-tracking branch 'origin/master' into use-tsserver
guncha Jan 28, 2017
f281baf
Update Typescript to the latest nightly
guncha Jan 28, 2017
7ba0dd2
Update grammar
guncha Jan 28, 2017
b3cc9ab
Make autocomplete less trigger happy and reuse completions
guncha Jan 28, 2017
8d794a0
Update README and package.json for beta release
guncha Jan 28, 2017
c34b098
Prepare 11.0.0-beta release
guncha Jan 29, 2017
74b6943
Make sure the package loads with the new name
guncha Jan 29, 2017
e09bce0
Use NodeProcess to start tsserver for compat
guncha Jan 29, 2017
600e1d8
Prepare 11.0.0 release
guncha Jan 29, 2017
e0a920e
Translate between win32 and posix paths in errorPusher
guncha Jan 29, 2017
32ee7be
Prepare 11.0.1 release
guncha Jan 29, 2017
6b50753
add return-to-declaration functionality
Feb 15, 2017
805414d
add type annotation. don't add prev cursor position if multi select i…
Feb 20, 2017
82f4b2a
Update highlights.less
koba-ninkigumi Feb 21, 2017
828bbaf
Merge pull request #1195 from koba-ninkigumi/patch-1
guncha Feb 21, 2017
cdfbf05
Merge branch 'master' into use-tsserver
guncha Mar 19, 2017
02eddd4
EditorPane#client can actually be undefined too fixes #1213
guncha Mar 19, 2017
e9ba0f5
Merge pull request #1192 from deanproxy/use-tsserver
guncha Mar 19, 2017
09eda74
Update typescript and enable strict mode
guncha Mar 19, 2017
714bd97
Clean up the docs and revert -beta naming
guncha Mar 20, 2017
cc81306
Remove some more unused files
guncha Mar 20, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 1 addition & 37 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,14 +57,6 @@ Some shortcuts:
* `ctrl+alt+i` will open the dev tools. These are the same Chrome dev tools you are familiar with. Feel free to inspect elements. This will come handy when doing UI or even seeing why a particular code element is highlighted in some way.
* `ctrl+alt+r` will reload the entire atom instance.

### Debugging
There are *lots of ways* to do this. The ones we use right now:

* You can do `console.error` from `projectService` and it will get logged to the atom's console (`ctrl+alt+i`). That's the quickest.
* You can call `projectService` in `sync` from the UI thread if you want to debug using atom's built in tools (`ctrl+alt+i`). Set `debugSync` to true in `./lib/worker/debug.ts`, and it takes care of the rest.

Also [if there is an error in `projectService` it gets logged to the console as a rejected promise](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/debugPromises.gif).

### General Steps
1. We open `atom-typescript` in one atom window
1. We have [`atom-typescript-examples`](https://github.com/TypeStrong/atom-typescript-examples) open in another atom window
Expand All @@ -75,24 +67,10 @@ Also [if there is an error in `projectService` it gets logged to the console as
#### When you break atom-typescript during development
This shouldn't happen as long as you leave the `atom-typescript` window untouched and do testing in another atom instance. If you reload the `atom-typescript` window thinking its going to be stable but it turns out to be unstable do one of the following:
* Discard the *JavaScript* changes that you think broke it and reload the atom instance.
* Run `grunt` and leave it running to compile your atomts changes (as atomts is going to be out of order)
* Open up the visual studio project (at your own risk, we do not keep this up to date!)

## Architecture
We wrap the `languageService` + our custom `languageServiceHost` + [`projectFile`](https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md) into a `Project` (code in `Project.ts` in the `lang` folder). The functions that interact with this `project` are exposed from `projectService` ([the query / response section](https://github.com/TypeStrong/atom-typescript/blob/6fbf860eaf971baa3aca939626db553898cb40db/lib/main/lang/projectService.ts#L58-L244)). `projectService` is where you would add new features that interact with the language service. All this code is `sync` and can be tested / run on any node instance. Be careful not to *leave* `console.log` in this code (as we use `stdio` to make this code `async`) or use `atom` specific APIs (as it may not be in the UI thread).

We make this code `async`(and promise based) by:
* **Single line:** (e.g. `export var echo = childQuery(projectService.echo);`) for every new call to get good compile time safety ([see the code in `parent.ts`](https://github.com/TypeStrong/atom-typescript/blob/b0a862cf209d18982875d5c38e3a655594316e9a/lib/worker/parent.ts#L148-L158)).

### Additional Notes:
* `childQuery` takes the signature of the `sync` function from `projectService` of the form `Query->Response` and automatically creates an `async` function of the form `Query->Promise<Response>`. The function body from `projectService` is not used, just the function *name* and the *type information* is.
* We automatically add all functions exported from `projectService` in the list of functions that the child uses to respond to by name. ([see code in `child.ts`](https://github.com/TypeStrong/atom-typescript/blob/b0a862cf209d18982875d5c38e3a655594316e9a/lib/worker/child.ts#L48-L51)). Here we are not concerned with the *type information*. Instead we will actively *call the function* added to responders by *name*.
* We spawn a separate `atom` (or `node` on windows) instance and use `ipc` ([see code in `parent.ts`](https://github.com/TypeStrong/atom-typescript/blob/b0a862cf209d18982875d5c38e3a655594316e9a/lib/worker/parent.ts#L4-L141)). Also [reason for not using WebWorkers](https://github.com/atom/atom-shell/issues/797).

Advantage: you only need to define the query/response interface once (in `projectService.ts`) and write it in a testable `sync` manner. The parent code is never out of sync from the function definition (thanks to `childQuery`). Adding new functions is done is a typesafe way as you would write any other sync function + additionally using only one additional line of code in `parent.ts` (`childQuery`).

## Language Service Documentation
The TypeScript Language service docs: https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API
The `tsserver` protocol definitions https://github.com/Microsoft/TypeScript/blob/master/lib/protocol.d.ts

## Showing errors in atom
Done using the `linter` plugin. If you think about it. TypeScript is really just a super powerful version of `jshint` and that is the reason to use `linter` for errors.
Expand All @@ -101,17 +79,3 @@ Just look at `linter.ts` in our code.
## Grammar

Please see https://github.com/TypeStrong/atom-typescript/tree/master/docs/grammar.md


## QuickFix
The quickest way is to copy an existing one located in the [quick fix directory](https://github.com/TypeStrong/atom-typescript/tree/a91f7e0c935ed2bdc2c642350af50a7a5aed70ad/lib/main/lang/fixmyts/quickFixes). Copy one of these files into a new quick fix.

Quick fixes need to implement the `QuickFix` interface ([code here](https://github.com/TypeStrong/atom-typescript/blob/a91f7e0c935ed2bdc2c642350af50a7a5aed70ad/lib/main/lang/fixmyts/quickFix.ts#L46-L53)).

Once you have the quickfix created just put it into the [quickfix registry](https://github.com/TypeStrong/atom-typescript/blob/a91f7e0c935ed2bdc2c642350af50a7a5aed70ad/lib/main/lang/fixmyts/quickFixRegistry.ts#L14-L24) so that the infrastructure picks it up.

**Additional Tips** : One indespensible tool when creating a quick fix is the [AST viewer](https://github.com/TypeStrong/atom-typescript#ast-visualizer) which allows you to investigate the TypeScript language service view of the file.

# Video

A video on some of the internals : https://www.youtube.com/watch?v=WOuNb2MGR4o
145 changes: 8 additions & 137 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

JavaScript developers can now just open a `.ts` file and start hacking away like they are used to. No `grunt` no `Visual Studio`. Just pure coding.

**NOTE**: This branch contains a major rewrite (**v11**) of the `atom-typescript` plugin that is lighter and faster, but lacks a few major features that you might miss. The previous version is still available in the `legacy` branch and will containue to receive minor bugfixes, but I wouldn't count on any new developments.

## Installation

1. Install [atom](https://atom.io).
Expand All @@ -15,9 +17,9 @@ JavaScript developers can now just open a `.ts` file and start hacking away like
## Reviews
*Featured on the TypeScript home page under tools http://www.typescriptlang.org/* and [demoed by **Anders Hejlsberg**](https://twitter.com/schwarty/status/593858817894404096).

"I was shocked at how good it felt to poke around on the compiler with it." [Jonathan Turner](https://twitter.com/jntrnr)
"And guess what, it worked perfectly. Like everything else! Faster than Visual Studio!" [Daniel Earwicker](http://stackoverflow.com/users/27423/daniel-earwicker)
"It's a thing of beauty - they had me at '*Type information on hover*'. Discovering `tsconfig.json` support as well was just an enormous bonus." [John Reilly](https://twitter.com/johnny_reilly)
"I was shocked at how good it felt to poke around on the compiler with it." [Jonathan Turner](https://twitter.com/jntrnr)
"And guess what, it worked perfectly. Like everything else! Faster than Visual Studio!" [Daniel Earwicker](http://stackoverflow.com/users/27423/daniel-earwicker)
"It's a thing of beauty - they had me at '*Type information on hover*'. Discovering `tsconfig.json` support as well was just an enormous bonus." [John Reilly](https://twitter.com/johnny_reilly)
"This may be your best option for editing TypeScript at the moment - very nice!" [Rasmus Schultz](https://twitter.com/mindplaydk)

[*Add yours!*](https://github.com/TypeStrong/atom-typescript/issues/66)
Expand All @@ -30,26 +32,11 @@ JavaScript developers can now just open a `.ts` file and start hacking away like
* Project Context Support (`tsconfig.json`)
* Project Build Support
* `package.json` Support
* React Support
* Format code (configurable to be on save)
* Goto Declaration
* Find References
* Block comment and uncomment
* Goto history (goto next/previous error in open files, goto next/previous build)
* Auto indent for new lines
* TypeScript context menu
* Symbols in Project
* Symbols in File
* Semantic View
* Rename refactoring
* Quick Fix
* Toggle Breakpoint
* Common Snippets
* `import` / `/// <reference` relative path resolution
* Output Toggle
* AST visualizer
* Dependency View
* Sync

# FAQ
Located online : https://github.com/TypeStrong/atom-typescript/blob/master/docs/faq.md
Expand All @@ -60,150 +47,34 @@ Located online : https://github.com/TypeStrong/atom-typescript/blob/master/docs/
## Auto Complete
Internally using AutoComplete+. Just start typing and hints will show up. Or you can explicitly trigger it using `ctrl+space` or `cmd+space`. Press `tab` to make a selection.

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/fastErrorCheckingAndAutoComplete2.gif)


## Type information on hover
Just hover

![you definitely get the point](https://raw.githubusercontent.com/TypeStrong/atom-typescript/master/docs/screens/hover.png)

## Compile on save
TypeScript files will be compiled on save automatically. Different notifications are given if `emit` was successful or not. If you need to disable this feature, add `"compileOnSave": false` in your [`tsconfig.json`](https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md#compileonsave).

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript/master/docs/screens/compile%20success.png)

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript/master/docs/screens/compile%20error.png)

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript/master/docs/screens/emit%20error.png)
When `"compileOnSave": true` is set in `tsconfig.json`, Typescript files will be compiled and saved automatically. The compiler does its best to emit something, even if there are semantic errors in the file.

## Project Support
Supported via [`tsconfig.json`](https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md) which is going to be the defacto Project file format for the next versions of TypeScript.

It also supports `filesGlob` which will expand `files` for you based on `minmatch|glob|regex` (similar to grunt).

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript/master/docs/screens/proj.png)

### Project Build Support
Shortcut: `F6`. If there are any errors they are shown as well.

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript/master/docs/screens/build%20success.png)

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript/master/docs/screens/build%20errors.png)

## NPM Module Support
We have a sample NPM module : https://github.com/basarat/ts-npm-module (trick : in tsconfig have `"declaration" : true` an in package.json have a `typings` field pointing to the `main` file) and its usage is demoed in https://github.com/basarat/ts-npm-module-consume.

## React Support

### Configuration tips

Covered here : http://basarat.gitbooks.io/typescript/content/docs/jsx/tsx.html

### Html to TSX

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/htmltotsx.gif)
`atom-typescript` supports all the same options the Typescript compiler does as it's using it behind the scenes to do all of the heavy lifting. In fact, `atom-typescript` will use the exact version of Typescript you have installed in your `node_modules` directory.

## Format Code
Shortcut : `ctrl+alt+l` or `cmd+alt+l`. Will format just the selection if you have something selected otherwise it will format the entire file.

Format on save is covered [here](https://github.com/TypeStrong/atom-typescript/blob/master/docs/tsconfig.md#formatOnSave)

## Go to Declaration
Shortcut : `F12`. Will open the *first* declaration of the said item for now. (Note: some people call it Go to Definition)

## Find References
Shortcut `shift+F12`. Also called *find usages*.

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/findReferences.png)

## Block Comment and Uncomment
`ctrl+/` or `cmd+/`. Does a block comment / uncomment of code.

## Go to Next / Go to Previous
`f8` and `shift+f8` respectively. This will go to next/previous *errors in open files* OR *build error* OR *references* based on which tab you have selected.

## Context menu
Quickly toggle the TypeScript panel OR select active TypeScript panel tab and other stuff using the context menu. `ctrl+;` or `cmd+;`.

## Symbols View
Integrates with atom's symbols view (`ctrl+r` or `cmd+r`) to provide you with a list of searchable symbols in the current file.

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/symbolsView.gif)

## Semantic View
A bird's eye view of the current file. Use command `toggle semantic view`. The view updates while you edit the code. You can also click to jump to any portion of the file.

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/semanticView.png)

## Project Symbols View
Also called Go To Type in other IDEs. Integrates with atom's project level symbols (`ctrl+shift+r` or `cmd+shift+r`) to provide you with a list of searchable symbols in the *entire typescript project*.

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/projectSymbolView.png)

## Refactoring

### Rename
`f2` to initiate rename. `enter` to commit and `esc` to cancel.
![](https://raw.githubusercontent.com/TypeStrong/atom-typescript/master/docs/screens/renameRefactoring.png)

## Quick Fix
Press the `TypeScript: Quick Fix` shortcut `alt+enter` at an error location to trigger quick fixes. Select the quick fix you want and press `enter` to commit e.g

### Add class members
![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/addClassMember.gif)

### More Quick fixes
We are actively adding quick fixes so [**go here for an up to date list**](https://github.com/TypeStrong/atom-typescript/blob/master/docs/quickfix.md).

## Toggle Breakpoint
Use command `TypeScript: Toggle Breakpoint` shortcut `f9`:

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/toggleBreakpoint.gif)

## tsconfig validation
We will validate it and help you to fix it :)
![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/errorcases/invalidProjectOptions/invalidProjectOptions.gif)

## Snippets
### Relative Paths
Relative paths have traditionally been a pain, not anymore. Use `import` or `ref` and press `tab` to trigger snippet.

`ref`

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/ref%20snippet.gif)

`import`

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/import%20snippet.gif)

Note that within the path string you get autocomplete (`ctrl+space`/`cmd+space`) for all the files in the project by filename (works for both `ref` and `import`).

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/pathChange.gif)

## Output Toggle
`ctrl+shift+m` to toggle the output co**m**piled JS file for a give TypeScript file. The keyboard shortcut is consistent with atom's markdown preview.

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/outputToggle.gif)

## AST Visualizer
Command : `Typescript: Ast`. Useful when authoring new features.
![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/astVisualizer.gif)

Also command : `TypeScript: Ast Full` that includes the `trivia` (punctuation, comments etc. received from `ts.Node.getChildren()`) as well.
![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/astFull.png)

## Dependency View
Command : `Typescript: Dependency View`. A dependency viewer for insight into the project if you use external modules. You can zoom, pan, drag points around and hover over nodes. ([more details](https://github.com/TypeStrong/atom-typescript/blob/master/docs/dependency-view.md))
![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/dependencyView/teaser.png)

## Sync
We try to keep as much of the stuff in sync while you edit code. However *in dire circumstances*:

* a soft sync is done when you save a file `ctrl+s` and we will completely reprocess the *active* file. This might not fix stuff if the error is because of *some other file on the file system*.
* `ctrl+'` or `cmd+'` : If you deleted files in the background or renamed them or jumped git branches or *something weird just happened* then sync. No need to restart your IDE :).

![](https://raw.githubusercontent.com/TypeStrong/atom-typescript-examples/master/screens/sync.gif)
Current iteration of the plugin doesn't support any Quickfixes, but they're coming in the future.

## Contributing

Expand Down
Loading