Does anyone know of a command (not a macro) for Textmate / E Text Editor / Redcar / etc. that will collapse a multi-line CSS rule down to one line OR, if the rule is already on one line, expand it out to multi-line? I already know about code folding and that's not what I require - I need to be able to toggle the rules between single and multi-line and have them be edited and saved like that.
For example, if I have this:
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
I would like to be able to place my cursor anywhere within the rule, hit a keyboard shortcut and it would turn into this:
h1 {
font-size:3em;
line-height:1;
margin-bottom:0.5em;
}
On hitting the shortcut again, it would convert back into single-line.
Does anything like this exist? Does anyone have any code that does something similar I could repurpose (ideally Ruby)? Does anyone know if this is even possible in Textmate?
Update: it seems that CSS rule collapsing and expanding is implemented as a pair of macros in Textmate. However, this isn't toggling and it also doesn't work in E Text Editor (which doesn't support macros). Not sure whether it works in Redcar. Is it possible to implement something similar as a command that can do toggling?
I ended up creating my own command to do this. Grab it here.
There is a limitation in that for the command to work, the cursor has to be in whitespace within a rule declaration; i.e., not in a property/value pair scope. I've found placing the cursor just inside the opening brace to be a good place to trigger the command from.
If anyone knows how to select a parent scope that would be neat.
Using the CSS bundle ctrl + opt + Q will collapse the currently selected rule into 1 line.
Appending to Mark Story's answer, ctrl + Q does the opposite, turning a single line of CSS into nicely formatted CSS.
Related
Is it possible to add curly braces and open up the ruleset body to its own empty line automatically (autocomplete) in CSS file after pressing {? I can't find any info on that. I find it surprising that it doesn't exist, didn' find any answer when I google it...
VS Code does this:
.auto_curly_braces{}
And I'm looking for this: (with cursor under the selector)
.auto_curly_braces {
}
Is it possible to add curly braces and open up the ruleset body to its own empty line automatically (autocomplete) in CSS file after pressing {?
No. VS Code will automatically add the closing curly brace, but it will not automatically create a new line for declarations inside the rulset's body.
But all you need to do to get that is to press enter after typing {.
As far as I know, it is not configurable to skip pressing enter to get to that text state. And it's not universally, objectively accepted as a good thing to always have each CSS declaration in its own line (especially when there's only one declaration in the ruleset), which is probably part of the reason why.
I have css file. I want to set prettier vs code so that after writing a comma, the selector I wrote remained in line with the previous selector. But when i save the file, the selector will be entered to next line
I want to save the code like this (my expectation)
But prettier set the code like this (h3 entered to next line)
How to fix this problem? I set trailling comma to none but it doesn't work.
I think that config you changed only applies to JavaScript files (notice the reference to ES5).
As far as CSS, prettier is opinionated and they decided that each selector should have its own line (this PR implements that behaviour). I don't think there's a config to change that behaviour.
I have mistakenly pasted couple of CSS selectors in the same CSS file twice, as time passes I am being able to track them manually and delete the later one. I wanted to know if there is any better way to find if a CSS selector has been used twice in my CSS file so that I could merge/delete them?
Here is one possible solution:
Copy both files into a CSS code formatting tool e.g. http://www.codebeautifier.com/
Format it so each CSS ruleset is on one line, e.g. p { font-size: 13px }
Put the result into a sorting program, e.g. the sort command on Linux/Mac terminal.
There are online tools that can do this too.
Now all the duplicated selectors should be next to each other. You should be able to combine them by hand pretty easily.
Also, don't forget that different ordering of CSS rules can have different results.
Also try this https://codebeautify.org/remove-duplicate-lines
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 ?
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:
Try Shift+Enter when the tag is suggested.
When I write CSS in Notepad++, the color coding sometimes seems inconsistent. Normally, selectors are shown in light purple but sometimes they are black for 1 or more lines consecutively. I don't see anything wrong with such lines. Why are they black? What am I missing here?
i'm not sure why that happened to you!?
but you can add keywords to notepad++ :
Setting => Style Configurator ..
Select your language and Style.
Add your keyword like color and etc , separated by space :
Usually, that sort of coloring indicates that the CSS rule immediately preceding the affected one hasn't been closed. Here's an example where I remove the closing brace from a rule in normalize.css, which affects the one that immediately follows in exactly the same way (ignoring the comment and the lack of bold type, of course):
Presumably then, the reason why the "first" declaration after that selector is affected but the subsequent ones are not is because the semicolon from the first declaration tells the syntax coloring parser to terminate the nonsensical statement which is formed by the selector. But I'm just blindly guessing.
If you're sure that the preceding rule has been closed properly, then the syntax coloring parser may have been confused. Try simply highlighting the rule, deleting it, and undoing; that usually works for me.
Since Notepad++ recognizes color of codes based on the language type, you can't able to view multiple languages with color codes in a same file. Even though CSS is a part of web designing, it is still a unique language. If you want to display the CSS codings inside the HTML to color, just change the language type to CSS (only for temporarily purpose). But, don't forget to revert the language conversion back to HTML before saving the file.
Steps: Language -> C -> CSS