I've been having a problem when trying to comment out a line in a css.liquid file with the VScode shortcut (CTRL+/).
Whenever I do this it puts {%\s*# in front of the line and doesn't comment out the code. I tried disabling all extensions but it's not helping. I haven't touched any settings. When I switch to CSS or Liquid it will comment out fine, but Liquid CSS doesn't work.
Does anybody recognize this issue?
===== This ended up being a problem with the extension itself, it has since been fixed!
I see this issue has been reported lately: Incorrect comment blocks in Liquid files with this extension enabled.
I see this in the liquid css language configuration file:
"comments": {
"lineComment": "{%\\s*#",
"blockComment": [ "/*", "*/" ]
I don't know what the lineComment value is supposed to be but I have never seen a regex value there in other language configuration files - so it may be a mistake.
I built an extension which may be able to help until the language configuration file is fixed: Custom Language Properties.
Install it.
Run the command Custom Language Properies: Check for new language extensions.
Make this setting in your settings.json:
"custom-language-properties": {
"liquid-css.comments.lineComment": "",
}
If this doesn't work immediately, try a reload of vscode.
This basically sets the lineComment's to null and so the blockComment will be used instead. I am not familiar with Liquid comment styles so let me know if that is not how line comments are supposed to work. Demo:
Related
Generally new to web design and watching some tutorials on creating some backend for a project, getting really tired of writing out the manually, I see youtubers do .classname and then the class with the div appears, but for some reason it isn't working for me? Any help would be appreciated.
Also, would it be easier to switch to Sublime, my buddies think that it is the way to go.
Cheers.
Go to settings
Go to emmet under the Extensions section.
Click on 'Edit in settings.json'.
Write the following inside the 'emmet.includeLanguages' tag. Otherwise, paste the whole statement.
"emmet.includeLanguages": { "javascript":"javascriptreact" }
Save the settings.json file.
Those videos are likely using emmet. VS Code includes built-in support for emmet completions in html files. For example, typing .classname in an html file will trigger an emmet suggestion that expands to <div class="classname"></div> when you accept it
If you do not see this working:
Make sure the document is in the html language mode
Try manually triggering suggestions after .classname using ctrl+space
Make sure you have not disabled Emmet
I tried everything written in the answers but it wouldnt work, I had to do the following;
go to settings in the bottom left, search for 'emmet'
scroll down to and tick:
'Trigger expansions on Tab'
then it works by typing .divClassName + Tab
Check out this Cheat Sheet for VSC:
Cheat sheet for VSC
Ensure that VScode recognises your file as HTML5 or CSS file. In my case I had emmet enabled, but while I could get emmet abbreviation in a CSS file, they wouldn't work in an HTML file. The issue was that I also had Django template extension installed and the file had Django template code as well, hence VScode considered the file as Django template file, not HTML. You can check this the status bar at the bottom of VScode. Once I changed the file from Django template to HTML by clicking on Django Template in the VScode status bar, emmet started working.
The above answers didn't help me because VS code already came with Emmet installed, but I was missing the information on how to actually trigger it.
For an html element
Type the element e.g. div, h1, whatever, then press tab to complete it
For a class
Type the class name beginning with a dot then press tab to complete it.
For example type .myclass and hit tab and you'll get <div class="myclass"></div>
Note: if your class has spaces, use a dot in place of the space (e.g. for "my great class", you should type ".my.great.class" and hit tab)
Source
This information is from here
Tried mentioned thing from emmet vs code document
go-to .vscode >> settings.json
add line "emmet.triggerExpansionOnTab": true
it worked for me for reference : Emmet in visual studio code
I have installed Brackets with Tern Intelligence.
Inside my file Main.js, I type the following thing
Math.
And press ctrl-enter. I imagine I should see pow,max,etc, show up. What am I missing?
Code hints should appear automatically - no need to press anything. (If you do want to trigger them manually though, it's Ctrl-Space, not Ctrl-Enter).
What's in the rest of your Main.js file? If you make a new, blank JS file does it work? When I type Math. in an empty .js file, I see a list of code hints both while I'm typing Math and the appropriate list of options after typing the .
Also, try using Debug > Reload Without Extensions to make sure you don't have an extension installed that could be causing a problem.
I'm having some issues with IntelliJ 13 and autocompletion when editing CSS. Normally to set margin: I used to type: mar Tab.
Now, with the new version, I get max-resolution instead:
I had originally assumed it was due to the new Emmet functionality, but I've already switched it off and the issue still occurs:
Anybody experiencing anything similar?
There was a preselection bug which has been fixed in IDEA 13.1, please try its RC from http://confluence.jetbrains.com/display/IDEADEV/IDEA+13.1+EAP. There, the live template must be preselected if its exact key is entered in the editor.
If you don't want to see these live templates at all, you can go to Settings | Live Templates and disable the whole Zen CSS group.
Type: m Tab instead, you may find the results to your liking.
In my case helps me something opposite.
I checked the Live Templates > Zen CSS and after this, I can use snippets like bdrs(border-radius) etc from Emmet.
Each time I edit a css file in Eclipse, I get this error. It really keeps me from doing my work, because it pops up almost after each character.
Can't find resource for bundle java.util.PropertyResourceBundle, key css2.stylesheet-def.description
I would like to disable the parsing for css in order to not get this error anymore, but I didn't find how. Can you give me any tip on how to solve this issue ?
This sounds like Eclipse bug 419986 which says it because of missing translations in the CSS property files.
The bug report suggests deleting the localization plugin (such as org.eclipse.wst.css.core.nl_fr_4.3.0.jar works around the problem).
As the title, i can't find the way to make alignment plugin available with .less file. It's just work on CSS File
I haven't tested this yet, but I have a pretty strong hunch that it might help your case.
Open sublime text, and go to Preferences>Browse Packages
Look for the Alignment plugin folder and enter in it.
Look at the files in there, you will see:
Base File.sublime-settings
CSS.sublime-settings
Javascript.sublime-settings
JSON.sublime-settings
Try your hand at creating a LESS.sublime-settings file in there, copying the contents of another of the settings files, for example, the JSON.sublime-settings contains this:
{ "alignment_chars": ["=", ":"] }
It seems to me, that to enable alignment to work as expected with other filetypes not designed as default with the plugin, one would have to add this settings file to the plugin in order for it to work out.
I am not sure if the file name has to be case sensitive towards the syntax you want align to work with. If you installed the less package, you should see "LESS" shows up in the list as all caps, this is why my guess is to name the file LESS.sublime-settings. You can try different naming if it doesn't go at first...
Open any LESS file in Sublime Text.
Navigate to:
- Preferences
-- Package Settings
--- Alignment
---- Settings-Syntax Specific-User
Alternatively, if you're on a Mac hit Command+Shift+P and start typing 'Alignment' and the option will appear. Once clicked, an empty JSON file will be generated for you: LESS.sublime-settings
As EffectiX mentioned, just type in { "alignment_chars": [":"] } or whatever you want to align on. Save the file. This will work with pretty much any file format if configured correctly.