adobe-research / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.

Welcome to Brackets!

Installers for the latest build can be downloaded here.

This is an early version of Brackets, a code editor for HTML, CSS and JavaScript that's built in HTML, CSS and JavaScript.

What makes Brackets different from other web code editors?

• Tools shouldn't get in your way. Instead of cluttering up your coding environment with lots of panels and icons, the Quick Edit UI in Brackets puts context-specific code and tools inline.
• Brackets is in sync with your browser. With Live Development, Brackets works directly with your browser to push code edits instantly and jump back and forth between your real source code and the browser view.
• Do it yourself. Because Brackets is open source, and built with HTML, CSS and JavaScript, you can help build the best code editor for the web.

You can see some screenshots of Brackets on the wiki and intro videos on the Brackets YouTube channel.

Brackets is early in development, so many of the features you would expect in a code editor are missing, and some existing features might be incomplete or not as useful as you'd want. But if you like the direction it's going, the CONTRIBUTING.md file contains some useful links to help you get started. Please contribute!

The text editor inside Brackets is based on CodeMirror—thanks to Marijn for taking our pull requests, implementing feature requests and fixing bugs! See Notes on CodeMirror for info on how we're using CodeMirror.

How to run Brackets

Brackets isn't ready for general use yet. It's still early in development, is missing a lot of basic editor features, and probably has bugs. That said, we've actually been using Brackets to develop Brackets for awhile now, so what's there is reasonably stable.

