深入了解Brackets编辑器 [好东西啊]

深入了解Brackets编辑器

一、Brackets 简介

Brackets 主要用于网页开发。

　　假如你从未听说过此软件，那么对于你而言 Brackets就是一款专注于网页开发并使用网页标准构建的开源编辑器。你没有看错，一款使用 HTML、JavaScript 和 CSS 编写的编辑器。它首次于 2012 年 7 月在 GitHub 上面世，尽管此项目由 Adobe 发起，Brackets 的构建也包含无数的开源软件作者。（另外，Brackets 团队首先处理那些非 Adobe 人员的代码合并请求。）

Just selecting CSS items will provide highlights within the browser so you know exactly what you are working with. Another feature, quick editing, let’s you select an HTML tag and instantly get to the CSS code that applies to that part of the DOM. What isn’t directly supported in Brackets can be achieved via a rich extension API (again using web standards) to let developers add whatever feature they want. Extensions have been created for CSS linting, HTML validation, GitHub integration, and more. (I’m writing this article in Markdown within my Brackets editor using a Markdown extension that gives me a live update of the display.)

　　Brackets 主要用于网页开发。你可以自行体验编辑 HTML、CSS 和 JavaScript 时便捷的代码提示，同时你也可以尝试其它牛逼的功能。比如“实时预览”功能，它把你的编辑器与浏览器连接起来，随着你对 CSS 的编辑，浏览器中将会实时更新来提供便捷的交互编辑。一旦你开始编辑 CSS，

That’s where Brackets began. Now let’s talk about where it has come and what we can expect in the future.

二、基础操作详解

Improvements have been made in all aspects (HTML, CSS, and JavaScript).

When Brackets first launched, it was something of an experiment. Could you use web standards to build an editor for web developers? Even more importantly, could you build something that would perform? Because this was something of an experiment and there were many low level architectural concerns, some things that you would expect in any decent editor, like renaming files for example, did not ship for a long time. Brackets was not marketed as being ready for prime time. Instead, the idea was to try something new and see what worked.

It is now fair to say that Brackets has all of the basics covered. Things like creating new files, deleting, opening from the file system, etc. are now baked in. While not necessarily something to crow about, if the lack of these basic features were the only thing keeping you from using Brackets, now is definitely the time to check it out. (And for those of you waiting for a Linux version – one is ready for you!)

Along with basic file operations, code hinting has been dramatically improved over time. Improvements have been made in all aspects (HTML, CSS, and JavaScript). Recently, Brackets added support for parsing and hinting of your own functions. Imagine that you’ve written two JavaScript functions. As you type your calls to these functions, Brackets tries to understand both the arguments and the types of arguments required and provide code support as you type. Here is a simple example:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

/* * @param {number} x First number * @param {number} y Second number */ function ringTheBell(x, y) { 'use strict'; var total = x + y; return total; } function sayHello(name) { 'use strict'; return "Hello," + name; }

My code has two functions, one called ringTheBell and one called sayHello . I provided some additional metadata for ringTheBell , but that isn’t required. Providing it though will make code hinting a bit nicer. Now I’m going to type a call to ringTheBell :

Notice how it detected the arguments and and type. If I enter a value for the first argument, notice how the code hinting bolds the second argument:

Even in cases where Bracket’s can’t determine the type of argument being used in a function, it will still provide you with the name of the argument which can be useful:

三、HTML 实时预览

Recently Brackets added real support for HTML live connect.

Live Connect is probably one of the cooler aspects of Brackets. As I mentioned above, it lets you edit CSS and see updates in real time. Need to tweak padding or margins? You can use your editor and see the impact immediately. Browsers typically allow for this (Chrome Dev Tools), but don’t normally provide an easy way to get those changes back out into source. Chrome has made strides in this area recently, but as much as I love Chrome, I’d rather write my code in an editor.

