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.
Related
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.
when I load my Wix website using webview_flutter it doesn't take fullscreen, but it works using flutter_webview_plugin, and I figured that the problem is that webview_flutter doesn't set wide viewport natively webView.getSettings().setUseWideViewPort(true);
so how can i make it use this wide viewport?
If you control the html yourself that is loaded (or it's just some embed code), try adding the viewport meta tag in the head; for example:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>
<script async="" src="https://url-to-the-embed-code-you-are-using"></script>
</body>
</html>
so after 24 hours of debugging i was able to acheive the desired effect by forking the package and modifying the native code myself.
the modification was on the file WebViewBuilder.java and simply adding the line webStettings.setUseWideViewPort(true); to activate the wideviewport
Visual Studio Code is pretty smart about how it autocomplete tags. With tags such as and when you press enter it automatically does this:
<head>
>
</head>
But <p> does this:
<P> > </p>
Which is great. However <script> performs like the latter when it should be like the former. Is there a way I can fix this?
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 insert custom html code in document via code button (like this for example taken from bootstrap + some JS code):
<link rel="stylesheet" ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
console.log("Hello world");
});
</script>
I wan't this to be in the source code of the document (not in text) so it can be rendered properly.
I have tried many settings (it would be long list, I spent whole afternoon with this smile) but nothing works, i.e. code is stripped / changed when I close the code window and open again.
for the context, I use TinyMCE as editor for CMS and sometimes there is need to add extra style or javascript library
So I would be very grateful if somebody could post tinymce 4.2 init settings which allows this... or say if it's even possible
You may use the tinymce command mceInsertContent:
my_editor_instance.execCommand('mceInsertContent', ui, '<my>html</my>');