https://github.com/mikailcolak/brackets-color-picker

See sample code

var pkg = JSON.parse(fs.readFileSync(__dirname + '/../package.json'));

require('update-notifier')({
  pkg,
}).notify();

Thinking it should be a modal (checkout https://github.com/rackt/react-modal).

I definitely want it to be wider than what we have with atom / vs code. Should be pinned to top as people are used to that now

Also I want it to be more omni i.e. have simple prefix switches (like vs code) for the following:

• Find file (ctrl + p) no prefix
• Find command (ctrl + shift + p) prefix : >
• Project (ctrl + alt + p): <
• Find symbol (ctrl + t) prefix : #
• Find symbol in file (ctrl + shift + o) prefix : @

Should support arrow keys to nav between items

Checkout : http://codemirror.net/demo/tern.html

Atom uses https://github.com/atom/git-utils but it needs node-gyp. Investigate a better option.

0.14 once the TypeScript defs are there

Sample : https://github.com/securingsincity/react-ace

Very simple : https://github.com/securingsincity/react-ace/blob/master/src/ace.jsx the onChange is a bit heavy

Internally uses brace : https://github.com/thlorenz/brace

Note that official ace builds exit : https://github.com/ajaxorg/ace-builds

People need multiple tsconfig.json files, but its difficult to know without user intervention what their plan is with all these files.

Spec out (and use) something like a tsproject.json (or call it tsb.json?)

Also support other things like:

• tslint.json
• package.json
• tsd.json
• formatCodeOptions
• webpack config
• launch.json

Refs (Most tsconfig issues):

Heirarchical tsconfig : microsoft/TypeScript#1928
Mutiple tsconfig : microsoft/TypeScript#4714
Medium sized projects dependencies : microsoft/TypeScript#3469
name property : microsoft/TypeScript#2938

An open source IDE written in TypeScript for TypeScript

• move to TypeStrong
• http://discuss.codemirror.net/
• Microsoft/TypeScript/issues
• atom-typescript gitter
• twitter
• https://www.reddit.com/r/typescript/ ?

Also https://twitter.com/basarat/status/654457986543255552?cn=cmVwbHk%3D&refsrc=email

Web sections

• Editor features ... all the keyboard goodness you already know from sublime text (list them all out)
• Syntax Highlighter ... not just another slow and buggy TextMate grammar. The same syntax tokenizer that your typescript compiler uses
• Code analysis ... dependency viewer.
• Multi window, multi client

• Already connected clients might not get the new resources after they change

https://github.com/angelozerr/CodeMirror-XQuery/wiki/Completion-with-Templates

Add to readme at some point

Working on

TypeScript

• Auto detection of all available tsconfig.json projects + project list + project selector
• Live error panel

Code Mirror

• State synced between browser tabs
• Autocomplete
• Autocomplete docs
• Live linting
• Expand errors inline #8
• type info on hover

Overall

• Find in file
• Find in project / files / glob filter + replace
• Goto list (references, find etc)
• rename refactoring
• File rename refactoring
• File explorer aka tree view

Omni search

• file list
• project list
• Command list
• Symbols in file search
• Symbols in project search

Deploy

• Basic compile test
• Setup automatic NPM deploy on tagged versions using Travis

TODO:

• Autocomplete snippets
• list commands supported by CM in command list

Some options
https://github.com/chjj/term.js
https://github.com/jcubic/jquery.terminal

Note : they would be happy with JSX attribute and text classifications as well : microsoft/TypeScript#5583 🌹

We currently just use glob to scan for files. See if we can roll out something custom for BIG root directories like / (or at least warn)

Research

• atom file finder : https://github.com/atom/fuzzy-finder pretty much all in https://github.com/atom/fuzzy-finder/blob/master/lib/load-paths-handler.coffee

Uncaught TypeError: item.commandName.split is not a function

As you can see, Ctrl+/ maps to a function, rather than a string

Trace:

addEditorMapToCommands  @   commands.js:325
(anonymous function)    @   commands.js:336
(anonymous function)    @   bundle.js:2129
__webpack_require__ @   bundle.js:521
fn  @   bundle.js:76
(anonymous function)    @   ui.js:13
(anonymous function)    @   bundle.js:1955
__webpack_require__ @   bundle.js:521
fn  @   bundle.js:76
(anonymous function)    @   root.js:17
(anonymous function)    @   bundle.js:1013
__webpack_require__ @   bundle.js:521
fn  @   bundle.js:76
(anonymous function)    @   main.js:2
(anonymous function)    @   bundle.js:1007
__webpack_require__ @   bundle.js:521
fn  @   bundle.js:76
(anonymous function)    @   multi_main:3
(anonymous function)    @   bundle.js:551
__webpack_require__ @   bundle.js:521
(anonymous function)    @   bundle.js:544
(anonymous function)    @   bundle.js:547

The problem appears when it tries to add the sublimeMap

If you need any more info, let me know

Lots of UI options:

• http://codepen.io/lacedon/pen/bVVKNm

Have a scrubber that allows you to look at the history for a file

Ignore whitespace and renames

http://stackoverflow.com/a/5493663/390330 (also good to show a continuous blame on the file) git log --follow -p <file>

Think of alt+g for all git commands. Here alt+g+h for history

Research

• git playback : https://github.com/jianli/git-playback code : https://github.com/jianli/git-playback/blob/master/playback/__init__.py
• Git time machine : https://github.com/littlebee/git-time-machine

Some inspiration : http://codeconnect.io/

1.0.1 installed by npm has broken by following carrage return with hash bang.

It is known issue of npm with Windows. npm/npm#2097
Sound familiar?

$ tsb
env: node\r: No such file or directory
heyPro:edge-ui kson$ tsb
env: node\r: No such file or directory
heyPro:edge-ui kson$ tsb .
env: node\r: No such file or directory
heyPro:edge-ui kson$ tsb -v
env: node\r: No such file or directory

Research : https://github.com/angelozerr/CodeMirror-XQuery/wiki/Syntax-Errors

Official : https://codemirror.net/demo/lint.html

Also checkout inline widget : https://codemirror.net/demo/widget.html

https://codemirror.net/demo/complete.html
uses https://codemirror.net/addon/hint/show-hint.js (which uses throught the registerHelper mechanism: https://codemirror.net/addon/hint/javascript-hint.js)

Advanced : https://github.com/angelozerr/CodeMirror-XQuery/wiki/Completion-Context-Information
Demo http://demo-angelozerr.rhcloud.com/CodeMirror-Java/xquery.html Source : https://github.com/angelozerr/CodeMirror-XQuery/tree/master/codemirror-extension/addon/hint This uses css : http://demo-angelozerr.rhcloud.com/CodeMirror-Java/codemirror-xquery/addon/hint/xquery-hint.css + a simple className assignment :)

3d background (velocity demo)

Following

• -d working directory
• -p port
• -o open browser

Note : https://github.com/ipselon/structor/blob/241f30bbf022010d738d2eb39add9abbe57754f9/structor.js

Basically need to detect drag left / right and then run a function with delta

Some research:

https://github.com/STRML/react-resizable uses https://github.com/mzabriskie/react-draggable and basically https://github.com/mzabriskie/react-draggable#draggablecore-api

Also add icon http://fortawesome.github.io/Font-Awesome/icon/ellipsis-v/

Others

https://github.com/azazdeaz/transhand

Since we don't want to give the people false impression of readiness: Replace the version on NPM with a parked version till the project is ready.

https://github.com/tonsky/FiraCode https://github.com/i-tu/Hasklig

text-rendering:optimizeLegibility

/* Fira Code */
.CodeMirror{text-rendering: optimizeLegibility;font-family:'Fira Code'!important;}

Also https://github.com/polo2ro/firacode-in-brackets/blob/master/main.js

like atom-ts

See https://groups.google.com/forum/#!topic/codemirror/4DdSFqAlr1s (main : http://jsfiddle.net/u26mK/8/ )

And SO : http://stackoverflow.com/questions/13744176/codemirror-autocomplete-after-any-keyup

Codemirror seems to be handing us \n consistently (which seems like a good idea to be honest).

Here's how brackets handled it : adobe/brackets#164
Also : adobe/brackets#2857

Research : https://github.com/angelozerr/CodeMirror-XQuery/blob/master/codemirror-extension/demo/token-hover.html / https://www.scriptr.io/lib/codemirror-extension/demo/token-hover.html

comment from maintainer : http://discuss.codemirror.net/t/hover-over-symbol-idea/245 / Use coordsChar and getTokenAt to figure out what the mouse is over

Widgets : http://codemirror.net/3/demo/widget.html / http://codemirror.net/doc/manual.html#addLineWidget

This looks promising

https://github.com/chinchang/hint.css

Checkout : https://github.com/t413/SinglePaged Used by ionide http://ionide.io/

This is one the last big features that need to be implemented.

Research

Going through other solutions:

Nuclide

Shells out to git grep or just grep : https://github.com/facebook/nuclide/blob/dbaac5108fdf18eb42bd19e760051b9a41ac92b2/pkg/nuclide/remote-search/lib/scanhandler.js#L76-L78

Atom core

This package does it : https://github.com/atom/find-and-replace

It redirects to atom.workspace.scan : https://github.com/atom/find-and-replace/blob/fa4af2db1ce3612c81a55d25821424899b141c18/lib/project/results-model.coffee#L98-L118

workspace.scan is in atom core https://github.com/atom/atom/blob/28517563ebb6a73da1e7b03d1c7fe36ae8d0e611/src/workspace.coffee#L886

It uses scandal : https://www.npmjs.com/package/scandal

scandal depends on git-utils : https://www.npmjs.com/package/git-utils < sadly this requires a working node-gyp toolchain and that is not a dependency I want :-/

NPM Packages

no clear winner : https://www.npmjs.com/browse/keyword/grep

see https://ternjs.net/defs/ecma5.json

Ctrl + , seems a very consistent keyboard shortcut across IDEs

This might be related to my system (I guess tsb didn't install properly. Had to do a 'npm cache clean' first). I have the error output below if I do the following steps

• create and go into a new folder
• git init OR touch test.ts
• tsb

"
Dashboard at http://localhost:4444
CHILD ERR STDERR: /usr/local/lib/node_modules/tsb/src/server/workers/fileListing/fileListingWorker.js:25
.filter(function (x) { return !x.includes('/.git/'); })
^
TypeError: undefined is not a function
at /usr/local/lib/node_modules/tsb/src/server/workers/fileListing/fileListingWorker.js:25:50
at Array.filter (native)
at sendNewFileList (/usr/local/lib/node_modules/tsb/src/server/workers/fileListing/fileListingWorker.js:25:18)
at /usr/local/lib/node_modules/tsb/src/common/utils.js:88:27
at EventEmitter.fileAdded (/usr/local/lib/node_modules/tsb/src/server/workers/fileListing/fileListingWorker.js:53:17)
at EventEmitter.emit (events.js:110:17)
at EventEmitter. (/usr/local/lib/node_modules/tsb/node_modules/chokidar/index.js:169:15)
at EventEmitter.FSWatcher._emit (/usr/local/lib/node_modules/tsb/node_modules/chokidar/index.js:206:5)
at EventEmitter. (/usr/local/lib/node_modules/tsb/node_modules/chokidar/lib/fsevents-handler.js:288:12)
at EventEmitter. (/usr/local/lib/node_modules/tsb/node_modules/chokidar/lib/fsevents-handler.js:331:11)

ts worker restarting. Don't know why it stopped with code: 1
"

Atom's core : https://github.com/atom/atom-keymap (can't use as depends on fs plus)
This in turn is used within atom to map commands to command watchers

Also checkout the keybinding resolver : https://github.com/atom/keybinding-resolver

MORE

There is also : https://craig.is/killing/mice and https://github.com/dmauro/Keypress/ and https://github.com/madrobby/keymaster

Which shortcuts

Web has a few challenges e.g. ctrl+tab will not work in chrome. Some IDE's that tackle such issues : https://docs.c9.io/docs/keybindings and https://msdn.microsoft.com/en-us/library/dd380652.aspx#vso

See : https://codemirror.net/demo/search.html

• ctrl/cmd+f works at a global level to call search for current tab (which just returns search results). If user changes active tab we get new search results!
• ctrl+shift+f works and just adds a where which is just a list of glob matchers (by default *.ts).

Since Brackets is also just codemirror : https://github.com/drewhamlett/brackets-minimap

Basically CodeMirror.runmode

Also

• https://github.com/websiteduck/brackets-wdminimap

When all tabs are closed ... show hints

See Atom:

We have missing dependencies to launch

• http-proxy
• webpack
• webpack-dev-server

to run

• style-loader
• css-loader

Inform the user of a new version available ... like tsd

https://visualstudiogallery.msdn.microsoft.com/f85a7ab9-b4c2-436c-a6e5-0f06e0bac16d
https://visualstudiomagazine.com/Blogs/OnWard-and-UpWard/2013/10/move-codelens-downstream.aspx

Decided that there should be toggle list select list view for (errors, tree view, inline error, etc)

see http://schemastore.org/json/

Here is what atom does:

• if the file is same as disk ... and disk changes the updates are silently applied
• if the file has unsaved changes ... and the disk changes ... the updates are completely ignored.

I think this is a good first cut to aim for.

perhaps use this api endpoint : microsoft/TypeScript#3687 if it lands

E.g.

• tap the ctrl key to see options
• then m for methods, p for properties etc

This is very much a wishlist item 🌹