While that worked great for CSS, it did not support HTML. Brackets would automatically reload your browser on saving an HTML file, but if you wanted to preview your changes without a save, you were out of luck. Recently Brackets added real support for HTML live connect. As you modify your HTML code the browser will update in real time. You will also see highlights in the DOM for the area you’re modifying. This doesn’t really translate well to screenshots, but imagine the following HTML.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<!doctype html> <html> <head> <title>Test </title> </head> <body> <h2>This is a Test </h2> <p> fooioikkkllklkkopkk </p> </body> </html>

If I click in the h2 above, Chrome will render a highlight of that item:

If I modify text inside the h2 , Chrome will reflect those changes immediately.

四、使用扩展插件

Another important update to Brackets involves extension support. Behind the scenes, what extensions can do and how they can do it have been progressively improving with each sprint. While not necessarily that important to an end user, for people writing extensions the improvements had made it much easier to add new features to Brackets. If you can spend less time on boilerplate code and more time on features, that’s an all around win for extending Brackets. Brackets also exposes the ability to use Node.js itself for extensions. This feature gives your extensions the ability to make use of anything Node can – which by itself pretty much opens the entire world to you. This is a rather complex topic but if you want to learn more, read this guide: Brackets Node Process .

That’s behind the scenes, but for the end user, Brackets has come a long way in making it easier to actually use extensions. Brackets now ships with a full-fledged Extension Manager. Available via the File menu or an icon in the right gutter, clicking it will launch the manager:

Notice that for each extension have installed, you can see details about the version, links for additional information, and even better, a quick way to remove the extension if it is causing problems. At the bottom of this manager is a button that lets you install extensions from a URL. That’s handy if you know what extension you want (as well as the GitHub URL), but what if you don’t? Simply click on the Available tab:

You can now browse (and even filter) through a long list of available extensions. Even better, installation is as simple as clicking a button. Note the Bracket’s Extension Manager is even smart enough to recognize when an extension may not be compatible with your version of Brackets:

五、对 Theseus 的移植

Probably the most exciting update to Brackets (at least for me) is the integration of the Theseus . Theseus is an open source project created by folks from both Adobe and MIT. It is focused on providing debugging support for both Chrome and Node.js applications. Imagine being able to debug a Node.js application made up of server-side JavaScript as well as client-side code. Theseus provides just that. While still early in development, Theseus is now integrated into Brackets and can be used within the editor itself.

Theseus currently provides three main features:

• Code coverage in real-time
• Retroactive inspection
• Asynchronous call tree

Let’s look at a few examples of these. Theseus’s code coverage support will show how often a function is called. It sounds simple, but can be powerful. I recently tried Theseus on a simple demo that made use of AJAX to call a server-side program. I noticed that my demo wasn’t working, and the Theseus-integration in Brackets confirmed this. Notice the "0 calls" report by my callback:

Turns out my server-side code wasn’t set up right and I didn’t write my JavaScript code to support an error callback for the AJAX call. This was literally the first time I played with Theseus and it immediately helped point out a problem in my code. After modifying my front-end code, I could see the difference right away:

To be clear, this is all done in real-time. With Brackets open and Chrome open, I can click around in my application and see the updates in Brackets in sync with my actions in the browser.

On top of just seeing the call count, I can also click on an item and see what was passed to it. This is the retroactive inspection feature I mentioned above. Note that you can click into complex properties and really dig into the data.

Finally, for asynchronous calls that my occur at an undefined time after their initial call, Theseus has no problem handling and correctly organizing these calls under their initiator.

六、增加新的 CSS 样式

One of the earliest features in Brackets was inline editing for CSS items. You could put your cursor in any HTML element, hit CMD/CTRL+E , and Brackets would scan your project to find relevant CSS files as well as the appropriate matching rule. This made it incredibly easy to quickly update the style sheets applicable for your content.

This worked well – as long as your content actually had a matching CSS rule. In the latest update to Brackets, the editor will now recognize when an element doesn’t have a matching CSS rule.

You can now directly add a new CSS rule right from the inline editor.

七、新主题

Finally, a new "shell" look is being added to Brackets. Currently available to Windows only (but will be in the OSX build soon), the "Dark" look is the future of the Brackets look and feel.

