I am trying to change the icon from the extension test.js. I found this documentation vscode-icons Fine tuning on my settings file settings.json I put:
{
"vsicons.associations.files": [
{ "icon": "test", "extensions": ["test.js"], "format": "svg", "overrides": "test.js" }
]
}
But don't work, and when I change it to js, works:
{
"vsicons.associations.files": [
{ "icon": "test", "extensions": ["js"], "format": "svg", "overrides": "js" }
]
}
What am I missing?
The id of the icon is testjs.
Answare by JimiC
{
"vsicons.associations.files": [
{ "icon": "test", "format": "svg", "overrides": "testjs" }
]
Related
I am writing a logic gate simulator and have decided to make a VSCode extension for the language it uses. So far, I have a folder named lgc that contains the extension. Inside that folder there are the following:
package.json:
{
"name": "Lgc",
"version": "0.1.0",
"engines": {
"vscode": ">=0.9.0-pre.1"
},
"publisher": "AwesomeCronk",
"contributes": {
"languages": [{
"id": "lgc",
"aliases": ["lgc", "Lgc", "LGC"],
"extensions": [".lgc",".ttb"]
}],
"grammars": [{
"language": "lgc",
"scopeName": "source.lgc",
"path": "./syntaxes/lgc.tmLanguage.json"
}]
}
}
syntaxes/lgc.tmLanguage.json:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "Lgc",
"patterns": [
{
"include": "#keywords"
}
],
"repository":
{
"keywords":
{
"paterns":
[
{
"name:": "keyword.gate.lgc",
"match": "a"
}
]
}
},
"scopeName": "source.lgc"
}
This is a test that should highlight any instance of the letter a as keywords. When I copy this folder to $Home/.vscode/extensions/, and restart VSCode with a .lgc file open, it is not highlighted at all. All the text is white. The status bar shows lgc as the language, so I know VSCode is detecting the language properly. Why doesn't it highlight?
I think you have a typo in your syntaxes/lgc.tmLanguage.json file:
"paterns":
Should be:
"patterns":
I have barebone Flutter 2.5 project and Figma design tokens which were exported via Figma Tokens.
Those design tokens look like this:
project\style_dictionary\properties\tokens.json
{
"borderWidth": {
"100": {
"value": "1.5",
"type": "borderWidth"
}
},
"opacity": {
"basic": {
"100": {
"value": "0.04",
"type": "opacity"
}
}
},
"colors": {
"basic": {
"red": {
"50": {
"value": "#ffebee",
"type": "color"
}
}
}
}
}
and Style Dictionary config which looks like this
project\style_dictionary\config.json
{
"source": [
"properties/*.json"
],
"platforms": {
"flutter": {
"transformGroup": "flutter",
"buildPath": "../lib/unique_file/",
"files": [
{
"destination": "style_dictionary.dart",
"format": "flutter/class.dart",
"className": "StyleDictionary"
}
]
},
"flutter-separate": {
"transformGroup": "flutter-separate",
"buildPath": "../lib/unique_file/",
"files": [
{
"destination": "style_dictionary_color.dart",
"format": "flutter/class.dart",
"className": "StyleDictionaryColor",
"type": "color",
"filter": {
"attributes": {
"category": "colors"
}
}
}
]
}
}
}
Running style-dictionary build in CMD in style_dictionary will generate next file
project\lib\unique_file\style_dictionary_color.dart
import 'dart:ui';
class StyleDictionaryColor {
StyleDictionaryColor._();
static const basicRed50 = #ffebee;
}
But in should be like that at the end
project\lib\unique_file\style_dictionary_color.dart
import 'dart:ui';
class StyleDictionaryColor {
StyleDictionaryColor._();
static const basicRed50 = Color(0xFFFFEBEE);
}
Question:
How and where can I create Style Dictionary transforms file to create right dart file with Color type of the static variable?
I cannot modify exported design tokens.
Create a project\build.js as a custom Transforms file. Logic of creation was used from default Flutter color transforms and Documentation
const StyleDictionary = require('style-dictionary')
const baseConfig = require('./style_dictionary/config.json')
const Color = require('tinycolor2')
StyleDictionary.registerTransform({
name: 'colors/hex8flutter',
type: 'value',
matcher: prop => {
return prop.attributes.category === 'colors'
},
transformer: prop => {
var str = Color(prop.value).toHex8().toUpperCase();
return `Color(0x${str.slice(6)}${str.slice(0, 6)})`;
},
})
const StyleDictionaryExtended = StyleDictionary.extend(baseConfig)
StyleDictionaryExtended.buildAllPlatforms()
Modify project\style_dictionary\config.json so it can be executed from project directory and include new transforms - "transformColorsToColor" together with other transforms from Flutter
{
"source": [
"style_dictionary/properties/*.json"
],
"platforms": {
"flutter": {
"transforms": ["attribute/cti", "name/cti/camel", "color/hex8flutter", "size/flutter/remToDouble", "content/flutter/literal", "asset/flutter/literal", "font/flutter/literal", "colors/hex8flutter"],
"buildPath": "lib/unique_file/",
"files": [
{
"destination": "style_dictionary.dart",
"format": "flutter/class.dart",
"className": "StyleDictionary"
}
]
},
"flutter-separate": {
"transforms": ["attribute/cti", "name/ti/camel", "color/hex8flutter", "size/flutter/remToDouble", "content/flutter/literal", "asset/flutter/literal", "font/flutter/literal", "colors/hex8flutter"],
"buildPath": "lib/unique_file/",
"files": [
{
"destination": "style_dictionary_color.dart",
"format": "flutter/class.dart",
"className": "StyleDictionaryColor",
"type": "color",
"filter": {
"attributes": {
"category": "colors"
}
}
}
]
}
}
}
Run npm init with all default answers
Run npm install --save tinycolor2
Run node build.js
I am creating a language extension in vscode for myself. Because it will associate with different file types, I plan to make different tmlanguge files for specific rules. According to this, I could extend the scopeName to achieve that.
So I created in my ./package.json files something like this:
{
"name": "tst",
"displayName": "Test Language",
"description": "A test for language extension",
"version": "0.0.1",
"engines": {
"vscode": "^1.34.0"
},
"contributes": {
"languages": [{
"id": "tst",
"aliases": ["Test", "tst"],
"extensions": [".tst",".type1",".type2"],
"configuration": "./language-configuration.json"
}],
"grammars": [{
"language": "tst",
"scopeName": "source.tst",
"path": "./syntaxes/tst.tmLanguage.json"
},
{
"scopeName": "source.tst.type1",
"path": "./syntaxes/type1.tmLanguage.json"
},
{
"scopeName": "source.tst.type2",
"path": "./syntaxes/type2.tmLanguage.json"
}]
}
}
Then I create the base rules in ./syntaxes/tst.tmLanguage.json and both .type1 and .type2 have been applied with my grammars.
{
"name": "Test",
"patterns": [
{
"match": "test",
"name": "constant.character"
}
],
"scopeName": "source.tst"
}
Afterwards I also make ./syntaxes/type1.tmLanguage.json something like this:
{
"name": "type1",
"patterns": [
{
"match": "type1",
"name": "constant.language"
}
],
"scopeName": "source.tst.type1"
}
Nothing works for any rules in .type1.
I hope both file in the picture can recognize test and type1.
I checked the vscode pre-installed cpp language extension.
They also use scopeName for source.c and source.c.platform.
I guess it is for the similar purpose?
Did I overlook something?
Thanks for the help.
If you want to use these scopes from different tmLanguage files in the main grammar, you have to explicitly include them:
{
"name": "Test",
"patterns": [
{
"match": "test",
"name": "constant.character"
},
{
"include": "source.tst.type1"
},
{
"include": "source.tst.type2"
}
],
"scopeName": "source.tst"
}
Regarding the built-in cpp extension and platform.tmLanguage.json - as far as I can tell, it's not actively being used by the c and cpp grammars. There's this comment in cpp/build/update-grammars.js:
// `source.c.platform` which is still included by other grammars
So that sounds more like a backwards-compatibility measure in case any third-party grammars still use it.
I have tried adding bootstrap css to the install.json file the following way, but I got an error:
,
{
"type": "style",
"src": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
}
How can I add it to the project and use it?
I tested this in my install.json and it worked fine
"resources": {
"body": [
{
"type": "style",
"src": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
},
{
"type": "style",
"src": "./source/app.css"
},
{
"type": "script",
"src": "./source/app.js"
}
]
},
"preview": {
"handlers": [
{
"options": ["_default"],
"execute": "INSTALL_SCOPE.setOptions(INSTALL_OPTIONS)"
},
{
"options": ["_product"],
"execute": "INSTALL_SCOPE.setProduct(INSTALL_PRODUCT)"
}
]
},
"options": {}
}
There is likely something wrong with the JSON of your install.json. You could try copy and paste your install.json in this tool to test: https://www.cloudflare.com/apps/developer/install-json-tester
I am using the sample project
https://github.com/spring-cloud-samples/configserver
I run the project and when i point my browser to
http://localhost:8888/foo/development/
I get the following values
{
"name": "foo",
"profiles": [
"development"
],
"label": "master",
"propertySources": [
{
"name": "overrides",
"source": {
"eureka.instance.nonSecurePort": "${CF_INSTANCE_PORT:${PORT:${server.port:8080}}}",
"eureka.instance.hostname": "${CF_INSTANCE_IP:localhost}",
"eureka.client.serviceUrl.defaultZone": "http://localhost:8761/eureka/"
}
}
]
}
But i do not get the values in the file foo-development.properties in
https://github.com/spring-cloud-samples/config-repo
I am new to spring-cloud config. Could somebody point in the right direction to the values of the property file ?
Thank you
I ran the config-server in Ubuntu and everything works there as expected. This must be a problem in windows only. The output I get in Ubuntu is the following:
{
"name": "foo",
"profiles": [
"development"
],
"label": "master",
"propertySources": [
{
"name": "overrides",
"source": {
"eureka.instance.nonSecurePort": "${CF_INSTANCE_PORT:${PORT:${server.port:8080}}}",
"eureka.instance.hostname": "${CF_INSTANCE_IP:localhost}",
"eureka.client.serviceUrl.defaultZone": "http://localhost:8761/eureka/"
}
},
{
"name": "https://github.com/spring-cloud-samples/config-repo/foo-development.properties",
"source": {
"bar": "spam"
}
},
{
"name": "https://github.com/spring-cloud-samples/config-repo/foo.properties",
"source": {
"foo": "bar"
}
},
{
"name": "https://github.com/spring-cloud-samples/config-repo/application.yml",
"source": {
"info.description": "Spring Cloud Samples",
"info.url": "https://github.com/spring-cloud-samples",
"eureka.client.serviceUrl.defaultZone": "http://user:${eureka.password:}#localhost:8761/eureka/",
"invalid.eureka.password": "<n/a>"
}
}
]
}