I'm trying to customize my VSCode theme using textMateRules. What I want to do is to change the color class names, but not all of them, only specific ones.
For example, in the project I'm working in, we have classes: A, B, C, D ...
A and B are "special" classes and I would like to highlight them differently (let say in red). This is what I added for now in my setting.json file:
{
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "entity.name.type.class",
"settings": {
"foreground": "#FF0000",
}
},
]
},
}
But it is highlighting all the classes names (including C, D and all the others).
Is there a way to add more rules to the scope, like a regexp match?
As recommended by #rioV8 I used the Highlight extension:
And I added this in my setting.json:
{
"highlight.regexes": {
"(A|B)": {
"decorations": [
{
"color": "red"
},
]
}
},
}
Related
I am using Amazon Style Dictionary to generate SCSS variables from JS definition files. Given the following input:
module.exports = {
color: {
border: {
focus: { value: '#0071ff' }
}
}
}
I would like to generate not one output variable for this, but two (HEX and RGB). Is it possible to write a custom value transformer that spits out multiple values for a given input? Or do I need to run a separate pipeline for this use case?
This could be your colors.json file configuration
"source": ["sources/colors.js"],
"platforms": {
"css-rgb": {
"transforms": ["color/rgb"],
"buildPath": "dist/rgb/",
"files": [
{
"destination": "colors-rgb.css",
"format": "css/variables"
}
]
},
"css-hex": {
"transforms": ["color/hex"],
"buildPath": "dist/hex/",
"files": [
{
"destination": "colors-hex.css",
"format": "css/variables"
}
]
}
}
to provide to your StyleDictionary configuration.
So you grab the sources from your sources/colors.js file and create in output in the dist folder two subfolders, rgb containing colors-rgb.css and hex containing colors-hex.css.
I have a project structure like so:
-$PROJECT
--src
---data
----projects
-----project1
------project.json
------images
-------project1-preview.png
-----project2
------project.json
-------images
...
And so on, for however many projects. I could query these project.json files when they were named the title of the project and within a projects folder using allProjectsJson in graphQl, however now they are within subfolders within projects. I can only query them individually as allProject1Json and so on. Is there a way to query allProjectsJson so I get all the project.json files?
I can find my projects files by querying allFile with a filter for json files, however, these files are not transformed json so I can't access the elements.
In my gatsby-config file I am importing src/data as a source for files.
From my answer at https://github.com/gatsbyjs/gatsby/issues/20734:
Ahh, I see what you mean :)
luckily gatsby-transformer-json has a plugin option that will help get you unstuck!
It's the typeName option. You should be able to check for a field on each JSON node, and use that as the type name. Something like this:
{
resolve: `gatsby-transformer-json`,
options: {
typeName: ({ node, object, isArray }) =>
object.project ? `Project` : `Json`,
},
},
That way anything with the field project defined will show up as allProject { ... }, where any other json files will show up as allJson { ... }
{
allProject {
nodes {
project
}
}
}
{
"data": {
"allProject": {
"nodes": [
{
"project": "project1"
},
{
"project": "project2"
}
]
}
}
}
My project works very similarly. Here's how I have my gatsby-config.js setup:
module.exports = {
...
plugins: [
...,
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'project', // Identifier. Will then be queried as `allProjectsJson`
path: './data', // Source folder containing the JSON files
},
},
...,
]
};
Example JSON file:
[
{
"title": "Hello",
"description": "World",
"url": "https://www.google.com",
"image": "./images/img1.jpg"
},
{
"title": "World",
"description": "Hello",
"url": "https://www.google.com",
"image": "./images/img2.jpg"
},
]
Example query:
query projects {
allProjectsJson {
edges {
node {
id
title
description
url
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
}
}
}
Hope this helps!
I'm currently setting up VS Code for Python development. I'd like to have triple-quoted docstrings highlighted as comments, not as strings, i.e. grey instead of light green in this picture:
I know that I can adjust this in the TextMate rules for this theme, but I can't figure out the right scope for Python docstrings. I thought I would be something like this:
"editor.tokenColorCustomizations": {
"[Predawn]": {
"comments": "#777777",
"textMateRules": [
{
"scope": "string.quoted.triple",
"settings": {
"foreground": "#777777"
}
}
]
},
}
but that does not have the desired effect, even after restarting the editor. Does anyone know what the right scope is?
Just to expand on the comments above, the scopes are:
For docstrings: string.quoted.docstring.multi.python for """ ''' (or .single for ' ")
For triple quote strings that are not docstrings: string.quoted.multi.python
The scope string.quoted.triple is not used, even though it appears in settings.json autocomplete.
Try using this one
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"string.quoted.multi.python",
"string.quoted.double.block.python",
"string.quoted.triple",
"string.quoted.docstring.multi.python",
"string.quoted.docstring.multi.python punctuation.definition.string.begin.python",
"string.quoted.docstring.multi.python punctuation.definition.string.end.python",
"string.quoted.docstring.multi.python constant.character.escape.python"
],
"settings": {
"foreground": "#777777" //change to your preference
}
}
]
TLDR; How can I have an extension colorize the syntax the extension is defining without it actually being a color theme the user has to enable?
I'm attempting to port this Sublime Text plugin (ToDone) to VSCode.
It creates a grammar for todo lists and then uses syntax highlighting to emphasize important tasks, mute completed tasks, etc.
I found "editor.tokenColorCustomizations", via Customize a Color Theme. It works with the new syntax when I use it in my user settings, but fails when I use it in the package.json#contributes portion of the extension manifest.
{
"contributes": {
"languages": [
{
"id": "todone",
"aliases": [
"ToDone",
"To-Done"
],
"extensions": [
".todone",
".todo"
]
}
],
"grammars": [
{
"language": "todone",
"scopeName": "text.todone",
"path": "./todone.tmLanguage"
}
],
"configurationDefaults": {
"[todone]": {
"editor.insertSpaces": false,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "symbol.definition.task-heading.todone",
"settings": {
"foreground": "#ff8800"
}
}
]
}
}
}
}
}
So far, the syntax seems ok — it's exactly what is being used by the Sublime plugin and the colors from the user-settings are applied correctly. Also, the format of the settings seems ok because "editor.insertSpaces" is being applied and the colors are working when present in the user-settings.
Lastly, I get a very disappointing 'Warning' 'Unknown editor configuration setting' message on the "editor.tokenColorCustomizations" setting in the extension package.json.
So, sounds like this setting is not enabled for extensions?
Another possible route I saw was to use decorators. But, I didn't see anything on inspecting the syntax tokens associated with a portion of text in the docs, e.g. some way to iterate through the syntax tokens of the document to apply decorators. So, the decorator route sounds like the hard-way compared to "editor.tokenColorCustomizations".
Any suggestions on how to make this work would be greatly appreciated.
Edit: The code, so far, is on GitHub: tiffon/vscode-todone
It only fails if you specify a specific language. It is working for me if I do not specify the todone extension.
"configurationDefaults": {
"editor.insertSpaces": false,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "symbol.definition.task-heading.todone",
"settings": {
"foreground": "#ff8800"
}
}
]
}
}
Good morning to all and thank you for your help.
I'm working in a map page (map.html) create by leaflet library that take data from a external geojson file called water_well.js. This file, previously generated by overpass service is just a list of markers. every Marker have some proprerties. Follow an exemple:
"properties": {
"operator:type": "international",
"is_in:district": "west_mamprusi",
"is_in:region": "northern",
"source:date": "2012-02-11",
"source:ele": "gps",
"water_wells:source_type": "borehole"
},
The main page extract those data from the file before with this javascript:
var wwMarker = L.geoJson(water_well, {
pointToLayer : function (feature, latlng) {
lat = feature.geometry.coordinates[0];
lng = feature.geometry.coordinates[1];
//following code that make error
op_type = feature.properties.operator_type;
district = feature.properties.is_in:district;
region = feature.properties.is_in:region;
source_date = feature.properties.source:date;
source_ele = feature.properties.source:ele;
source_type = feature.properties.water_wells:source_type;
.....
I'm sure the problem is my Zero javascript knowledge, but I'm not a programmer and I do this map for my NGO engaged in water wells in Burkina Faso.
The script for extraction of the data don't work in this point:
op_type = feature.properties.operator:type;
The problem is ":" because is invalid character.
The second question is that not all markers in the first file called water_well.js have the same "properties" filled ad actually it is possible that someone have different group of "properties like those two:
{
"type": "Feature",
"id": "node/1606958159",
"properties": {
"#id": "node/1606958159",
"amenity": "drinking_water",
"man_made": "water_well",
"name": "puits 4"
},
"geometry": {
"type": "Point",
"coordinates": [
-3.6235696,
12.02171
]
}
},
{
"type": "Feature",
"id": "node/1913126817",
"properties": {
"#id": "node/1913126817",
"ele": "170.8000030517578",
"grid_proximity": "grid_further_500_m",
"is_in:district": "builsa",
"is_in:region": "upper_east",
"man_made": "water_well",
"operational_status": "open",
"operator:type": "individual",
"pipe_connection": "no",
"pump": "manual",
"seasonal": "another_pattern",
"source": "MVP,Columbia University",
"source:date": "2012-02-14",
"source:ele": "gps",
"water_wells:source_type": "unprotected_well"
},
"geometry": {
"type": "Point",
"coordinates": [
-1.2430456,
10.3233693
]
}
},
maybe it is possible to extract all properties of each item independently from which one is present or not..... This can be de better way to solve the problem but I've no idea how to do that.
This is what I do (ckick the water tap to see pop-up): www.h2openmap.org/map
This is almost what I would like to do (ckick the water tap to see pop-up): overpass-turbo.eu/s/7Ov
Thank you for spending your time reading my question.
Have a nice day everyone, Francesco
You can access those properties using the bracketnotation, instead of using:
district = feature.properties.is_in:district;
Use bracketnotation:
district = feature.properties['is_in:district'];
Reference on property-accessors: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors
Now if you want to do something based on if a property exists there is a hasOwnProperty method available on objects. Since feature.properties is an object you can use that in a condition:
if (features.properties.hasOwnProperty('is_in:district')) {
// Property exists, do stuff
}
// or
if (!features.properties.hasOwnProperty('is_in:district')) {
// Property does not exist, do stuff
}
If you want to do something base on wether multiple properties exist you can use the && (and) operator:
if (features.properties.hasOwnProperty('is_in:district') &&
features.properties.hasOwnProperty('source:data')) {
// Properties exist, do stuff
}
// Or
if (!features.properties.hasOwnProperty('is_in:district') &&
!features.properties.hasOwnProperty('source:data')) {
// Properties do not exist, do stuff
}
You could use the || (or) operator to see if at least one of the conditions matches:
if (features.properties.hasOwnProperty('is_in:district') ||
features.properties.hasOwnProperty('source:data')) {
// At least one of the properties exist, do stuff
}
// Or
if (!features.properties.hasOwnProperty('is_in:district') ||
!features.properties.hasOwnProperty('source:data')) {
// At least one of the properties does not exist, do stuff
}
Reference for this can be found here under "Logical operators": https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
You can use something like to build (or don't build) the data object that you need for your popup. Hope that helps.