I'm cleaning up my vue.js code and I'm about to create some of my own specific components. I'm using vetur as an extension for VS Code. I read that it's possible to provided auto-complition and descriptions for my component tags and attributes.
The Vetur Docs say I have to create tags.json and attributes.json files and add them to my package.json. After restarting VS Code it should work. But it doesn't. Has anyone managed to achive this and sees where I'm making a mistake?
Thanks in advance!!
This is the content of my tags.json
{
"mex-btn": {
"description": "My Mex Button",
"attributes": "["content"]
}
}
This is the content of my attributes.json
{
"mex-btn/content": { "description": "Content of the Button"}
}
and this is the vetur key in my package.json
"vetur": {
"tags": "./tags.json",
"attributes": "./attributes.json"
}
Related
I'm new to vscode and can't get snippets to work properly inside of Vue files. They work in /snippets/vue.json:
{
"<template></template>": {
"prefix": "template",
"body": [
"<template>$1</template>"
]
}
}
This works, as long as it is written in the vue base layer but not inside script/template/style tags. I've tried adding it to vue-injection-markdown.json which I thought is used for exactly that but it doesn't work. I've also created a vue-html.json file and added the json there but it also doesn't make the snippets work:
{
"hello": {
"prefix": "hello",
"body": [
"blub"
]
}
}
I've installed both these plugins:
Vue Language Features (Volar)
TypeScript Vue Plugin (Volar)
What am I doing wrong?
Ok, it has to be defined either in global.code-snippets with a html scope or in the html.json file.
I followed this doc to add CSS reset to my app.
https://create-react-app.dev/docs/adding-css-reset/#indexcss
But it showed this message:
"stylelint": {
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": null
}
How to fix this problem?it is annoying...
To fix this warning you just need to add this line to.vscode/settings.json inside your project (you can create this file if it doesn't already exist):
{
"css.lint.unknownAtRules": "ignore"
}
Source: https://create-react-app.dev/docs/adding-css-reset/#indexcss
For VS Code -
To make the VS Code recognise this custom CSS directive, you can provide custom data for VS Code's CSS Language Service as mentioned here - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/customData.md.
Create a CSS custom data set file with the following info. Place it at location .vscode/custom.css-data.json relative to the project root.
{
"version": 1.1,
"properties": [],
"atDirectives": [
{
"name": "#import-normalize",
"description": "bring in normalize.css styles"
}
],
"pseudoClasses": [],
"pseudoElements": []
}
Now, if you don't have already, create a .vscode\settings.json file relative to project root. Add a field with key "css.customData" and value as the path to custom data set. For example,
{
"css.customData": ["./.vscode/custom.css-data.json"]
}
Now, you will no longer get "Unknown at rule" warning. When you hover over "#import-normalize", you will see the description you set for it in custom.css-data.json
#import-normalize is a non-standard at-rule. From the rule's documentation:
This rule considers at-rules defined in the CSS Specifications, up to and including Editor's Drafts, to be known.
However, the rule has an ignoreAtRules secondary option for exactly this use case, where you can list the non-standard imports you are using.
For example, in your package.json:
{
"stylelint": {
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [true, {
"ignoreAtRules": ["import-normalise"]
}]
}
}
}
Or within your .stylelintrc file:
{
"extends": "stylelint-config-recommended",
"rules": {
"at-rule-no-unknown": [true, {
"ignoreAtRules": ["import-normalise"]
}
}
}
I am building an Aurelia app with TypeScript and decided to try out Semantic UI. I followed this question (Aurelia Semantic dropdown) and it helped me install Semantic into Aurelia. It seems that it got installed already built with default theme. Is there a way I can install semantic into Aurelia TypeScript app, then add some custom gulp tasks to build according to my own theme.config? I would like also to override some variables like colors, font sizes etc. After it is built I'd like to use the built version in Aurelia view models (TypeScript) and in my views. How can I achieve that?
Here is how I solved this:
Installed semantic to some local folder with npm
Copied over the semantic folder and semantic.json to web app root folder (so semantic folder is on the level where I have node_modules and jspm_packages)
Inside semantic.json I specified the list of components I want to include in my app
Inside semantic.json I modified "output" and "clean" paths to match the folders where I serve files from.
The semantic.json:
{
"base": "semantic",
"paths": {
"source": {
"config": "src/theme.config",
"definitions": "src/definitions/",
"site": "src/site/",
"themes": "src/themes/"
},
"output": {
"packaged": "../dist/semantic",
"uncompressed": "../dist/semantic/components/",
"compressed": "../dist/semantic/components/",
"themes": "../dist/semantic/themes/"
},
"clean": "../dist/semantic"
},
"permission": false,
"autoInstall": false,
"rtl": false,
"version": "2.2.4",
"components": [
"button",
...
"site"
]
}
Inside Aurelia's gulp definitions I added semantic build task
The build/tasks/build.js:
var buildSemantic = require('../../semantic/tasks/build');
gulp.task('build-semantic', buildSemantic);
...
gulp.task('build-layout', function (callback) {
return runSequence(
'build-html',
'build-semantic',
'build-less',
callback
);
});
When coding I go into semantic src (e.g. semantic\src\themes\default\globals\site.variables) and modify things in there
Run gulp build-layout
The output is added to my dist folder and I can use it in my views
As for the view models I created some helper components to be used as aurelia attributes e.g. the semantic tooltip:
import {customAttribute, inject} from 'aurelia-framework';
import * as $ from 'jquery';
import '../semantic/semantic.min.js';
#customAttribute('semantic-tooltip')
#inject(Element)
export class SemanticTooltip {
constructor(private element: HTMLElement) {
}
attached() {
$(this.element).popup();
}
}
Usage:
<i class="info circle icon" data-content="Sample tooltip" semantic-tooltip></i>
I noticed that after using the command stencil init to generate a .stencil file for a new stencil project, the generate file contains a customLayouts attribute. For example, the file might contain this:
{
"normalStoreUrl": "http://www.my-store.com",
"port": 3000,
"username": "Stencil",
"token": "11223344556677889900",
"customLayouts": {
"products": {},
"search": {},
"brands": {},
"categories": {}
}
}
Can someone please explain the purpose of this customLayout object and how it can be used?
It isn't presently in use. It will be available for use to have customized templates per each of those types of pages once we have finished some engineering work. It is a placeholder at this time.
I'm trying to upgrade an existing express site to use kraken.js
I've got my dynamic pages loading ok (so far), but I can't seem to serve static files.
Looking at the example, pages, it seems simple enough that I just have to add
"middleware": {
"static": {
"arguments": [ "path: ./client" ]
}
}
In my config.json file. The file I'm trying to serve is ./client/build/js/bundle.js, and I can confirm that the file exists in the folder. It is NOT in a ./public folder.
What do I need to do to get kraken (or kraken.js static-serve) to find my static files?
I've placed the file in a ./public/client/build/js/bundle.js and kraken has no problem finding the file in that location.
I think you might be missing the "module" member of the middleware object. My current Kraken-generated static middleware config object looks like this:
"static": {
"module": {
"arguments": [ "path:./.build" ]
}
}
OK, I found out how to make it work. Notice how in your config that "public" isn't in there? That meant it was being pre-pended or configured somewhere else. That somewhere else is in /node-modules/kraken-js/config/config.json. I amended it to look like this:
"static": {
"enabled": true,
"priority": 40,
"module": {
"name": "serve-static",
"arguments": [ "path:./public", "path:./client" ]
}
},
Then in your regular /config/config.json I edited the static object to look like this:
"static": {
"module": {
"arguments": [ "path:./.build", "path:./build" ]
}
},
Notice that in the second argument there is not a "." before build.
Finally, I used script tags that looked like this in the master layout:
<script src="/js/test.js"></script>
So, from your root project directory I have /client/build/js/test.js and test.js loads correctly.
Also, there is one more way to do it that is easier and doesn't require mucking about in the kraken source. In your main index.js file you can do this:
app = module.exports = express();
app.use(kraken(options));
app.use(express.static('client')); // Add this line
Days, then weeks, then months went by, and nothing worked.
I should have noted that I am not using Yoeman, and we use gulp at work, which may have been part of the problem.
The solution turned out to be
"middleware": {
"static": {
"route": "/public"
},
which looks very different to any of the documentation from kraken. Hope this helps somebody.