How can i get classes and id's at html file from css using content assist?
Using:
Eclipse IDE for JavaScript Web Developers.
Version: Indigo Release
Build id: 20110615-060
This seems to be requested in:
bug 302125 - WTP: [content assist] Code assist for ids and classes in CSS, and
bug 290390 - WTP [content assist] Code assist for url's, colors and fonts.
It is not implemented yet, though.
The first bug report points out that is is implemented in Aptana, so you have this editor (Aptana studio, based on Eclipse3.5+ and available as an Eclipse plugin if you want) to consider as an alternative.
Related
Using Eclipse 2020-09 (i.e. v. 4.17) IDE for Java (on Linux, openSUSE Tumbleweed), with version 3.0.38 of Mylyn WikiText plugin installed, I had the following difficulty: Although pretty much all editor/ui fonts were fine, the HTML preview of WikiText files (in particular README.md!) displayed in unreadably small fonts (my display has a very small pixel pitch). So I wanted to find a way to set the CSS of such preview pages. The Mylyn WikiText docs (at https://help.eclipse.org/2020-09/index.jsp?topic=%2Forg.eclipse.mylyn.wikitext.help.ui%2Fhelp%2FMylyn+WikiText+User+Guide.html, under the heading "Rendering Appearance") says that there should be a Preferences screen General > Editors > Text Editor > WikiText > Appearance that allows one to set this CSS. However, no such screen shows up in my installation.
The only method I was able to find for fixing this was to use an application (such as Engrampa) which is able to edit the contents of .jar files, and in my eclipse installation directory, use it on plugins/org.eclipse.mylyn.wikitext.ui_3.0.[SPECIFIC_VERSION_HERE].jar to edit the internal component org/eclipse/mylyn/internal/wikitext/ui/viewer/default.css -- I could change any css there, and upon restarting Eclipse, the changes would take effect.
However, clearly any changes I make this way will be blown away upon the next update of Eclipse or of Mylyn Wikitext. Does anyone know of a better way to set the size of the preview text? Was that Appearance pane mentioned in the docs removed? If so, what replaced it? If not, any ideas why I might not be seeing it?
I'd like to know if there is any way to activate auto indent a CSS file in visual studio code with the shortcut ALT+SHIFT+F?
It's working fine with JavaScript but strangely not with CSS.
Yes, try installing vscode-css-formatter extension.
It just adds the functionality to format .css files and the shortcut stays the same Alt+Shift+F.
Beautify css/sass/scss/less
to run this
enter alt+shift+f
or
press F1 or ctrl+shift+p
and then enter beautify ..
an another one - JS-CSS-HTML Formatter
i think both this extension uses js-beautify internally
Wasted an hour finding the best option.
Just putting it together, for easy reading and choosing one them.
Notes:
CSS and SASS/SCSS/LESS are all related
HTML, Javascript, Typescript, JSON - VS code is already formatting
CSS and related - VS code is not formatting as of today
Options:
To format css/sass/scss/less:
Prettier
All css related supported, and not others, I choose this, it works great.
To format JavaScript/TypeScript/CSS:
Beautify css/sass/scss/less
but, already JS, TS are supported by VS code
To format JS, CSS, HTML, JSON file (wraps js-beautify)
JS-CSS-HTML Formatter
but, already JS, HTML, JSON are supported by VS code
To format CSS
CSS Formatter
but, only CSS supported, not all the related - not maintained 6+ months
To format:
Press Alt + Shift + F in VS Code, after installing Prettier.
I recommend using Prettier as it's very extensible but still works perfectly out of the box:
1. CMD + Shift + P -> Format Document
or
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection
EDIT: Prettier has become vastly more popular and standardized since I first posted this answer. It has gone so far as to even be used directly in the build flows of most modern frontend projects. I strongly encourage users looking to format their code use the Prettier VSCode extension, which tries to use the same settings configured by said build flows.
After opening local bootstrap.min.css in visual studio code, it looked unindented.
Tried the commad ALT+Shift+F but in vain.
Then installed
CSS Formatter extension.
Reloaded it and ALT+Shift+F indented my CSS file with charm.
Bingo !!!
There are several to pick from in the gallery but the one I'm using, which offers considerable level of configurability still remaining unobtrusive to the rest of the settings is Beautify by Michele Melluso. It works on both CSS and SCSS and lets you indent 3 spaces keeping the rest of the code at 2 spaces, which is nice.
You can snatch it from GitHub and adapt it yourself, should you feel like it too.
Maybe a little bit late to the party but this might help users using prettier. Just add this line to the setting.json file.
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Save and all should be good now
Go to Files menu -> Preference -> Extentions
Then type CSS Formatter wait for it to load and click install
Install HookyQR.beautify extension. It will beautify your javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. It is the most use extensions for this purpose
Beautify (Github) & Prettier (Github) are the best plugin for web development in Visual Studio Code.
To format the code in Visual Studio when you want, press:
(Ctrl + K) & (Ctrl + F)
The auto formatting rules can be found and changed in:
Tools/Options --> (Left sidebar): Text Editor / CSS (or whatever other language you want to change)
For the CSS language the options are unfortunately very limited.
You can also make some changes in: .../ Text Editor / All Languages
I'm using latest version of twitter bootstrap v.3.1.1 (http://getbootstrap.com/) and integrating the same with dataTables (https://datatables.net/blog/Twitter_Bootstrap_2)
The files and versions are as follows:
bootstrap.css - v.3.1.1
bootstrap.min.js - v.3.1.1
jquery.dataTables.js - v.1.9.4
DT_bootstrap.js - Not given
If I use the above file, the pagination, search and sorting are working fine. But the design is shuffled (i.e search box, page numbers etc.. are looking ugly without any style applied).
I can over-come the design issues if I change the bootstrap.css-v.3.1.1 to bootstrap.min.css-v.2.3.2 but my header, footer and other designs are getting collapsed.
When I analyzed both the css i.e. 3.1.1 and 2.3.2 - I came to know that many class files are missing in 3.1.1.
The one such missing class files are .span6(and still there are lot more) from my knowledge.
Now, How to fix the design issue or where shall I find the updated one.
Have anyone came across this issue?
Here a complete example in the official documentation of how to use Datatables with Bootstrap 3 :
https://editor.datatables.net/release/DataTables/extras/Editor/examples/bootstrap.html
I can't see a reference to the api.css, adam.css and eve.css files in the Preview API, nor can I find any reference to the buttons and icons they would like the app to use.
Is there a page I'm missing?
I've tried:
Here and here
(incompatible with Preview API)
There is also this but it doesn't provide much help (other than help to decode the horrific JSDoc site)
The monolithic api.css file have been split into separated stylesheets, each of them corresponding to a certain views module. Thus, you only need to include the CSS files for the modules you use.
Right now, these are the files:
$views/css/list.css
$views/css/image.css
$views/css/buttons.css
$views/css/throbber.css
$views/css/popup.css
You can see them in action in the Views tutorial preview, and some of them are also used in the Apps Tutorial on GitHub.
A typical CSS property that I use often is overflow-x or overflow-y. Sometimes I use CSS 2.1 or later properties or selectors. These (correctly) raise a validation error:
Validation (CSS 2.0): 'overflow-y' is not a known CSS property name.
For years I ignored this, but it kinda feels wrong. It's possible to switch off warnings in C# and other languages for a particular line, block, file or project. Is something similar possible for CSS (or HTML) errors or warnings? Instead of switching it all off, I prefer a more granular solution.
If you're willing to muck around a bit you can get exactly what you want.
Go to Visual Studio folder \Common7\Packages\1033\schemas\CSS
Copy css21.xml to css21mod.xml
Find the section:
<cssmd:property-def _locID="overflow" ...
After that section, insert:
<cssmd:property-def
_locID="overflow-x" _locAttrData="description,syntax"
type="enum"
description="Visibility of content extending beyond element's dimensions in x"
syntax="One of the overflow values | inherit"
enum="inherit auto hidden scroll visible"/>
<cssmd:property-def
_locID="overflow-y" _locAttrData="description,syntax" type="enum"
description="Visibility of content extending beyond element's dimensions in y"
syntax="One of the overflow values | inherit"
enum="inherit auto hidden scroll visible"/>
Open regedit, go to HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\9.0\Packages\{A764E895-518D-11d2-9A89-00C04F79EFC3}\Schemas
If on 64-bit, you will have to go to SOFTWARE\Wow6432Node\Microsoft etc
Create a new key called Schema 5, and fill in the "File" and "Friendly Name" string values with css21mod.xml and CSS 2.1 (mod)
Should be all set!
Hi I just discovered this. In Visual Studio 2010 SP1 there is support for HTML5 validation.
Tools -> Options -> Text Editor -> HTML -> Validation
Now personally because I hate VS telling me I have duplicate ID's(Which is fine for non server controls) I turn off all warnings and set my validation to XHTML5 (Which is an option).
You can however tweak the settings till your hearts content. Sadly this is not project specific and other team members will need to do the same.
How to make Visual Studio stop "compiling" .js and .css files
Similarly as Jeremy Child suggested, but specific for Visual studio 2008 (as specified in the opriginal question):
Tools -> Options -> Text Editor -> CSS -> CSS Specific : uncheck
"Detect unknown properties"
This removes all CSS validation. This is a good solution if you need the problem to disappear fast (I have no time/bit lazy to manually add each property in an xml file and check the windows registry...) and if you are good in CSS (validation not really needed when you use built-in intellisense or styles that you are sure work -e.g. taken from previous websites you did-).
Get support for CSS 3.0 in order to suppress some of the warnings:
how to make visualstudio 2008 support css v3 & html v5
CSS 3 Intellisense Schema
So this is what happened to me. I had a successfully working project. I made a copy and started working on some label changes. And I started getting
"Validation (CSS 2.0): 'overflow-y' is not a known CSS property name."
The above error kept appearing even after reopening the projects.
So I went back to my original project, opened, started debugging to see if I get that error in that project also. The project successfully. Stopped there. Came to my new error throwing project, and now the error is no longer there.
Something to think about what caused it go away. Something in a memory. May be