In some html editors when you create a new html file, some default codes as below created automatically:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>
how can I enable this feature in VSCode editor?
Thanks.
Press shift and 1 (!) It will show two options select the first one or type html:5 and enter the option it will give you default boilerplate for html
Just give the ! sign and then press Tab.
Related
Is it possible to change default (not for single project) Emmet behaviour for command ! in Visual Studio Code?
For example, I don't want to see the attribule lang="en" in <html> tag? Also I don't want to see the string:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And maybe I will want to add some another strings to default Emmet-behaviour in VS Code.
According to official documentation you can add or overwrite the contents of default Emmet snippets in VS Code with custom ones. Here how you can do it:
Firstly you need to create to the snippets.json file and set the path to it in user settings.
"emmet.extensionsPath": "C:\\Users\\Folder\\snippets.json"
Then you should figure out which snippet to change, see default HTML snippets and CSS snippets.
Finally overwrite the snippet in snippets.json. For example:
Hopefully it will help you solve your issue! Good luck!
You can overwrite the defaults (see VS Code documentation). In your case:
Create a snippets.json (must use this filename), e.g. at ~/.vs-emmet/snippets.json
Search in VS Code File -> Preferences -> Settings for "Emmet: Extension Path" and add the path to the directory of snippets.json, e.g. ~/.vs-emmet
Insert this into snippets.json:
{
"html": {
"snippets": {
"doc": "html>(head>meta[charset=${charset}]+title{${1:Document}})+body"
}
}
}
This replaces the doc-abbreviation with a leaner boilerplate. doc is used in the !-abbreviation. So ! now creates this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>
Refer to the official emmet documentation and the default HTML snippets to make further adjustments.
I'm using VS Code + js-beautify + Beautify css/sass/scss/less, and I'm facing couple of annoying issues when I format my code (don't know how to solve them):
This is NOT how I want my background color to look.
From:
background-color: rgba(0, 0, 0, .0);
To:
background-color: rgba(0,
0,
0,
.0);
I want it to be format as one line (like "from").
The "cursor" property is in different color
When I format my html code, there are line spaces in the body and the html.
From:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
To:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
I want it to be formatted without any empty spaces (like "from").
You can change format settings in VS Code's settings.json file. By default, head, body and html tags include a newline before them. If some issues started happening only after installing an extension, then there may be conflicting settings.
While this is an old question, I was encountering the same issue and found the solution. In your VS Code settings.json, add the following to it:
"html.format.extraLiners": "",
By default nothing is there so it will default to html, body, /html. By setting it to nothing, it will give you the behavior you want.
I want to use plugin SublimeHighlight for Sublime Text 3 which can allow me to copy colored and formatted text to Word, but when I choose "copy to clipboard as rtf" or "view as rtf" I get invalid cyrillic (also arrow symbol) symbols when pasting to Word.
From
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Заголовок Title</title>
</head>
<body>
<noscript>Включите JS</noscript>
<script>
//пример
// → 61.67
// → 54.56
</script>
</body>
</html>
I get
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Заголовок Title</title>
</head>
<body>
<noscript>Включите JS</noscript>
<script>
//пример
// → 61.67
// → 54.56
</script>
</body>
</html>
But when I choose the "copy to clipboard as html" or "view as html" symbols stay right but formatting I need is lost. So it is not good for me either.
Question: How is it possible to copy text from Sublime Text to Word (rtf) keeping the right characters and right formatting?
For example, when I type html + tab,
the html boilerplate automatically loads:
`<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>`
then if I type ol + tab, it automatically loads the opening tag and the closing one:
`<ol></ol>`
and because of this very annoying autocomplete pop up, I can't directly type enter between the tags to get the closing tag under the opening one,
I already tried to change the settings just like it's said in the SublimeCodeIntel Github page :
" Do NOT edit the default SublimeCodeIntel settings. Your changes will be lost when SublimeCodeIntel is updated. ALWAYS edit the user SublimeCodeIntel settings by selecting "Preferences->Package Settings->SublimeCodeIntel->Settings - User". Note that individual settings you include in your user settings will completely replace the corresponding default setting, so you must provide that setting in its entirety. "
and " Live autocomplete can be disabled by setting "codeintel_live"
to false. "
So I did this, okay, no very annoying autocomplete pop up anymore, awesome ! But when I type html + tab, no html boilerplate loading anymore ! Yikes !
I also have to tell I'm an absolute beginner at coding.
Thanks a lot for your help !
It seems like you solved your problem, but at the expense of the HTML boilerplate shortcut.
Try these steps to fix it:
Sublime Text -> Tools -> New Snippet...
Copy-paste the following text into the new snippet file:
--
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>html</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<scope>source.html</scope>
</snippet>
--
Save the new file into your Sublime Text user packages directory.
By default the file should save into this directory, but in case it does not, this is the location for each OS:
OSX: /Users/{user}/Library/Application\ Support/Sublime Text 2/Packages/User/
Windows: C:\Users\{user}\AppData\Roaming\Sublime Text 2\Packages\User
Linux: /home/{user}/.config/sublime-text-2/Packages/User
I want to render some javascript snippet with sapui5. I am trying to use Text control but when I use that I cannt format javascript text to show up properly.Is there a way to do that?
You can use the HTML core control to embed html/javascript: https://sapui5.hana.ondemand.com/sdk/#docs/api/symbols/sap.ui.core.HTML.html
Or create a custom control
All other SAPUI5 controls are protected against XSS and forgery attacks so they won't accept any javascript code.
I also suggest that you use sap.ui.core.HTML to embed HTML in your sapui5 view. However to get your code formatted correctly (for example it shall be indented correctly) you can use the markdown-js library. See this example:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>Render javascript source code in sapui5</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons"></script>
<script src="markdown.js"></script>
<script>
$.get("markdown.md", function(data) {
var mdView = new sap.ui.core.HTML({
content: markdown.toHTML(data)
});
mdView.placeAt("uiArea");
}, "html");
</script>
</head>
<body class="sapUiBody">
<div id="uiArea"></div>
</body>
</html>
markdown.md:
# Markdown
To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab.
for (i=0; i < 10; i++) {
if (true) {
console.log("Hello World!");
}
}
If you want to test this example in you Chrome browser, do the following:
Download markdown-browser-*.tgz from markdown-js and place the contained markdown.js together with the above index.html and markdown.md in some folder.
Start Chrome with parameter --allow-file-access-from-files and drop the index.html on the Chrome browser window.