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.
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 fought this issue for several hours today, and thought I would share the issue and solution. The solution could help for a few searches:
Why is the first selector in my CSS file ignored by browsers?
Why is the first line in my CSS file ignored by browsers?
Why is the universal selector ignored by browsers?
I didn't believe I had touched the CSS for my web project, however I had been making some updates, and changing some configurations. All of the sudden, the styling was way off. With the inspector in the browser, I found that my CSS reset wasn't applied.
My CSS file begins with:
* {box-sizing:border-box;font-size:100%;line-height:1.5em;font-family:'Open Sans', sans-serif;vertical-align:baseline;word-wrap:break-word;word-break:break-word;margin:0;padding:0;border:0;-webkit-tap-highlight-color: rgba(0,0,0,0);}
I had already found that it was not the universal selector that was ignored... because if I add a line with html {}; above it, the universal selector becomes active again.
I thought it might be the first line that was ignored... so I changed html {}; to a commented line... and then the first selector on the following line no longer worked.
Somehow the CSS file had been saved beginning with a Byte Order Mark.
This was not visible in Visual Studio Code or vim, but it was subtly visible in Chrome's inspector:
That red dot as the first character of the first line is a Byte Order Mark. Editing it out in the inspector resolved the issue (for that load instance).
I'm not sure how it snuck into just one file... but it was simple to remove with vim:
Open the file in vim: vim <filename>
Remove the BOM with :set nobomb
Save and Exit: :w:q
Hope this helps someone else save some time!
Note: It may be possible that the way the file was served is the issue. It was output by Drupal using print file_get_contents();, and an extra newline may have been inserted before the BOM. Perhaps if the BOM were actually the first character, it would have been fine?
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
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
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.