VS code has suddenly stopped recognizing html files (the file icon is the default one for files with no extension)
all other file extensions work just fine
except for html
the tags still work but it won't autocomplete
Adding this to file extensions worked for me:
"files.associations": {
"*.html": "html"
}
In my case, for this problem the solution was to manually add *.html to files.associations, in user settings. Its unlogical but it seems that somehow the extension wasn't associated to the type of file. Now everything works perfectly...
Go to the settings (In mac it is Code -- > Preferences --> Settings)
In the search bar search for Association.
In Files:Associations click on Add items.
update key = *.html & Value = html
Below is the screenshot for reference.
I had the same issue but none of the other solutions worked for me!
You can try this:
Go to the path where the "settings.json" file exits, for my case the path is:
C:> Users> User123 > AppData > Roaming > Code > User > settings.json
Now, paste the code in the file:
"code-runner.executorMap": {
"html": "\"C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe\"",
}
Now search for the "files.associations" section in your settings.json file:
As an example
Now if you have the "files.associations" section then just add the line there:
"*html": "html"
(don't forget to write a comma after a line if there are more lines in it)
or if you don't have a "files.associations" section, then copy paste the code there:
"files.associations": {
"*.rmd": "markdown",
"*html": "html"
},
I had the same problem in Windows 10 a few minutes ago:
Yeah, from the solutions above I did this but still had some errors:
File -- > Preferences --> Settings
In the search bar search for Files: Association.
In Files:Associations click on Add item button.
update Item = *.html & Value = HTML
As shown below:
When I saved, I got this error
Unable to write into user settings. Please open the user settings to correct errors/warnings in it and try again.
The problem is that terminal.integrated.shellArgs settings have been deprecated.
One of the answers here will help:
So I just had this problem and I figured it out the problem was from an extension that I installed which is the pyscript extension I disabled it and everything started to work again!
Well if you have pyscript extension installed, disable it. It has conflicts with html files I guess.
Or if you don't want to disable it just ctrl+shift+p then change language mode. Select configure file association for html.
This applies for any extension not just pyscript. For me it was pyscript
Related
I've installed Django support in Visual Studio Code and associated */templates/*.html with django-html as the extension demands.
However, it can't auto-compete HTML Tags as I've done so.
And if I just associate HTML with itself, then it can't intellisense Django Template code.
How can I autocompleting both?
I managed to do so by:
installing the Django extension
adding the following configuration to my workspace settings.json file:
"emmet.includeLanguages": {
"django-html": "html",
}
Here is essentially the same fix, but using the VS Code UI which may make it easier for some people - especially if your new to this and your settings.json file has not been generated yet.
In VS Code go to File -> Preferences -> Settings
Once there you can switch to the 'Workspace' tab if you want this setting to only be for this project/workspace, or stick with the 'User' tab if you want this on all projects/workspaces.
Open the 'Extensions' item in the list and click on 'Emmet'.
Under 'Include Languages' click the 'Add Item' button. Fill it in with:
Item: django-html
Value: html
and click the 'OK' button.
This will add the setting for you to your settings.json file, or generate you a new settings.json file if you don't have one.
Note: To get the autocomplete/generate to work you might need to type your tag without the brackets e.g. li (not <li>), then press enter to get <li></li>
As namespace_Pt said, I tried it and it works. I will list which extensions are in my Visual Studio Code installation.
Django 1.2.0
Visual Studio IntelliCode (I tried, and it works without this one)
"emmet.includeLanguages": {
"django-html": "html",
}
I added it, at the end of the settings.json file. I find the file from the settings's search bar. Just undo what Visual Studio Code added itself and add the code above. Don't forget to add a comma.
Where you find the .json file in settings
How it looks like after I added it
Follow the steps:
Install this as your extension: Django
Write the lines of codes in settings.json of your Visual Studio Code:
"emmet.includeLanguages": {
"django-html": "html",
}
How can I get settings.json?
Answer: The menu command File → Preferences → *Settings (Code → Preferences → Settings on Mac) provides entry to configure user and workspace settings. You are provided with a list of Default Settings. Copy any setting that you want to change to the appropriate settings. JSON file.
Works for me (vs 1.62.3) :
in file settings.json before:
"emmet.includeLanguages": {
"django-html": "html",
}
include:
{
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
Total file look like:
{
"files.associations": {
"**/*.html": "html",
"**/templates/**/*.html": "django-html",
"**/templates/**/*": "django-txt",
"**/requirements{/**,*}.{txt,in}": "pip-requirements"
},
"files.autoSave": "afterDelay",
"emmet.includeLanguages": {"django-html": "html"},
}
I tried everything that was listed above but nothing worked for me.
Then after much hustle I found the solution.
In your VS Code Go to..
--> File --> preferences --> settings --> workspace(if you want this setting to just be this workspace specific or "user" if you want it for all) --> extensions --> emmet--> now click on Edit in settings.json --> now in that file under the curly braces that's already given, write or copy paste this ->
"emmet.triggerExpansionOnTab": true,
"files.associations": {"*html":"html"},
and press ctrl + s to save.
It worked for me!! I hope it will work for you too.!
as you see, the HTML content is not colorful, and it cannot autocomplete HTML tag
There are 2 ways to do that.
1) You could manually set the syntax to "Javascript React".
For that click on "Javascript" on the bottom right of your screen:
Then simply enter "react" and select it. After that you should have autocomplete for the html parts inside your render functions.
2) You can instruct VSCode to always open .js files as "javascriptreact". For that go to your settings and copy files.associations over to your local settings. Make sure it looks something like this and save:
"files.associations": {
"*.js": "javascriptreact"
}
Note on that one: This will always set the syntax to "javascriptreact" when you open .js files and might not always be what you want. A better solution would be to generally name react files as myfile.jsx. This way vscode will automatically set the syntax to "javascriptreact".
Hope this helps.
Save the file as .jsx ie (App.jsx) instead of .js
This is because you are saving the file as .js ie App.js.JavaScript files cannot understand HTML tags.
Another alternative is you can save in (.js) but your web pack should be configured in such a way that it should transpile it into .jsx.
For doing refer this - https://github.com/facebook/create-react-app
React understand javascript xml only.
I've download the latest Visual Studio Code and am trying to write some HTML code. For example, <div>, <a>, <p> tags. However, there are no HTML suggestions in Visual Studio Code:
I've read this article and it says:
Visual Studio Code provides basic support for HTML programming out of
the box.
However, I've tried to install HTML extension:
In addition, I've turned on HTML5 suggestion in settings.json file:
{
"workbench.colorTheme": "Visual Studio Light",
"workbench.activityBar.visible": true,
"editor.multiCursorModifier": "ctrlCmd",
"window.zoomLevel": 0,
"html.suggest.html5": true,
}
Nevertheless, HTML, CSS suggestion does not work.
What can I do to code with suggestions?
I think the issue is that Visual Studio Code is not detecting the file type correctly. If you notice in these pictures, vscode has correctly detected that I am writing a html file by the icon <> beside the file name and the language indicator in the bottom right of the screen.
The language indicator most likely says plain text in your case. Click on it and a menu should appear at the top centre of the screen. Then try the following:
Enabling Auto Detect. I think this will be the first option.
Selecting Configure File Association for '.html'...
2 can also be accomplished by adding
"files.associations": { "*.html": "html" }
to your settings.
OR just add to settings.json (File -> Preferences -> Settings):
{
// Configure file associations to languages (e.g. "*.extension": "html"). These have
//precedence over the default associations of the languages installed.
"files.associations": { "*.html": "html" },
}
Just go to "File -> Preferences -> Settings"
Search for "Associations"
Check this image
Go to
File > Preferences > settings > Extensions > Emmet
Then click on
( C:\Users\Code\User\settings.json ) #
for reference
Add the following code:-
"emmet.triggerExpansionOnTab": true,
"files.associations": {"*html":"html"},
Save the file.
is it possible to pass selected text to browser (chrome) from notepad ++?
howto pass not path to TEMP_FILE but content?
//—need a correction—
set ChromeRun = C:\Documents and Settings\My\Local Settings\Application Data\Google\Chrome\Application\chrome.exe
set TEMP_FILE = $(SYS.TEMP)\npp_sel.txt
// save current selection as ANSI text file
SEL_SAVETO $(TEMP_FILE) :a
// run Chrome.exe for this file
$(ChromeRun) –-homepage $(TEMP_FILE)
could you help me out with this script, please
NppExec can refer directly to a highlighted word(s) using $(CURRENT_WORD). So you don't need sel_saveto or temporary files.
The snippet below works with Firefox. You should be able to modify it for Chrome in the obvious way.
In NppExec console window:
`npp_run firefox $(CURRENT_WORD)`,
where $(CURRENT_WORD) is, for example, a URL (http://google.com) that you have highlighted in the current file in Notepad++.
When I view files on GitHub, tabs appear as 8 spaces.
Example:
Is that possible to change this configuration to 2 or 4 spaces?
You can append ?ts=2 or ?ts=4 to the URL to change the tab-size.
Example: https://github.com/jquery/jquery/blob/main/src/core.js?ts=2
It seems that the value can be anything from 1 to 12. It does not work on Gists or raw file views though.
Source: GitHub Cheat Sheet
Set default displayed tab size for your repository
When you have a .editorconfig in your repository it will respect it
when viewing code on GitHub.
indent_style = tab and indent_size = 4 shows tabs with 4 columns
instead of 8
https://github.com/isaacs/github/issues/170#issuecomment-150489692
Example .editorconfig for multiple extensions which works in JetBrains' products:
root = true
[*]
end_of_line = lf
insert_final_newline = true
# Matches multiple files with brace expansion notation
[*.{js,jsx,html,sass}]
charset = utf-8
indent_style = tab
indent_size = 4
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
Change how you see tabs on other repositories
Install Stylus in your browser, than install GitHub: better-sized tabs in code.
There are also Google Chrome extensions:
https://chrome.google.com/webstore/detail/github-tab-sizer/djpnapkcpjomnkfekaedkigfomiedpjf
https://chrome.google.com/webstore/detail/github-tab-size/ofjbgncegkdemndciafljngjbdpfmbkn/related
Since Sept. 2021, you can set the tab size directly in your GitHub settings: github.com/settings/appearance.
Announced in Changelog "Tab size rendering preference".
No more .editorconfig
No more ?ts=2 added to the URL
Just:
Note: you cannot enter "3" for instance. You would get:
Tab size rendering preference could not be saved:
Validation failed:
Tab size is not included in the list
It actually is possible to do it, with a browser extension. Install Stylish (in Firefox or Chrome), then install this user style: “GitHub: better-sized tabs in code”.
It might not work for some languages. For example, I was viewing a JavaScript file and I did not notice any changes. So I deleted the style the author had and put the following lines into it:
.tab-size {
-webkit-tab-size: 4 !important;
-moz-tab-size: 4 !important;
-o-tab-size: 4 !important;
tab-size: 4 !important;
}
And it worked on Chrome (screenshot).
As you can see from the screenshot, I also enabled widescreen mode and changed the color scheme to Solarized. So I have three user styles running on GitHub pages via the Stylish extension for Chrome. I hope this helps someone.
Update
Yes. As stated by mortenpi, this can be done by through an additional query parameter. See his answer for more details.
Original answer
Is that possible to change this configuration to 2 or 4 spaces?
No. It's only available as part of the editing feature through the Ace editor and the change is not persisted.
This blog post gives some more information about the embedded IDE.
However, provided you know the url of the blob (file) you're willing to review, you can switch to the edit mode easily by changing the blob segment with an edit segment and use the dropdown to select your prefered tab size.
Standard view: https://github.com/moroshko/mmSelect/blob/master/mm_select.js
Ace view: https://github.com/moroshko/mmSelect/edit/master/mm_select.js
If the project is yours, create a file in the project root named “.editorconfig” and give it the following contents.
[*]
indent_style = tab
indent_size = 4
This will cause GitHub to render tabs 4-wide within the project.
This is an EditorConfig file, which is formally specified, supported by many editors, and also supports more extensive editor configuration, like specifying that all .html files are UTF-8 encoded.
If the project isn’t yours, consider opening an issue requesting the author specify the indent style they intended.
If you're into UserScripts, this did it for me:
// ==UserScript==
// #name GitHub Tabs
// #namespace http://foldoc.org/
// #version 1
// #description Set sensible tabs on GitHub
// #author Denis Howe
// #match https://github.com/*
// ==/UserScript==
document.querySelectorAll('table').forEach(t => { t.dataset.tabSize = 2 });
I did that for fixing them http://valjok.blogspot.com/2014/07/indentation-correction-for-exposing.html.
Another option is when embedding your gist, replace all tabs with required number of spaces
<div id="willReplaceTabs">
<script src="https://gist.github.com/valtih1978/99d8b320e59fcde634ad/cf1b512b79ca4182f619ed939755826c7f403c6f.js"></script>
<script language="javascript">
var spaces = " "
willReplaceTabs.innerHTML = willReplaceTabs.innerHTML.replace(/\t/g, spaces)
</script>
</div>
If it's an option for the project you're working on, changing your editor to treat tabs as spaces will fix the problem.
So, for example, in Visual Studio Code, the config looks like this:
{
"editor.tabSize": 2,
"editor.insertSpaces": true
}
In Sublime it's:
{
"tab_size": 2,
"translate_tabs_to_spaces": true
}
Until recently I insisted on non-spaced tabs. After switching, it fixed the Github rendering weirdness, and I haven't noticed any significant downsides in my workflow.
The best solution is, if possible, to convince maintainers of the source code you're looking at to replace all the tabs by the correct number of spaces.
Using tabs is problematic in code today given that you're often seeing it on the web, where the decision of "how many spaces per tab" depends on where it's being displayed.