I would like to add some project specific snippets.
How can I add snippets in the .vscode folder?
Project Level Snippets were added in the September 2018 Release of VSCode (version 1.28):
Snippets can now be scoped to a project and shared with your team. Use the Preferences: Configure User Snippets command or create *.code-snippets file in the .vscode folder.
Project snippets work just like other snippets, they show up in IntelliSense and in the Insert Snippet action where they now have their own category.
Snippets also now support multiple prefixes. If you cannot decide if your copyright header snippet should be prefixed as header, stub, or copyright, you can have them all. Use a string array as the prefix property.
{
"prefix": ["header", "stub", "copyright"],
"body": "Copyright. Foo Corp 2028",
"description": "Adds copyright...",
"scope": "javascript,typescript"
}
Per this solution on vscode issues in github, you just need to:
Create a file with .code-snippets extension (e.g. typescript.code-snippets), and
Add the content you have in mind to that file. e.g. a simple fog snippet for console.log:
{
"Print to console": {
"prefix": "fog",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}
Put that file in the .vscode folder of the workspace (but not inside subfolders of that).
It works like a charm on VS Code 1.36.1.
Go to File -> Prefrences -> User snippets.
Choose New Snippets for ${project name}.
Give the snippet file a name of your choice.
Read the comment in the file just created, and copy the example to create the first snippet.
As far as I know this is simply not possible directly in VS Code. After having read the VS Code documentation: https://code.visualstudio.com/docs/editor/userdefinedsnippets <-- I find no mention of this being possible.
Have a nice day.
Related
Trying out Windows Terminal customization via settings.json. I found a profiles.json that follow the new conventions closely enough to work when pasted into settings.json, (I know it took because the theme changed). The problem is that changes to "fontFace" are not having any effect. I'm trying to use a nerd font for some powerline stuff, works in Powershell running in ConEmu but not in Windows Terminal. Here is the relevant portion of settings.json:
{
"$schema": "https://aka.ms/terminal-profiles-schema",
"defaultProfile": "{574e775e-4f2a-5b96-ac1e-a2962a402336}",
// You can add more global application settings here.
// To learn more about global settings, visit https://aka.ms/terminal-global-settings
// If enabled, selections are automatically copied to your clipboard.
"copyOnSelect": false,
// If enabled, formatted data is also copied to your clipboard
"copyFormatting": false,
// A profile specifies a command to execute paired with information about how it should look and feel.
// Each one of them will appear in the 'New Tab' dropdown,
// and can be invoked from the commandline with `wt.exe -p xxx`
// To learn more about profiles, visit https://aka.ms/terminal-profile-settings
"profiles":
{
"defaults":
{
// Put settings here that you want to apply to all profiles.
"cursorShape": "vintage",
"fontFace": "Iosevka Nerd Font"
},
"list":
[
{
// Make changes here to the powershell.exe profile.
"guid": "{61c54bbd-c2c6-5271-96e7-009a87ff44bf}",
"name": "Windows PowerShell",
"commandline": "powershell.exe",
"hidden": false,
"fontFace": "Iosevka Nerd Font",
"colorScheme": "PowerShellTom",
"useAcrylic": true,
"acrylicOpacity": 0.8
},
{ ...
I get the same behavior in Windows Terminal Preview, which is supposed to be the least "bleeding edge" version.
Even trying non-nerd fonts for "fontFace" has no effect, however, "fontSize" will work.
For people who are coming from SCOTT HANSELMAN article (especially from the third step)
Install Cascadia Code for all users
Change the "fontFace" property in the settings.json like this
Shortcut to open settings.json: Ctrl+Shift+, (comma)
here is the code to copy
"profiles": {
"defaults": {
"fontFace": "Cascadia Code PL"
// Put settings here that you want to apply to all profiles.
}
}
This is the only way I made that work (after 2 hours or trying)
Change the fontFace from "Iosevka Nerd Font" to just "Iosevka"; the fontFace attribute expects a font family, as far as I'm aware this isn't in the documentation and I only found it out after reading this issue on the WT github
I wanted to install MesloLGS NF Regular as a recommended font for Powerlevel10k in WindowsTerminal for WSL:
https://github.com/romkatv/powerlevel10k/blob/master/font.md
To make it work I had to:
Install it for all users as #hakan-fıstık showed in his answer.
Change the "fontFace" in settings.json to "MesloLGS NF" (Supplying full names of fonts is not working as supposed to).
Be sure to change size of font (changing font may make it huge): https://learn.microsoft.com/en-us/windows/terminal/customize-settings/profile-appearance
From a comment to the Issue I opened on Windows Terminal's GitHub page, (#6606), I was directed to another fontFace problem where choosing another font would not stick if you reopened WT, (not quite the problem I was having).
Anyway, the current solution to that is to uninstall any font you want to use, then right-click and choose "Install for all users". Double-click the file to open the sample view, and use the font name found just below the the two buttons. use the spaces in the font name as is in your settings.json file.
This worked for MesloLGL NF, but not Iosevka NF.
In my experience, editing the 'settings.json' file manually creates more issues than it resolves. The easiest way to edit the default font of your terminal is as follows:
Open the settings
Select Ubuntu under the 'Profiles' header on the sidebar
Scroll down to 'Additional Settings' and select 'Appearance'
Under the text header, change the 'Font face' attribute to your preferred font
Open 'settings.json' to view changes
You should see the expected format for selecting a font - Should you wish to edit the json file manually, you should follow this format
Save changes and exit
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.!
I'm currently having a regular HTML website in multiple languages. I've tried something with PHP, but that didn't turned out very well. What I need is a Multi language site without:
- Subdomains (like en.domain.tld)
- Paths (like domain.tld/en)
What I do need:
- Languages that are stored in sessions/cookies
- Languages which can be used around the whole site (with one place to store the language files, if that's necessary)
- Preferably without visible indications in the URL (like ?lang=en).
A bit like how Google does it, because I also have multiple TLDs, so the user shouldn't be required to change their language by visiting another domain like .de, if they set their language to English from the .com site.
What is the best solution for this? I'm also very new to making websites, so that's why I'm asking.
What i prefer to do is
Create a localization directory at the top level of your app
index.html
app.js
localization/
Inside localization directory create two files
web-en.json
{
"title":"Hello world",
"desc":"languages are fun"
}
web-es.json
{
"title":"Hola Mundo",
"desc":"idiomas son divertidos"
}
Install this library "jquery-localize": "https://github.com/coderifous/jquery-localize.git"
bower install jquery-localize
Include the library
Add the attributes to your HTML tags
Hello World will go here
Translated desc will replace this text
Call the library onReady
$(function(){
$("[data-localize]").localize("localization/web");
};
Yes it's possible to translate a website and save its selected language across the whole website without changing the URL.
You can use Cloud Translation, it's a free and open-source project from Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.
You should add a reference to jQuery first, then to the CloudTranslation JavaScript file:
<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>
And add the configuration within the HTML head as follows:
<script type="application/json" id="CloudTranslationConfig">
{
"Settings": {
"DefaultLanguage": "en",
"UrlLanguageLocation": "", // Keep empty
"TranslatorProvider": "Azure", // Could be empty if you want to provide the translations manually
"TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
"UrlLanguageLocation": "Subdirectory"
},
"Languages": [
{
"Code": "en",
"DisplayName": "English"
},
{
"Code": "de",
"DisplayName": "Deutsch"
}
]
}
</script>
and add your own custom select (dropdown) having the class "CloudTranslationSelect" to display the list of predefined languages.
More information found on https://www.angrymonkeycloud.com/translation
http://projector.tensorflow.org/ allows you to publish and share your own visualizations if you click "publish" and link to your own .json config gist w/ path to your own data. However, I'm getting an error when I link it to my gist .json config file as the instructions dictate (https://gist.github.com/jmolayem/2a28b68807602e4c3c8fa9987c1d08a6):
{
"embeddings": [
{
"tensorName": "My tensor",
"tensorShape": [
1000,
50
],
"tensorPath": "https://gist.github.com/jmolayem/2a28b68807602e4c3c8fa9987c1d08a6#file-test55-tsv"
}
]
}
My hunch is the tensorShape has to match the .tsv file. But if that were true, I don't understand why the direct upload of the .tsv file works in the demo but not when I publish.
Am I missing something in formatting the gist file?
You are pretty close! Your tensorPath doesn't point to the raw tsv file, but to an html page showing a snippet of that file, along other files.
If you click on the raw button on the top left of the test55.tsv snippet, you will get
https://gist.githubusercontent.com/jmolayem/2a28b68807602e4c3c8fa9987c1d08a6/raw/15252f862a318b8b11e550bdf2bfddb3991f4cab/test55.tsv
which you should use as a tensorPath.
I would like to create a chrome extension which changes my default tab in chrome browser.
Inside the page I will put my favorite websites, which I think I can handle using HTML + CSS. My difficult part is how to make it become a chrome extension because I have never done it before.
Can anyone give me some basic steps which I could start with?
You are looking for what's called Override Pages.
An extension can declare that it supplies a new newtab page. Here's a strictly minimal manifest for it:
{
"manifest_version": 2,
"name": "My awesome New Tab override",
"version": "1.0",
"chrome_url_overrides" : {
"newtab": "newtab.html"
}
}
Then you can use this manifest, together with a newtab.html and required resources, to make a simple extension.
There are many guides past that point; you can see the Learn Basics part of the official docs. Remember you can always ask a new question here if you run into specific implementation questions.