Although Brackets is built in HTML/CSS/JS, it currently runs as a desktop application in a thin native shell, so that it can access your local files. (If you just try to open the index.html file in a browser, it won't work yet.) The native shell for Brackets lives in a separate repo, adobe/brackets-shell.

The Brackets native shell currently runs on Mac and Windows. The community has started working on a Linux port, and is making great progress; if you're interested, check out the Linux Version wiki page.

You can download stable builds of Brackets from download.brackets.io. If you want to pull the repo directly via git, see How to Hack on Brackets for instructions on how to get everything.

By default, Brackets opens a folder containing some simple "Getting Started" content. You can choose a different folder to edit from File > Open Folder. (Might we suggest editing the Brackets source code and submitting some pull requests?)

Most of Brackets should be pretty self-explanatory, but for information on how to use its unique features, like Quick Edit and Live Development, please read How to Use Brackets. The extensions wiki page has a list of extensions that have been contributed. Also, see the release notes for a list of new features and known issues in each build.

I found a bug/missing feature!

Issues starting Brackets the first time? Please review Troubleshooting.

Brackets bugs are tracked in the Brackets github issue tracker. When filing a new bug, please remember to include:

• Brackets version/sprint number (or commit SHA if you're pulling directly from the repo)
• Platform/OS version
• Steps to reproduce problem with actual and expected results
• Link to test files (you can create a gist on gist.github.com if that's convenient)

More details on how to file an issue can be found here.
For feature requests, go ahead and file them in the issue tracker; they'll be converted to user stories on the public Brackets backlog*.

* Please excuse the mess in the "Icebox (To Be Reviewed)" list. We're still importing data from our internal system.

I want to help!

Awesome! Please read How to Hack on Brackets.

I want to keep track of how Brackets is doing!

Not sure you needed the exclamation point there, but I like your enthusiasm.

• Twitter: @brackets
• IRC: #brackets on freenode
• Developers mailing list: http://groups.google.com/group/brackets-dev

brackets's Issues

Hinting of String literals

In the legacy JavaScriptCodeHints extension, string literal values were tracked and historical values were hinted in new string literals.

Improve guess proposals when type is not known

When a type is known, don't show guesses.
When a type isn't known, show guesses immediately.
As the user starts typing, only proposals matching the substring (case insensitively, with intra-string matching) are shown. The sub-matching list switches over to guesses once type proposals run out.

Find a function's invocations

This is more of a wish than an issue, but I've wanted for some time a command that exposes all the invocations of a particular function definition. Something like the inverse of Go To Definition or Quick Edit. This may be outside the purview of the hinter, but the functionality found therein would probably be useful for such a feature.

Use code intelligence information in Brackets Quick Open feature to support other types of symbols

Request from Jonathan in the Brackets-Dev list:

"do you think you could integrate your extension into the official Go To Definition function? The Bracket's function would greatly benefit from being turned into a global search and a way to open it pre-filled with the currently selected variable or function name."

Function hints show the function name as fn() instead of the variable being called.

var s = "Hello.";
s.charAt( // Hinting here will show fn(i:number) -> string, where fn should say charAt

Improve hints for function types.

In the function type hint, bold the argument that the cursor is currently at.

[codehint]extra hints show up, but not start after the current searching string.

1. type following "x".ch into a javascript
   1. ctrl+space after "ch" to trigger code hint

Actual: it shows up 4 hints: charAt, charCodeAt, match, search

Expect: should only have "chartAt", "charCodeAt" as the current is starting from "ch".

Should be able to configure require roots

It would be nice to have a way to configure module roots, possibly in a settings panel. For Brackets, I initially thought the module-based hinting wasn't working because I usually set my project root to be the root of the brackets repo. It all started working properly once I figured out to open the src folder.

Hints appear immediately after comma in object literal

At the top level of a file in a JS project that will generate some heuristic hints, type: { foo: bar,

Result: Code hints pop up after the comma. There are two problems with this: (1) it's not clear to me that hints are appropriate here since I'm about to type another key, so there should be no completions; (2) the first item in the hint is selected, so when I hit Return it inserts that item, which is not what I want here since I usually create a newline after a comma.

Function signature hints showing ?

//Define a functional object to hold persons in javascript
var Person = function (name) {
this.name = name;
};

//Add dynamically to the already defined object a new getter
Person.prototype.getName = function () {
return this.name;
};

//Create a new object of type Person
var john = new Person("John");

john.getName( // hint here shows ?

Consider deprioritizing identifiers that come from .json definition files instead of sources

Given identifiers are sorted by depth to help people keep track of the variables they are most likely to be working with, when users have their own globals in a .js file, it would be nice to consider these separate from the .json built-ins for the purposes of completion hint groups, even though they're all ultimately globals.

This may require additional information from Tern.JS.

Add support for different RequireJS styles.

At least add support simplified CommonJS wrapping style.

jumping to an object created with {} not working correctly.

1. past following code in brackets:

var base = {foo: 10, bar: 20, foo2: { a: 10, b : "test" }};
base.foo2.a = 11;
base.foo2.b = "hello";
base.foo = 10;
2. put cursor on base.foo line, "foo", try to jump to
--> no response

1. put cursor on base.foo2.a line: "foo2", try to jump to
   -->it jumps to the "{ a: 10, b : "test" }", the code section is color highlighted.

Expect:
for case 2, it should put cursor on "foo", for case 3, put cursor on "foo2".

Expose go-to-definition from JavaScriptCodeHints extension.

Brackets has an existing feature called Go-To-Definition via Cmd-T, but it is more so a find function feature and doesn't support arbitrary variables.

It would be great to have a new key binding that looked at the current cursor position and determined the relevant identifier, and then went to its definition, including across multiple files. It should support variables and functions.

HintUtils.maybeIdentifier excludes valid javascript identifiers

Noticed in the pull request to brackets main:

adobe#3439

This is obviously not a regression from current behavior, but I do wonder if this
code is going to fail on valid identifiers. Ahh, I see. It does fail some in that if I
have a variable called façade, if I type faç the hinting stops until I hit the a.
Anyhow, it's a minor point and nothing to fix now."

Investigate integrating Brackets StringMatch as algorithm for partial hint proposal matching

Kevin commented in brackets-dev google groups forum:

"I've actually wondered how it would be to use Brackets' StringMatch for code hints, but haven't had a chance to try it out. It would likely be easy for you to plug in.

Some background:
http://www.blueskyonmars.com/2013/03/26/brackets-quick-open-thats-no-regex/

and the code itself:
https://github.com/adobe/brackets/blob/master/src/utils/StringMatch.js"

Inconsistent information for module hints

(Found this in the version currently in the Brackets pull request adobe#3439.)

1. File > Open Folder and open the root of the Brackets repo
2. Open the file src/editor/EditorManager.js
3. Place the cursor immediately below the list of require statements at the top
4. Type ViewUtils. - hints show addScrollerShadow, removeScrollerShadow
5. Delete ViewUtils. and type PerfUtils.

Result: Hints show addScrollerShadow, removeScrollerShadow again, instead of the hints for PerfUtils. If you close and reopen the file and then type PerfUtils., you get more appropriate hints.

Reload sometimes required to get .prototype proposals

//Define a functional object to hold persons in javascript
var Person = function (name) {
this.name = name;
};

//Add dynamically to the already defined object a new getter
Person.prototype.getName = function () {
return this.name;
};

//Create a new object of type Person
var john = new Person("John");

john. // Hint here only shows name, not getName() function. On reloading, it shows up.

Jump to definition not working for var exported from a module

Open the JavaScriptCodeHints as your project folder.

Open ScopeManager.js.

Scroll to near the end of the file and select any of the member references on HintUtils in the _ternWorker.addEventListener callback function, e.g. line 476 has:

    } else if (type === HintUtils.TERN_JUMPTODEF_MSG) {

With the cursor somewhere inside TERN_JUMPTODEF_MSG, press Cmd+J on Mac (or Ctrl+J on Win).

It doesn't jump to the definition of the exported var. However, jump to definition works for exported function members.

If you try to write code and get hints for members of HintUtils, Tern does seem to know about these exports.