I have started to use Atom to work react-native.When I open index.js from Atom.I am getting error such as "definition for rule 'react/require-extension' was not found" top of the code line.I think ,ıt couldn't import #format .
I don't know exactly. I am newbie at react.Any experience about this trouble or any advise ?
enter image description here
enter image description here
If you are using eslint for your ReactNative project then edit your .eslintrc file and add this snip of code
"rules": {
"react/require-extension": "off" }
Now .eslintrc file should look like this.
{
"extends": "rallycoding",
"rules": {
"react/require-extension": "off"
}
}
Related
So I have a react native project, and in that project many of my urls start looking like this: import Component from '../../component/file';
So after this problem I saw this video by fireshipio with says I can shorten it by adding a jscofig.json file but it did not work when I wrote import Component from '../../component/file';
it just told me it could not find the path please tell me what I am supposed to do to make this working because if its possible my links will become so much shorter and smarter. Remember the programming rule do not repeat yourself so please help me follow that.
link to fireshipio vid: https://www.youtube.com/watch?v=WpgZKBtW_t8
You should Modify/Add your desired common path in babel.config.js file and then you can easily import any file/class without adding long paths
Here is an example of babel.config.js from one of my project.
module.exports = api => {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'#babel/plugin-proposal-optional-chaining',
'#babel/plugin-proposal-nullish-coalescing-operator',
[
'module-resolver',
{
root: ['./src'],
alias: {
'#routes': ['./src/routes.js'],
'#navigations': ['./src/navigations'],
'#components': ['./src/components'],
'#store': ['./src/store'],
'#images': ['./src/images'], //You can add your source path like this
'#utils': ['./src/utils'],
},
},
],
],
};
};
After adding the source path in babel.config.js you can import the files like this in your class.
import SampleImage from '#images/sampleImage.png'
You can import like this in your any class, No need to do '../../src/image/sampleImage.png'
I need to change the status of useTaobaoRegistry to false but I don't know how.
{
"useTaobaoRegistry": true,
"presets": {
"default": {
"useConfigFiles": false,
"plugins": {
"#vue/cli-plugin-babel": {},
"#vue/cli-plugin-pwa": {},
"#vue/cli-plugin-router": {
"historyMode": true
},
"#vue/cli-plugin-vuex": {},
"#vue/cli-plugin-eslint": {
"config": "standard",
"lintOn": [
"save"
]
},
"#vue/cli-plugin-unit-jest": {}
},
"cssPreprocessor": "dart-sass"
}
}
}
I tried doing vue config -e but it only showed :
Could not open .vuerc in the editor.
Unable to open '/home/prabin/.vuerc' null
Try setting the EDITOR env variable. More info: https://github.com/yyx990803/launch-editor
I visited the site but I understood nothing.
Any help would be nice !
I guess you have had your answer till now, but there is no concrete answer answer anywhere, specially for windows user. So, it will be helpful for future stackflowers.
Problem
You are getting the problem because there is no Default App to open such type of file extension. For example, we have Chrome, Firefox, IE for .HTML file extensions but the .vuerc file extension is not associated with any default app.
Solution
To make this work, first of all, you need to locate the file which is in your default user directory.
In windows C:\Users\{Username-Path}. Scroll down below, you will see .vuerc file. Double click on it and set you editor as Default App to open and open it.
After that, when you run, vue config --edit in terminal, the file will be opened in your predefined Editor. From there, you can make your desired changes.
Please try to change this "useTaobaoRegistry": false in ~/.vuerc file.
Right clic on the .vuerc file and choose : Open with > an "in-the-list" editor
Hope this will help you ;)
I am using Visual Studio Code with a React Native project. ESLint is used to check the stuff specified in the .prettierrc.js.
When something isn't correct I get a hint like this:
Instead of getting these notifications and right clicking on them, selecting Fix this prettier/prettier problem, I want the problems to be fixed either automatically or using a shortcut combination. How can I configure that? I am currently using pure JavaScript, no Typescript.
Edit/create .vscode/settings.json so it will contain
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Fixes issues on save.
Thanks for #jonrsharpe! Just want to add my few cents.
Go to settings.json file:
Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json
Add there:
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
Restart VSCode
Enjoy coding!))
UPDATE
While on Mac the solution above worked for me, on Windows to make it works I had to add following to settings.json :
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll": true
},
"eslint.autoFixOnSave": true
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 trying to install fonts with
react-native link ./assets/fonts/ and with react-native link
both are giving the same error:
"error Failed to get dependency config."
I updated my package.json
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
Please help
I have made sure the path to the font folder is correct and still same problem
re-install and re-link solves the problem in my case
What version of your react-native?
If it is> 0.60, it is recommended to create the react-native.config.js file with the configurations below:
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: [
'./assets/fonts/',
],
};
Link without specifying the package name and it should work
react-native link