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 ?

Garboil

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:

Trevethick

For the first question : thank you :), for the second one, I use Sass syntax on .sass files. That's why I don't understand... – Garboil

Emmet does a perfect job for HTML / CSS. Do you got the same for PHP and JS files ? I can't believe those things don't come from native web editor... – Garboil

@enguerranws: I've added screenshots above. Does it not look like this for you when you open a .sass file? I'm not sure if there's anything like Emmet for PHP or JS code. Are there other editors with a feature like that? Seeing an example might help in the search for something similar. (Note though: the JS code hints will accept camelcase matching and other shorthand - that's a bit like what you want). – Trevethick

That screenshot is exactly what I'm looking for, but my Brackets on Mac doesn't do that... I'm currently using Sublime Text, which does all I say... – Garboil

@enguerranws: When you say "my Brackets doesn't do that," do you mean you don't even see syntax color-coding? Are you sure the file extension is .sass? (Does the Brackets status bar say "SASS" in the lower-right corner, or something else?) What version of Brackets are you using? If you have any extensions installed, perhaps try disabling them to make sure the extension isn't breaking anything. – Trevethick

Brackets sees it's a sass file (it's written in lower-right corner of the window + color syntax). I will try delete all extensions and reinstall Brackets. Thank you for your help. – Garboil

Oh, I think I see the problem now: the indentation is wrong when pressing Enter after certain lines -- seemingly all the lines ending in an orange-colored word. It's correct when pressing Enter after the color or font-size lines above, but wrong after the text-transform or font-weight lines. Etc. Is that what you're seeing? It looks like a bug has already been filed, but no one has stepped up to contribute a fix yet. – Trevethick

Yes, it kinda work like that, but on orange words and pressing Enter, the indent go to the right indent -1 (so on Sass, it goes to the parent). I will clean my install and wait for the fix. Thank you. – Garboil

Answer 2

Try Shift+Enter when the tag is suggested.

Bandaranaike

this is helpful if comment .... this is worked for me i google then open this page as first and i seek for this hotkey. but this is not the answer. better be as a comment – Calan

Thanks! This is what I wanted to know when I googled and found this question. – Plunger