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"]
}
}
}
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 have an application created using the create-react-app.
I need to disable one rule from the default CRA Lint rules:
"react-hooks/exhaustive-deps": 0
After checking all of the resources about the topic and I'm still failing to disable that rule. I made an .env file with EXTEND_ESLINT=true
and I've included the following in my .eslintrc in the root directory
{
"eslintConfig": {
"extends": ["react-app"],
"overrides": [
{
"rules": {
"react-hooks/exhaustive-deps": 0
}
}
]
}
}
EDIT based on the comments suggestions:
Aditionally, moving the .eslintrc conents to package.json is not working either.
Package.json
"eslintConfig": {
"extends": [
"react-app",
"shared-config"
],
"rules": {
"react-hooks/exhaustive-deps": 0
}
},
Am i missing something ? Please advice if possible :)
What do I need to setup in brunch-config.js to be able to resolve absolute path from project's root folder? i.e
import { helper } from '/imports/utilities/helper'
The reason being is I have a legacy React app and it imports local files by using relative path. While I'm trying to use brunch, I need to figure out a way to setup brunch so that it understands the path without having to change the code.
I tried to use npm alias but not sure how it works
npm: {
aliases: {
'/imports': 'imports/**'
}
}
Found the solution with babel-plugin-module-resolver package.
Since all my codes are under /imports dir, in brunch-config.js I setup an alias based on their documentation:
plugins: {
babel: {
plugins: [
...,
["module-resolver", {
"root": ["./imports"],
"alias": {
"/imports": ([, path]) => `./imports${path}`,
}
}]
],
presets: [
...
],
}
},
That way, if I do import Screen from '/imports/components/screens' it will resolve the file under ./imports/components/screens
You can set the alias in .babelrc too but you might want to use regex instead.
I want to setup tern-vim in my project and followed this link https://github.com/ternjs/tern_for_vim/blob/master/doc/tern.txt.
After installation, I created a .tern-project file under the root directory of my project as below.
{
"libs": [
"browser",
"jquery"
],
"loadEagerly": [
"importantfile.js"
],
"plugins": {
"requirejs": {
"baseURL": "./",
"paths": {}
}
}
}
When I open a js file by vim command, I can't use any tern command as below:
|:TernDoc|...................... Look up Documentation
|:TernDocBrowse|................ Browse the Documentation
|:TernType|..................... Perform a type look up
|:TernDef|...................... Look up definition
|:TernDefPreview|............... Look up definition in preview
|:TernDefSplit|................. Look up definition in new split
|:TernDefTab|................... Look up definition in new tab
|:TernRefs|..................... Look up references
|:TernRename|................... Rename identifier
I will get Not an editor command error. Do I need to do any other configuration?
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.