I'm using the vscode-icons I've just installed the PostCSS Language Support plugin and CSS files now the PostCSS icon instead CSS icons. I would like to go back to the old CSS icons how can I go about doing this?
I've found the answer, in settings.json, add the following:
{
"vsicons.associations.files": [
{ "icon": "css", "extensions": ["css"], "format": "svg" }
],
}
Related
What I mean to say is that when I type ol>li in my .html files in VSCode. It doesn't expand to the HTML markup. However, it expands properly to the markup within .php files.
My include language setting looks like this:
What changes do I need to make and in which settings for the snippets to work with .html files as well?
Emmet related options in my settings.json file look like this:
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.preferences": {
"files.associations": {"*html": "html"},
},
I've just installed vs code but when I write the code lines they are white, not colored...
How can I change the color?
That's how it looks:
Monican your issue isn't a background or theme issue.
You must install vuejs -> Syntax Highlight for Vue.js
I'm not a Vuejs Developer and I can't give you recommendations/
You should find which Vuejs extenstion / extensions will be your best friend(s).
Just open Extension panel and type vue.
Please contact me if you need an extra help.
Press ctrl+shift+x and search for extension(for example if you have dart then search for Dart extension), if already installed then first uninstall it >> Restart VS Code >> again now install dart extension(or any programming exe. which you using currently)>> now see issue has solved.
You need to install an extension that adds syntax highlighting (and other features) for .vue files.
You can search the extension marketplace, or click the Language indicator in the bottom right (which currently says Plain Text).
Custom Syntax Coloring for Visual Studio Code:
On VS code, go to "Preferences" --> "Settings", on the "Search Bar" type and search "Launch", then click on "Edit in settings.json" under the Launch phrase.
Then add these codes:
{
"window.zoomLevel": 0,
"editor.minimap.enabled": false,
"workbench.activityBar.visible": false,
"editor.fontSize": 18,
"workbench.colorTheme": "Absent (rainglow)"
"editor.tokenColorCustomizations":
{
"strings": "#d86464",
"keywords": "#ff00ea",
"comments": "#ddf129",
"types": "#00ff6a",
"variables": "#00c3ff",
"functions": "#00fff2",
"numbers": "#ae19f3",
"textMateRules":
[
{
"scope":
[
"" // This is for regular font
],
"settings":
{
"foreground": "#fa9c0f", // Color assigned for regular font.
},
},
{
"scope":
[
"keyword" // This is for keyword font
],
"settings":
{
"foreground": "#ffffff", // Color assigned to keyword font.
},
},
],
},
}
To change the regular plain white text color, change the hex color:
"#fa9c0f" // Color assigned for regular font.
that should do the trick.
VS Code has to be the best IDE as of right now. You can color customize literally everything, from scroll side bars to menu settings. Syntax highlighting seriously makes a developer more productive and less error prone.
You can make the perfect custom IDE however you wish with more details from:
https://code.visualstudio.com/api/references/theme-color
Go to settings and add this command: "editor.foreground": "#ff0000" to make the text in the editor red. Zyou can also load Themes and Syntax Themes to change the text colors as well. If you are displaying line numbers with your code you can change the color of the line numbers with: "editorLineNumber.foreground": "#eeff00". These statements are added to the right-hand side of the settings display.
You need to install extension for programming language you use, If extension is already installed then it may require "Reload". You can search extension and check whether if requires "Reload" or not. After reload the formatting will be fine.
i searched that VSCode have built-in ColorPicker from this Link
But i'm trying to learn code igniter with vscode and there's nothing like that. How to enable it ? i tried to enable editor.colorDecorators:true but its doesn't change anything.
When I had that same problem it was because I had "editor.hover.enabled": false, in my VS Code settings and setting it to true got the color picker working.
Go to settings, the small cog in the bottom left of the screen.
Type in 'hover' into the settings search bar and make sure 'Editor>Hover:Enabled' is checked
Now when you hover a color, the color picker should appear
If you are not seeing the color box, check CSS is selected as the language in the bottom right, if it is not, click on it and select CSS.
try:
body {
background-color: rgb(255,255,255)
}
then hover over 'rgb'
edit:
I've just noticed it also works for #fff, but you need to lose the quotes
Note there is an issue which can explain the lack of color picker, for large files (typically more than 500 lines).
#139743: "Built-in color picker stops working on large css files".
This is fixed by commit c0aa5bb and available in VSCode Insiders today, to be released with VSCode 1.75 (Jan. 2023).
I had this issue the language mode is selected to postcss and not css. When I set to css the color picker boxes appeared again.
CSS-in-JS is popular nowadays, use vscode-color-picker to bring the color picker to files other than css/sass/less (the built-in color picker supports styling files only, for now)
After installation, add the languages list to the settings because the extension does not turn on the feature by default.
on Mac: press Command + Shift + P then choose Open User Settings (JSON)
Then add these settings:
"vscode-color-picker.languages": [
"php",
"html",
"css",
"rust",
"python",
"json",
"jsonc",
"yaml",
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"vue-html"
]
As I tested:
It does not work with .tsx file (although it is in the list of the supported languages)
Works well with .js and .ts.
You don't need to do any settings, just remove the double quotes from the color (from "#fff" to #fff).
If that doesn't work out then use these extension, I prefer it to the VS Code picker:
Is there a way to override VSC's default theme style (e.g. italic or bold for comments) using user setting instead of editing the file like this suggestion here?
I've done it with colours as described here but cannot find any document from Microsoft about styles.
Setting the style in user setting can override any theme (at least the default ones) you use so you don't have to edit a file every time you change the theme.
settings.json Ctrl+,
"editor.tokenColorCustomizations": {
"textMateRules": [{
"scope": "comment",
"settings": {
"fontStyle": ""
}
}]
}
https://code.visualstudio.com/docs/extensions/themes-snippets-colorizers#_textmate-theme-rules
I'd like to have intellisense for bootstrap specifically but even for the css styles I write in my project. I've got references in a project.json and a bower.json but they do not seem to be making the references available.
You can install HTML CSS Support Extension.
ext install vscode-html-css
This will add Intellisense in your HTML files:
You don't need to configure anything for local files, just close and reopen vscode after installing. For remote css files, you can add the following
"css.styleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]
in the settings.json
Here is the common steps (not only for Bootstrap) to enable css IntelliSense in VS Code:
Step 1: Go to https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
or https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion
(Installation steps are already there)
Step 2: Click Install button that appear on the top of the website (screenshot below)
Step 3: After click, browser will show a pop-up window to access VS Code. Open it with VS Code.
Step 4: Click again the "install" button that appear inside the VS Code.
Step 5: After restarting the software, click the bottom left icon shown in the below image:
Step 6: Press "ctrl+[space]" inside the class quotes, you will get the complete class names from the attached stylesheets.
In the latest version of VS Code the IntelliSense in comments and strings have been disabled by default. Below are the two options to bring back "24/7 IntelliSense" functionality or customize it to your own liking.
First make sure you have installed the HTML CSS Support Extension mentioned by dwonisch above.
Control + ',' to go to settings or click File -> Preferences -> Settings.
Click workspace settings tab and enter the following JSON code:
{
"editor.quickSuggestions": {
"comments": false, // <- no 24x7 IntelliSense in comments
"strings": true, // but in strings and the other parts of source files
"other": true
}
}
The other option is to hit ctrl + space within the CSS quotes to activate the intelliSense. Example:
<div class="(ctrl+space)"> </div>
just add this 2 packeges and you are done.. !!!
Just install this extension in VS Code.
IntelliSense for CSS class names in HTML
Unfortunately, this feature is not currently available in VS Code. However, it has been added as a feature request for upcoming updates. You can track the issue on Github.
Open Visual Studio Code.
Use CTRL+, to get to the Workspace Settings
At your Right side window you will see something like this:
Another words paste this URL
{
"folders": [
{
"path": "D:\\Visual Studio\\AndreyCourse\\the-complete-web-developer-in-2018\\DocumentObjectModel"
}
],
"settings": {
"css.remoteStyleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]
}
}
Enjoy The Bootstrap Intellisense :-)
For React use install this extension in VS Code
1: install IntelliSense for CSS class names in HTML
but this extension works on class property as default so update the settings to work on className.
2: create a extensions.json file in .vscode folder and add the below object
{
"recommendations": [
"Zignd.html-css-class-completion",
"html-css-class-completion.JavaScriptLanguages"
]
}
"Zignd.html-css-class-completion" for class property
"html-css-class-completion.JavaScriptLanguages" for className property
I am using Latest version of VS Code 2022 1.72.2. I have installed below Extension all the HTML, CSS and Bootstrap intelligence working fine.
IntelliSense for CSS class names in HTML
Turn comments on if required in setting by pressing ctrl+,
"editor.quickSuggestions": {
"comments": true,