八、补充

Your primary editor is a very personal decision for a developer.

Your primary editor is a very personal decision for a developer. I found myself using Sublime Text a few months ago and noticed that something wasn’t working right. Turns out, I was trying to use a Brackets feature. That day I switched from Sublime as my primary editor to Brackets. I still use Sublime (and to be clear, it is a pretty darn awesome editor!) but now my day to day work is done almost entirely in Brackets.

Obviously I’d love for you to go – right now – and download Brackets . But if you want to dig a bit more before you commit (hey, I understand, building a relationship with an editor is a serious undertaking), check out these resources:

• First and foremost, the Bracket’s home page is your core location for everything about Brackets.
• Even if you have no plans on contributing to Brackets, looking at the source code on GitHub would be a great way to look at a seriously cool application built with web standards.
• Have a question or a problem with Brackets? Head over to the Google Group to post your question. That’s where I go when I have problems and I typically get help pretty quickly.
• Finally, if you want to know what’s coming next with Brackets, you can find everything at the Trello board .

九、Adobe 官方文档：如何使用 Brackets

9.1、如何获取 Brackets

Downloads Brackets here for Mac, Windows and Linux (Debian/Ubuntu). Brackets is built with HTML, CSS and JS, but currently runs as a desktop application in a thin native shell that can access your local files.

Brackets hasn’t hit 1.0 yet, but it’s getting close - so feel free to give it a spin and let us know what’s missing!

Updates are released about twice a month.

The Basics

Initially, Brackets opens a default “Getting Started” project. Follow the instructions in the HTML code for a quick walkthrough of Brackets feaures.

You can open a different folder in the file tree on the left using File > Open Folder. Brackets considers this folder your “project”: it acts as the scope for various search operations, and some settings are tied to the folder you have open. You can easily switch back to previous projects by clicking on root folder name in the file tree. You can also drag a folder from the OS onto the Brackets window to open it in the file tree, and drag files onto the Brackets window to open them.

Unlike other editors that show open files in tabs, Brackets has a “Working Files” list, which is displayed above the file tree. Clicking a file in the file tree just views it, but doesn’t add it to the Working Files list - so you can quickly browse through different files without cluttering the list. If you make an edit, the file is automatically added to Working Files. To add a file without editing it, double-click it in the file tree.

Extensions

In addition to the core features built into Brackets, there is a large and growing community of developers building extensions that add all sorts of useful functionality. You can search for and install extensions using File > Extension Manager… (or click the “plugin block” icon on the toolbar).

You can also browse the available extensions online without installing Brackets first.

Brackets Highlights

Quick Edit

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.

You open Quick Edit’s inline editors by pressing Ctrl/Cmd-E when your cursor is on certain pieces of code. For example:

• In an HTML file with the cursor inside a class or id attribute or on the tag name - Quick Edit will show you all the CSS rules in your project that match. You can edit these rules directly inline, without ever leaving the context of the HTML file.
  • When multiple rules match, navigate among them using the list on the right side (or use Alt-Up/Down).
  • To create a new CSS rule directly from the inline editor, click the New Rule button (or press Ctrl-Alt-N/Cmd-Opt-N).
• In any file with a hex color or rgb/rgba/hsl/hsla color - Quick Edit opens an inline color picker for previewing and adjusting the color. The color picker also lists the top most-used colors from other parts of the file for quick access.
• In a JavaScript file with the cursor on a function name - Quick Edit will show you the function’s body (even if it’s in a different file).
• In a CSS/LESS/SCSS file with the cursor on a cubic-bezier() or steps() transition timing function - Quick Edit opens a graphical transition curve editor.

Quick Docs is a related feature that displays relevant documentation inline. Use Ctrl/Cmd-K to open Quick Docs:

• In a CSS/LESS/SCSS file with the cursor on a CSS property/value - Quick Docs opens documentation from the Web Platform Docs project.

