13

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 ?

enguerranws
  • 8,087
  • 8
  • 49
  • 97

2 Answers2

10

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: enter image description here

And after pressing Enter - note the cursor is correctly indented: enter image description here

peterflynn
  • 4,667
  • 2
  • 27
  • 40
  • For the first question : thank you :), for the second one, I use Sass syntax on .sass files. That's why I don't understand... – enguerranws Mar 27 '14 at 09:15
  • 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... – enguerranws Mar 27 '14 at 09:28
  • @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). – peterflynn Mar 27 '14 at 20:45
  • 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... – enguerranws Mar 28 '14 at 13:59
  • @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](https://github.com/adobe/brackets/wiki/Troubleshooting#disable-all-extensions) to make sure the extension isn't breaking anything. – peterflynn Mar 28 '14 at 17:53
  • 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. – enguerranws Mar 31 '14 at 09:10
  • 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](https://github.com/marijnh/CodeMirror/issues/2156), but no one has stepped up to contribute a fix yet. – peterflynn Apr 01 '14 at 04:13
  • 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. – enguerranws Apr 01 '14 at 15:18
0

Try Shift+Enter when the tag is suggested.

VanG
  • 55
  • 1
  • 9