The Sublime Text documentation is clear on the syntax for HTML, but not clear on where to place the file for mac using version 3. I want to generate my own auto-completes for Plain Text. Ideally allowing me to down/up arrow through a list of likely auto-completes.
{
"scope": "text.html - source - meta.tag, punctuation.definition.tag.begin",
"completions":
[
{ "trigger": "a", "contents": "$0" },
{ "trigger": "abbr\t<abbr>", "contents": "<abbr>$0</abbr>" },
{ "trigger": "acronym", "contents": "<acronym>$0</acronym>" }
]
}
All package resource files need to be stored in a Package for Sublime to be able to find and load it. For your own customizations, the appropriate place to place the file is in your User package, which you can find via Preferences > Browse Packages from the menu.On MacOS, that would be Sublime Text > Preferences > Browse Packages.
In order to have completions for plain text, you need to change the scope from the HTML specific scope to one for plain text.
In order to determine the scope that you want to apply (which also counts for things like Key Bindings, Snippets, Build Systems, and so on) you can select Tools > Developer > Show Scope Name from the menu (see the menu for the key binding assigned to this) to see what the full scope is for the current cursor location.
As evidenced from the scope you mentioned in your question, scopes can be quite complex to allow you to dial in as much specificity as you want.
For the case of simple plain text, as evidenced by the command I mentioned above, the following is the example completions set to work in plain text:
{
"scope": "text.plain",
"completions":
[
{ "trigger": "a", "contents": "$0" },
{ "trigger": "abbr\t<abbr>", "contents": "<abbr>$0</abbr>" },
{ "trigger": "acronym", "contents": "<acronym>$0</acronym>" }
]
}
Note that along with the location of the file, the extension is also important, otherwise Sublime won't know what it's supposed to contain.
Related
I'm using the VSCodeVim extension and am trying to configure some shortcuts for normal mode without the need of turning the extension off then on again via its togglevim command. I'm trying to add the "View: Close Editor", "View: Open Previous Editor", and "View: Open Next Editor" commands as they're named in the keyboard shortcuts menu to the "vim.normalModeKeyBindings" setting but don't know what to put for the "commands" value.
The commands towards the bottom of the shotrcuts menu are listed in their name form while most of the commands above them have a "cleaned up" name that displays in the F1 command palette and doesn't seem to correspond to the underlying command name.
I've tried the following which results in a command not found notification:
"vim.normalModeKeyBindings": [
{
"before": [ "<C-w>" ],
"commands": [
"view.closeEditor" // I've tried all kinds of variations of capital/lowercase letters and periods/hyphens.
]
},
{
"before": [ "<C-pageup>" ],
"commands": [
"view.openPreviousEditor" // See above.
]
},
{
"before": [ "<C-pagedown>" ],
"commands": [
"view.openNextEditor" // See above.
]
}
]
How do I find out what the underlying command name is for these "View" commands (or any such named command) so I can reference them in the settings.json?
Even though there is only a title for some commands, like View: Close Editor you can still right-click on that command title and choose
Copy Command ID
from the context menu. That'll give you the version you need, like
workbench.action.closeActiveEditor
I don't use vim so I hope you can adapt that to use as you need.
Not sure if this is something that can be done through Visual Studio Code, but I thought I would check here before I go ahead and manually modify thousands of lines in my project.
Please see the example below to help explain the issue I'm facing.
I have multiple files spread across multiple folders with an identifying text (in this case, Bolts), with another identifier (in this case, quality) value which equals an integer that is different on each page. I would like to know if it's possible to replace these integers with the updated integers through a basic mathematical equation.
Page A:
{
"key": "storage01/bolts",
"quality": 53.12,
"weight": 30
},
{
"key": "storage01/cogs",
"quality": 39.17,
"weight": 29
}
Page B:
{
"key": "storage02/bolts",
"quality": 18.9,
"weight": 30
},
{
"key": "storage02/cogs",
"quality": 76.2,
"weight": 29
}
I would like to change both numbers of the quality by multiplying them by 0.29 so the results would end up like this ..
Page A:
{
"key": "storage01/bolts",
"quality": 15.4048,
"weight": 30
},
{
"key": "storage01/cogs",
"quality": 39.17,
"weight": 29
}
Page B:
{
"key": "storage02/bolts",
"quality": 5.481,
"weight": 30
},
{
"key": "storage02/cogs",
"quality": 76.2,
"weight": 29
}
With the help of map-replace.js and one other extension Search Editor: Apply Changes you can do this pretty easily. Thanks to #rioV8 for the first extension, its replacement code and the second regex.
The idea is to do a search across files in a Search Editor, map-replace those values in that editor and then save those changes to all the underlying files.
(1) Open a new Search Editor (from command palette or make a keybinding to the command) or do a Search in the Panel and then choose Open in Editor.
(2) Do a regex search for \{\s*.*bolts[\w\W]*?\}
(3) Now in the Search Editor tab do a Find with (?<="quality":\s*)[\d.]+
(3) Alt+Enter to select all the matches (you may have to click in the editor first).
(4) Run Map and Replace Selection with JavaScript Function with (v, i) => `${(Number(v)*0.29).toFixed(2)} to make the desired changes. Set toFixed() to what you want.
(5) Run Apply Search Editor changes to worksapce from Search Editor: Apply Changes extension
and your changes will be saved within all the files. Pretty neat to use these extensions and the Search Editor functionality together - yours is a good use case (as long as the initial regex across files isn't super difficult to get right).
(6) Save all
Demo (with simplified replace since I can't seem to paste into the input box):
You can use the extension map-replace-js
You select the numbers with a regex (?<="quality": )[\d.]+
Use ShiftCtrl+L to select all occurrences in the file.
Then call the Map and Replace Selection with JavaScript Function command and use the following expression to convert the numbers
(v, i) => `${(Number(v)*0.29).toFixed(2)}`
You have to do this in every file
Is it possible to configure VS Code to use C-style comments (/**/) instead of C++ style ones (//) for C code only? My Gooogle-fu might be weak, but I haven't found any useful solution to it so far.
Select the line or lines then press Ctrl + Shift + A.
You can actually redefine it entirely to your liking, but it will require some fiddling with the package.json of the C/C++ extension.
This file will probably be located (at least on my Ubuntu it is) in ~/.vscode/extensions/ms-vscode.cpptools-YOUR_VERSION_NUMBER. So open it
code ~/.vscode/extensions/ms-vscode.cpptools-YOUR_VERSION_NUMBER/package.json
in terminal.
In this file you need to locate an object named "contributes".
Within this object you'll need to create an array called "languages" and add a language object:
"languages": [
{
"id": "c",
"extensions": [
".c", ".h"
],
"configuration": "./my-c-configuration.json"
}
]
now the path in the configuration property needs to point to another .json file in which you will add the new definition for the comment command:
(in the "my-c-configuration.json" file, created in the same directory)
{
"comments": {
"lineComment": [ "/*", "*/" ],
"blockComment": [ "/*", "*/" ]
}
}
Save both files, reopen the VSCode, and that's all.
Was this changed ?
To me, it works with Ctrl+Alt+A.
It's July, 2020 and latest vs code stable version is Version 1.47.
Toggle block comment shortcut is : Shift+Alt+A.
Official Source : VS-Code Keyboard Shortcuts
I'm using the Abyss theme which I like, but certain colors are too dark. I have customized some token colors using (for instance):
"editor.tokenColorCustomizations": {
"[Abyss]": {
"keywords": "#7ea4df",
but I can't figure out how to change the color of HTML tags in the editor. Can anyone help?
The accepted answer is good, but thought I'd add this as it obviates the need to edit the theme JSON itself. I edited my settings as follows:
"editor.tokenColorCustomizations": {
"[Abyss]": {
"keywords": "#7ea4df",
"types": "#1fa8d8",
"comments": "#727272",
"strings": "#29a792",
"textMateRules": [
{
"scope": "entity.name.tag",
"settings": {
"foreground": "#7ea4df"
}
}
]
}
},
You can go into the theme's .json file and modify it to suit your needs, as mentioned in this post. Mine was located in C:\Program Files\Microsoft VS Code\resources\app\extensions\theme-abyss\themes
EDIT: As pointed out in the comments by #www-0av-Com, the path to the file is now C:\Users\<username>\AppData\Local\Programs\Microsoft VS Code\resources\app\extensions\theme-abyss\themes, where <username> is your Windows user.
You can use Ctrl + Shift + P to open the Command Palette and then open up the Developer: Inspect Editor Tokens and Scopes to look at the TextMate scope of the element you're interested in modifying. In the case of the HTML tag in the abyss theme it's entity.name.tag. You can see what the Scope Inspector looks like in the second image below.
Then go into the abyss-color-theme.json file and search for that string and modify the color of the tags as you see fit. I changed mine to an ugly orange color as below:
I know it's might be too late, but for anyone who doesn't want to make this manually, there is the Rainbow Tags extension.
I'm using it for a couple of weeks and it's very satisfying.
For mac users, you can follow the below steps
Open finder
Press cmd+shift+h to open users folder
Go to users/your user name
Press cmd+shift+. To open hidden files
Go to .vscode/extensions/sdras.night-owl /themes/Night owl-color-theme.json(In my case its night owl theme.)
Drag and Open the file in vscode
Open the html file you want to customise
Select the div element and press cmd+shift+p
Select developer: inspector editor token and scopes
Select the textmatescope eg: entity.name.tag.js
Now open settings.json file in vscode
Add below code
"editor.tokenColorCustomizations": {
"[Night Owl (No Italics)]": {
"textMateRules": [
{
"scope": "entity.name.tag.js",
"settings": {
"foreground": "#7fdbca"
}
},
{
"scope": "entity.other.attribute-name",
"settings": {
"foreground": "#82AAFF",
"fontStyle": "bold"
}
}
]
}
}
change the foreground to whatever you want to use.
and your done.
How can I create custom emmet snippet with the highest possible priority to display in vscode?
When I updated html.json to add my own snippet for comment (with autor), I still see default emmet "c" snippet as first in list:
"Comment": {
"prefix": "c",
"body":[
"<!-- atiris: $1 -->$2"
],
"description": "Insert comment into html code"
}
That means I always have to choose the second option first.
Is there any property / settings to prioritize my own snippets?
You can use BetterSnippets vscode extension. It provides way more customization then builtin snippets. For your case you can use smth like this:
"betterSnippets.customSnippets": [
{
"name": "c",
"body": "<!-- atiris: $1 -->$2",
"when": {
"languages": [
"html"
],
},
"sortText": "!1"
},
]
SortText property is what you're looking for. I use !1 to make snippets order more customizable e.g. if I would assing sortText: "!2" to other snippet it will appear under the snippet with !1
You are editing the intellisense snippets with the above code rather than the Emmet snippets.
Regarding your question, the following link may help you prioritize which snippets are shown first: https://github.com/Microsoft/vscode/issues/32346
Regarding adding snippets to Emmet, the following should help:
In the settings.json file you can add the line
"emmet.extensionsPath": "/Users/username/Documents/code snippets"
(changing the path to a folder of your choosing)
Then add in that folder a file named snippets.json
You can use the format outlined in the link below to add snippets.
https://code.visualstudio.com/docs/editor/emmet