You can open multiple inline editors and docs viewers simultaneously. To close a single inline editor or docs viewer, click the “X” in the upper-left or press Escape while it has focus. To close all inline editors & docs at once, place your cursor back in the main enclosing code editor and press Escape.

Live Preview

Brackets works directly with your browser to push code edits instantly, so your browser preview is always up to date while you’re coding - no page reloads needed.

There are two different ways to use Live Preview:

With no backend logic - Open an HTML file and select File > Live Preview (or click the “lightning bolt” icon). Brackets will launch Chrome and open your file in a new tab. The content is served statically from a built-in server that Brackets run - it doesn’t contain any of your app’s backend logic.

This mode offers the full range of Live Preview functionality:

• Browser preview updates in real time as you type in HTML and CSS files (without reloading)
• If you edit any other type of file, the page is auto-reloaded when you save
• When you move the cursor around an HTML file, the corresponding element is highlighted in the browser
• When you move the cursor around a CSS file, all elements matching the CSS rule are highlighted in the browser
• (All cursor-driven highlighting can be disabled by unchecking View > Live Preview Highlight)

All the CSS features above also work when you’re in an inline Quick Edit CSS editor.

Using your own backend - Make sure your server is already running, serving files from the same folder Brackets is editing. Choose File > Project Settings and enter whatever URL corresponds to the root folder that’s open in Brackets (typically a localhost URL). Then open an HTML, PHP, ASP etc. file and launch Live Preview. Brackets will launch Chrome with the correct URL to load that page from your local server.

However, this mode disables the HTML-related features:

• The browser won’t update in real time as you type in HTML/PHP/etc. files (only CSS edits will be reflected in real time). Instead, the page is auto-reloaded when you save a HTML/PHP/etc. file.
• Nothing is highlighted in the browser when you move the cursor around an HTML/PHP/etc. file. (But highlighting when in a CSS file still works).

Why do these limitations exist? To enable HTML live editing, Brackets needs to inject some annotations into your HTML code before the browser loads it. Normally, the built-in Brackets server does this. When using your own server instead, Brackets can’t inject those annotations. Without the annotations, Brackets can’t map edits and cursor positions from your source file onto the corresponding DOM nodes in the browser.

Live Preview currently has a few other important limitations:

• It only works with desktop Chrome as the target browser.
• Opening the Developer Tools in Chrome will close the live development connection.
• Only one HTML file can be previewed at a time. If you switch to a different HTML file in Brackets, the browser preview will switch to that new page as well.

Quick View

Quick View makes it easy to visualize assets and colors in your code. Just hover your
mouse over a color, gradient, or image reference, and a popover will appear showing
a preview. You can disable this feature in the View menu.

Other Features

Settings

• Indentation and tabs - To change the default indentation for the editor, use the controls on the right end of the status bar at the bottom of the window. Click the word “Spaces” or “Tab Size” to switch whether you’re using spaces or tabs, and change the indentation size by clicking on the number to the right. Note that Brackets uses “soft tabs”, so even if spaces are inserted, the cursor moves as if tabs are present.
• Editor font and colors - There are no official preferences for these yet. However, there are unofficial ways to [[Customize your code font]], and several extensions add the ability to choose different themes.

Quick Open

To quickly jump to a file, press Ctrl/Cmd-Shift-O and type part of the filename. You can type abbreviations or other non-contiguous parts of the name, and Quick Open will intelligently find the best matching file.

Quick Find Definition

To quickly jump around within a file, press Ctrl/Cmd-T to see an outline view - functions in a JS file, selectors in a CSS file, etc. Similar to Quick Open, you can type parts of a name to filter the list.

Code Hints

Code hints generally pop up automatically while you’re typing, but you can also manually display them with Ctrl-Space (note that this shortcut uses Ctrl even on Mac).

Code hints are provided by default in a number of places:

• HTML - tag names, attribute names, attribute values, and & entities.
• CSS, LESS, SCSS - all property names, and enumerated property values (those where the value is a discrete list of keywords).
  • Code hints don’t yet work for shorthand properties (e.g. background), only for individual properties (e.g. background-repeat).
