I'm upgrading bootstrap 3.3.6 to 3.4.1. First need to first I need to find all the places(HTML elements) that use bootstrap 3.3.6 so I can do my regression testing covering those elements. Is there a way I can find all the bootstrap references?
This is a .net application with razor views
Thanks
You can do it via search text feature in your IDE like CTRL + Shift + F in visual Studio and Rider (assume it set Visual Studio Key-map), Which provides you with tools such :
Preview of codes before navigate to it.
Search a term in specific files (.cs, .cs-html, ...).
Search a term with regular expression.
...
For example assume we need to find all div which is have row class ( my IDE is rider), so all you can do, after open "find in files" popup, is just set simple things like image below:
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 Visual Studio Premium 2012 and installed sidewaffle. Working through examples to create a template using the falling video. https://www.youtube.com/watch?v=z33jOo75CH4&list=UUwEinBp3Mx1UuAR52pzRcNw
I cannot see 'Add template Reference (Sidewaffle project)' on the add menu when I right click the project. Do you know how I get this option to show? Thanks.
I couldn't get side waffle to work, I found it over complicated, I used templify instead. http://opensource.endjin.com/templify this works really well for creating a multiple project template.
How do you enable error dectection for CSS files in Visual Studio 2010? It's said to be in tools options, but I can't seem to find it.
In Visual Studio, open the Tools menu and select Options
Expand the Text Editor group, then the CSS group.
Click on Miscellaneous and you'll see the option to enable Detect Errors there.
Make sure in Visual Studio 2010 IDE> View>Toolbars>Stylesheet is checked to show Stylesheet toolbar.
IDE will indicate errors in two ways.
01) most importantly don't forget VS Error List window.It will show css errors in warnings section.you can then navigate to error by double clicking the error itself through the window.
02) it will show squiglies in erroneous CSS styles
Not sure if this is what you're asking for, but Visual Studio comes with a few CSS validation templates. If you select from the top menu View > Toolbars > Style Sheet, you'll see a little dropdown in the top toolbar. My VS 2010 lets me choose "Internet Explorer 6.0, CSS 1.0, CSS 2.0 and CSS 2.1"
If you write a property that's not valid for the currently selected CSS version, Visual Studio will put a little green line underneath it and complain about it not being a known CSS property etc.
This happened to me and CTRL+K+D gave me that same error even when detection was on. The solution was to look in the 'Errors' tab in Studio and to look at just the warnings. Scroll down to the CSS file related issues and low and behold your syntax error will be listed there.
Mine turned out to be two semi-colons ';;'
Hope this helps anyone else :)
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