How to make my vscode font slant like sublime? - sublimetext3

I use the same font(Consolas) in VScode and sublime. But it looks different in the same place:
Here are my sublime settings:
{
"auto_complete_selector": "source,text",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker.tmTheme",
"font_face": "Consolas",
"font_size": 12,
"ignored_packages":
[
],
"theme": "Default.sublime-theme"
}
Here are my vscode settings:
"materialTheme.accent": "Blue",
"editor.fontFamily": "Consolas, 'Courier New', monospace",
"editor.fontWeight": 520,
"editor.codeLensFontSize": 11,
"editor.fontSize": 15,
"editor.formatOnType": true,
"debug.console.fontFamily": "Cascadia Mono",
"python.showStartPage": false,
"workbench.editorAssociations": [
{
"viewType": "jupyter.notebook.ipynb",
"filenamePattern": "*.ipynb"
}
],
"explorer.confirmDelete": false,
"todo-tree.tree.showScanModeButton": true,
"editor.fontLigatures": true,
"editor.tokenColorCustomizations": {
"comments": "#7ea9eb"
My question is: How to make my vscode font slant like sublime?

According to the VS Code documentation, you can customize your theme color by using the editor.tokenColorCustomizations rule in your user settings:
Open your settings.json and add the following rule first (replace YOUR THEME NAME HERE with the name of your color theme):
"editor.tokenColorCustomizations": {
"[YOUR THEME NAME HERE]": {
"textMateRules": []
}
}
Open a Python file of your choice. Then, open Command Palette with Ctrl+Shift+P and run "Developer: Inspect Editor Tokens and Scopes"
Click on the keyword you wish make it italic. For example, we click on the class keyword to view its TextMate scopes. Copy the first TextMate scope ID as highlighted:
Go back to your settings.json. Inside the textMateRules array, insert a new object with the scope property being the TextMate scope ID you just copied.
"editor.tokenColorCustomizations": {
"[YOUR THEME NAME HERE]": {
"textMateRules": [
{
"scope": "storage.type.class.python",
"settings": {
"fontStyle": "italic"
}
}
]
}
}
Save your settings.json and you should see the class keyboard in italics
Note
You can append more objects in the textMateRules array to make the font italic for more keywords. For example:
"editor.tokenColorCustomizations": {
"[YOUR THEME NAME HERE]": {
"textMateRules": [
{
"scope": "variable.parameter.function.language.special.self.python",
"settings": {
"fontStyle": "italic"
}
},
{
"scope": "storage.type.class.python",
"settings": {
"fontStyle": "italic"
}
}
]
}
},

Related

Using user-defined color in VS Code own Color Theme

In documentation of VS Code Extensions, it is mentioned that you can define your own color: https://code.visualstudio.com/api/references/contribution-points#contributes.colors
How can I use this color in the Color Theme I create?
For example, I have the following in package.json
"contributes": {
"themes": [
{
"label": "My Color Theme",
"uiTheme": "vs-dark",
"path": "./themes/my-color-theme.json"
}
],
"colors": [
{
"id": "color.gold",
"description": "Gold",
"defaults": {
"dark": "#FFB71B",
"light": "#FFB71B",
"highContrast": "#FFB71B"
}
}
]
}
And the following in my-color-theme.json (I would like to use "gold" for one of the item but it does not work):
{
"name": "My Color Theme",
"type": "dark",
"colors": {
"editor.background": "#000000",
"editor.foreground": "#FFFFFF",
"sideBarTitle.foreground": "color.gold",
},
...
}
Thanks
Color entries can only contain color values of the form #RGB, #RGBA, #RRGGBB or #RRGGBBAA, nothing else. No other color format (hsl etc.) or named color is supported. Hence "sideBarTitle.foreground": "color.gold" is an invalid entry.

How to colorize specific React.Js syntax on vscode?

I'm trying to figure out how to get a specific color syntax with vscode in a declaration of a class in React.
These are the colors I want to get:
As you see, the name of the class StorePicker is a purple, and the React method .Component (including the dot) is a pale grey.
As far as I know, to play with color syntax on vscode, it needs to be with the TM Scope. So to make this, on my code file where I have the class declaration, I press Ctrl+Shift+p and search for Inspect TM Scopes, and click on the specific elements to get their respective scopes.
In my specific case, I got these scopes for the elements I need to colorize:
The class Name StorePicker (entity.name.class.js, source.js)
The React keyword (entity.name.class.js, source.js)
The . (keyword.operator.accessor.js, source.js)
The method Component (entity.name.class.js, source.js)
As you can see, the StorePicker (class name), the React keyword and the method Component share the same Scope: entity.name.class.js.
So let's say I want to colorize only the .Component. So I put this on my theme's config:
{
"name": "[JAVASCRIPT] - Operator Accesor + Method",
"scope": ["keyword.operator.accessor.js", "entity.name.class.js", "source.js"],
"settings": {
"foreground": "#c2cacf"
}
}
but StorePicker and React.Component are also colorized with the same color:
And I also want to colorize only the StorePicker (class name):
{
"name": "[JAVASCRIPT] - Only Class Name",
"scope": ["entity.name.class.js", "source.js"],
"settings": {
"foreground": "#d393e9"
}
}
Again not only is StorePicker colorized, but React and Component are colorized with the same color too:
My question:
How I can get them colorized separately like in the first image (taken from a Screencast), if they share the same Scope?
I have no idea how you got those scopes...
{
"scope": "entity.name.type.module.js",
"settings": { "foreground": "#e2b419" }
},
{
"scope": "entity.other.inherited-class.js",
"settings": { "foreground": "#c2cacf" }
},
{
"scope": "entity.name.type.class.js",
"settings": { "foreground": "#d393e9" }
},

Is there a way to use another extension instead of .feature?

I use some files written with Gherkin mode, but they don't have the ".feature" extension. I tried to change some visual code files related to cucumber extension to be able to highlight files that are not .feature but I had no success.
For example:
Workspace settings.json:
{
"folders": [
{
"path": "/home/user/git"
},
{
"path": "/home/user/Documents/scripts"
}
],
"settings": {}
"cucumberautocomplete.steps": [
"*.myext"
],
"cucumberautocomplete.syncfeatures": "*.myext",
"cucumberautocomplete.strictGherkinCompletion": true
}
It worked changing the file /home/user/.config/Code/User/settings.json and adding this config:
"files.associations": {
"*.myext": "feature"
}
{
"editor.renderWhitespace": "all",
"window.titleBarStyle": "custom",
"editor.fontSize": 15,
"python.jediEnabled": false,
"terminal.integrated.shell.linux": "/bin/bash",
"workbench.colorTheme": "Visual Studio Dark",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"[feature]": {
},
"files.associations": {
"*.myext": "feature"
}
}

Function highlighting with monokai in VS Code / Atom and Sublime

While running Sublime Text 3 and VS Code (or Atom) with the Monokai color theme, the Sublime Text syntax highlighting uses blue for function calls, such as in the example below
However, when I open the same code in VS Code using the monokai theme, functions are not painted blue
I would really like to change that, the code looks much better with function calls highlighted. However, I looked around the web and couldn't find how to change this behavior. Does anyone have any tips for that?
Thanks!
SEE UPDATE BELOW!
Seems like I've found a temporary solution. Go to this folder (if you are on Mac) /Applications/Visual Studio Code.app/Contents/Resources/app/extensions/theme-monokai/themes and put this code in monokai-color-theme.json file:
{
"name": "Function call",
"scope": "meta.function-call.generic",
"settings": {
"foreground": "#66d9efff"
}
},
Here is an example how it can look like:
screenshot
But keep in mind, that after theme update this changes may disappear!
UPDATE:
After having a couple more troubles with highlighting, I decided to upload the file with theme to GitHub and keep it up to date. So, if you don't want to dive into the code, just look in my repository: https://github.com/spyker77/monokai-theme-extended
UPDATE (April 2021)
It turns out that the previous solution is not sustainable. Therefore at the moment a better one could be:
In you Visual Studio Code go to "Code" => "Preferences" => "Color Theme" and pick Monokai;
Open settings.json file (how-to);
There will probably already be a bunch of settings in there, so all you need to do is just add the following customisations at the end and before the closing brace (don't forget a trailing comma after the last setting you continue):
"editor.tokenColorCustomizations": {
"[Monokai]": {
"textMateRules": [
{
"name": "Decorator definition decorator",
"scope": "punctuation.definition.decorator.python",
"settings": {
"foreground": "#F92672"
}
},
{
"name": "Meta function-call",
"scope": "meta.function-call.generic.python",
"settings": {
"foreground": "#66D9EF"
}
},
{
"name": "Storage type function async",
"scope": "storage.type.function.async.python",
"settings": {
"foreground": "#F92672",
}
},
{
"name": "Punctuation separator period",
"scope": "punctuation.separator.period.python",
"settings": {
"foreground": "#F8F8F2",
}
},
{
"name": "Entity name function decorator",
"scope": "entity.name.function.decorator.python",
"settings": {
"foreground": "#66D9EF",
}
},
{
"name": "Entity name type class",
"scope": "entity.name.type.class.python",
"settings": {
"fontStyle": ""
}
},
{
"name": "Entity other inherited-class",
"scope": "entity.other.inherited-class.python",
"settings": {
"fontStyle": "italic"
}
},
{
"name": "Support type python",
"scope": "support.type.python",
"settings": {
"fontStyle": ""
}
},
{
"name": "String quoted docstring multi python",
"scope": "string.quoted.docstring.multi.python",
"settings": {
"foreground": "#88846F",
}
}
]
}
}
after trying for server hours finally found a solution and I came back to you to share the solution since I tried the answer above and couldn't make it work.
it turns out that the problem I with VScode extensions (python for Vscode), so disable that first,extension
then go to your setting.json file like that how to open setting
add this to the top of your file
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "meta.function-call.generic",
"settings": {
"foreground":"#19D1E5"
}
}
]
},
and restart VScode and this should work, btw I am using monokai vibrent, and I am sure it will work in any theme you like.
setting.json
like this here
In settings.json:
"editor.tokenColorCustomizations": {
"[Monokai]": {
{
"scope": "entity.name.function",
"settings": {
"foreground": "#fdc306d0", // use your desired color
"fontStyle": "underline" // I like this, foreground color has some reduced opacity
}
}
}
}
might do the trick.