• JS - variables and functions, using the Tern code intelligence engine.
  • Tern makes intelligent inferences about what properties and methods a given object contains, based on an analysis of your code. In addition to the current file, Brackets looks at other files in the same folder and any files referenced by a require() statement.
  • In cases where Brackets can’t determine exactly what hints should be available, it will fall back to a list of heuristic guesses. These guesses are shown in italics.
  • JS code hints use smart matching - so you can type camel-case initials and other shorthand to filter the hint list more quickly (e.g. type “gsp” for getScrollPos).
  • You also get argument hints - while you’re typing arguments to a function, an indicator above the cursor lists the expected types of the arguments. Normally this appears automatically, but you can also display it manually by pressing Ctrl-Shift-Space. (Nothing is shown if Tern is unsure where the function is defined, however).

JSLint

By default, Brackets runs JSLint on JS files when you initially open them and whenever you save changes. If JSLint find problems, the results are shown in a panel at the bottom. If your file is clean, you’ll see a green checkmark in the status bar instead.

JSLint is very picky about formatting. JSLint is very picky about a lot of things. You can hide the JSLint results panel by clicking the close box at the top (the status bar icon will still indicate if JSLint has found problems or not), or you can turn off JSLint completely by unchecking View > Enable JSLint.

Various extensions are available that replace JSLint with a different linting tool.

Keyboard Shortcut Cheat Sheet

Here are some keyboard shortcuts that are worth knowing. Also see the
Brackets Shortcut wiki page
for a more complete list of shortcuts.

Ctrl/Cmd-E	Open/close the inline editor.
Alt-Up/Down Arrow	Switch between rules in the inline editor.
Ctrl/Cmd-K	Open Quick Docs.
Ctrl-Space	Bring up code hints, if applicable.
Ctrl/Cmd-Shift-O	Bring up the Quick Open prompt.
Ctrl/Cmd-G	Go to a line in the current file.
Ctrl/Cmd-T	Go to a method in the current file.
Ctrl/Cmd-Shift-H	Show/hide the sidebar.
Ctrl/Cmd-Alt-P	Live preview.

Preferences

From the Brackets user interface, you can change preferences such as whether you want “code inspection” (automatic detection of errors) turned on, or if word wrap should be on. These preferences are “user-level” which means that they apply to any file in any folder that you open.

Brackets (as of Brackets 36) also lets you override preferences on a per-folder basis by putting a .brackets.json file there. These files are particularly useful for saving configuration that is specific to a project or even some files in a project. Some of the preferences available in these files do not have any user interface yet.

Here is a quick list of some of the settings you can change in these files:

• jslint.options: An object with the default options for JSLint (see the JSLint reference for a list of these options). Options specified directly within a JS file will override this preference on a per-option basis (not atomically).
• linting.enabled: Determines if Code Inspection is on
• useTabChar: true to use tabs instead of spaces
• tabSize: number of spaces to display for tabs
• spaceUnits: number of spaces to use for space-based indentation
• wordWrap: true if word wrap is on

Here’s an example:

1 2 3 4 5 6 7 8 9 10

{ " spaceUnits": 4 "path": { " src/thirdparty/someLibrary.js": { " useTabChar": true, " tabSize": 4, " linting.enabled": false } } }

With this .brackets.json file at the top of your project, your files will all default to 4 space indentation. However, src/thirdparty/someLibrary.js will be set to use tabs with 4 spaces for the tabs and linting will be turned off.

What’s Next?

For more info on Brackets, check out these resources:

• How to contribute to the Brackets project, including filing bugs and editing the source code
• How to write an extension
• Join the community!
  • @brackets on Twitter
  • #brackets on Freenode IRC
  • Discussion forum
• Brackets blog
• Troubleshooting for common issues
• Watch our GitHub activity stream or latest release notes to see what’s in the works for the next update!

扩展阅读

1. 异次元 - Brackets 介绍

---

原文：Deeper In the Brackets Editor、How to Use Brackets
译者：雨帆，转载时请保留译文链接和原文链接。