Brackets : how to make autocomplete / autoindent works ?

Question

Brackets seems nice, but I'm encountering two problems using it :

First, I usually autocomplete tags this way : div.class - PRESS TAB -becomes<div class="class"></div>

I can't achieve that... I tried downloading a bunch of plugins, nothing works...

Second problem :

#container
    h3
        color: $ltGreen
        text-transform: uppercase
        font-size: em(24)
        margin-bottom: 0.5em
        font-weight: bold

In this example, if I press Enter/Return key wherever in that part of code, the cursor comes back to the beginning of the line... So I have to press tab lot of time each time I press enter/return...

Is it possible to do that in Brackets ? How ?

Answer 1

For the first issue, try the Emmet extension. It lets you use that exact CSS-like shorthand and auto-expand it to HTML code.

For the second issue, what type of file are you in? Brackets uses "smart indent" to position the cursor on new lines based on the syntax of the code. If you're in an HTML file, it will follow the nesting level of the tags surrounding the cursor to decide how far to indent (since the code above isn't proper HTML syntax, it won't use it as a cue for indentation - it will treat it as plain text content, to be ignored). If you're in a plain text file, it will just follow the indent of nearby lines (so the problem you're describing won't happen).

It looks like you might actually be writing "classic"-style Sass code in this case? If so, just ensure you're using standard .sass file extension and newlines should get the correct indent level automatically.

Here's what a .sass file should look like before pressing Enter:

And after pressing Enter - note the cursor is correctly indented:

Answer 2

Try Shift+Enter when the tag is suggested.