Sublime Text 3 sidebar not changing with theme

I have something very strange just happen with Sublime Text. I'm using Material theme and yesterday the sidebar was using the theme but today it's the default theme. I don't think I did anything different, just loaded it up.
It's picking up the color scheme.
User Preferences
{
"always_show_minimap_viewport": true,
"theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",
"font_face": "Fira Code",
"font_options":
[
"gray_antialias"
],
"font_size": 15,
"ignored_packages":
[
"Markdown",
"Vintage"
],
"line_padding_bottom": 3,
"line_padding_top": 3,
"material_theme_accent_lime": true,
"material_theme_disable_fileicons": true,
"material_theme_disable_tree_indicator": true,
"material_theme_panel_separator": true,
"material_theme_small_statusbar": true,
"material_theme_tabs_separator": true,
"overlay_scroll_bars": "enabled",
"show_panel_on_build": false,
"theme": "Default.sublime-theme",
"use_simple_full_screen": true,
"word_wrap": "true"
}
Why would this happen? Any ideas how I can fix it?
I was just having this issue and found the fix on the theme's official github repo section "Activate the theme".
i pasted to : preferences > settings-User
these lines :
{
"theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme"
}
after deleting these :
{
"color_scheme": "Packages/Material Theme/schemes/Material-Theme-Darker-OceanicNext.tmTheme",
"ignored_packages":
[
"Vintage"
]
}
i have sublime text 3 !!!

Resources