When i'm writing my dependencies in my package.json it should have intellisense for the package i'm trying to put inside dependencies
ex:
"bootstr" => should show a list of sugestion with "bootstrap" in it...
I get a list with one item => "bootstr"
so it doesn't make any sense...
I've tried in all my other project and i'm getting this problem.
What is broken ?
There are a lot of potential causes of this problem. Here are a couple of issues that I have run into before:
1. VS Code Settings
What to check:
Go to settings.json (there will be at least two of these for you, one for your workspace and one for your user)
Open settings:
Ctrl+, (or File->Preferences->Settings)
Open settings.json:
Make sure to check all versions of the settings:
I think there are a few settings that can cause this, so you might want to search for settings with json, but the files.associations is one that can break intellisense for package.json:
"files.associations": {
"*.json": "javascript"
},
Fix:
Delete the *.json (or other json) entry
2. Malformed package.json
What to check:
Make sure npm can parse your package.json
Fix:
Make sure your package.json is properly formed (No missing comma, no extra brackets, no comments)
Related
I updated react-scripts in create-react-app and all the eslint warnings that used to display in the terminal when I run npm start have disappeared. I know I have code that used to throw warnings, but now I always get the same message no matter what:
Compiled successfully!
You can now view annotation in the browser.
Local: http://localhost:3000
On Your Network: http://10.0.0.110:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
I don't have any custom settings (that I know of) so I'm trying to find out how to get the warnings back.
if you are using create-react-app, the configuration of eslint will be in node_modules/eslint-config-react-app/index.js, so take a look how it is inside, usually that will override any .eslintignore or .eslint.jrc that you may have, so go in there and settup the rules that you want to abide.
There were no custom settings for eslint in my app to change or fix as suggested in the other answer. I ended up running create-react-app and copying the code from the original project to the new project. This brought back the warnings I was looking for.
Maybe your package.json is missing eslintConfig:
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
}
That’s what happened to me.
You can always access the ESLint output window by combining Ctrl+Alt+O. or you can simply click the taskbar at the bottom of the vscode, go to OUTPUT tab, and select ESLint from the dropdown provided.
I've just tried updating to create-react-app 4, and have a ton of typescript eslint warnings, particularly
Missing return type on function #typescript-eslint/explicit-module-boundary-types
Is there any way to override these in a .eslintrc.json file for runtime?
I've currently got overrides that work there for my project when I explicitly execute
npm run lint
But when I use npm run start I get a ton of lint warnings that I can't seem to control.
Is there any way to do this?
It turns out there is a way to override the .eslint rules.
Create a .env file in your root, if you don't have one.
Add the following to it as a new line: EXTEND_ESLINT=true
Extend the lint rules in your favorite way. I use .eslintrc.json but other mechanisms exist
Now with that in place, have a look at the included rules from react, which live in
node_modules\eslint-config-react-app\index.js and copy the rules you like into your rules section.
You may also want to pay careful attention to the overrides section, examples of which you can see in the above file, and if you have js in your project, you may want to remove the default parser,
parser: 'babel-eslint'
and then only override for typescript files.
I've tried for hours to set up ESLint using the Airbnb linter in Visual Studio Code. I ran the commands found here: https://www.npmjs.com/package/eslint-config-airbnb and set the peer dependencies to the correct versions, but still no luck. I always get this error:
Unexpected top-level property "“extends”". . Please see the 'ESLint'
output channel for details.
Does anyone know of a fix for this? I've read so many blogs and threads to no avail and am at the point where it seems like it's just more hassle than it's worth, though everyone says the Airbnb style guide is best for React.
Install the ESLint extension for VS Code. This will cause lint errors to show up inline, directly in the code editor (as opposed to just showing in the terminal when you use the command line).
Install eslint-config-airbnb and all of the dependencies (follow the instructions in the documentation). If you're using npm 5+, simply run this command in your terminal while inside of the project directory: npx install-peerdeps --dev eslint-config-airbnb.
Setup your ESLint configuration. You can add a basic config in your package.json file under the eslintConfig property, like so: "eslintConfig": { "extends": "airbnb" }
If you've done all of the above steps and are still getting the error you mentioned, see this thread, where a number of potential solutions are mentioned in the comments.
Specifically, in your case it sounds like your configuration is not getting read properly, for whatever reason. I would try adding it to your package.json as mentioned above to see if that solves it.
This is my babelrc file. installed module-resolver and declared root and aliases.
actually this do works!! but underline annoying me... please click images below I cannot post images cause I'm new here.
[https://i.stack.imgur.com/ZzN5O.png]
warning like this - module is not installed i think intelliJ recognize it as module..
[https://i.stack.imgur.com/GTcWx.png]
I changed my root "./" -> "./src" but it didn't work.
I also installed eslint but don't know about that well I think that won't help this problem
has anyone solved this kind of issue before?
IDEA provides no special support for babel-resolver; please follow WEB-28241 for updates.
The problem is that there are dozens of plugins defining their own ways to resolve modules, we can't afford providing special support for all them... You can try using webpack aliases instead, or try a workaround from https://youtrack.jetbrains.com/issue/WEB-22717#focus=streamItem-27-1558931-0-0:
create a file config.js (you can use a different name if you like) in your project root dir
define your aliases there using the following syntax:
System.config({
"paths": {
"components/*": "./src/components/*"
}
});
components here is the alias you have defined in .babelrc
Now you can use imports like
import MyComponent from 'components/core/MyComponent';
in your code
I'm putting together a streamlined development process with react and react-native that:
encourages packages,
uses babel to transform es6 to js (it compiles before publishing/installing),
has a playground that let's you play with both native and web components.
The web part of it is perfectly fine. It's the native one that's causing issues and it has to do with react-native's packager.
The bottom line is: if the package is either linked through npm link or required directly from the playground as in require('../../') react-native's dependency resolver will go forever trying to identify dependencies inside my package's node_modules, most times it never finishes doing it.
The temporary solution I've found is to install the package in playground but this involves re-installing it every time I do an update, which isn't great because you can't see your changes right away (even if it would be automated, it would take time).
I believe that a better solution would be to ask the dependency resolver to ignore those specific modules I don't need (those in devDependencies mainly!). I tried mangling react-native/packager/blacklist.js by adding paths to that list and even putting checks against the dependency resolver but none of that would work.
Can someone with more experience with the packager give me a hint as to how I'd go about making the dependency resolver pass? Alternatively, it would be great if the packager could be separated and the transform process left to choice but I don't know if that would be doable either.
I found out the following solution, based on the comment in default.config.js:
* If you need to override any of this functions do so by defining the file
* `rn-cli.config.js` on the root of your project with the functions you need
* to tweak.
Create a rn-cli.config.js in the root of your project with the following contents:
var blacklist = require('react-native/packager/blacklist');
var config = {
getBlacklistRE(platform) {
return blacklist([
/node_modules\/my-package\/excluded-dir\/.*/
]);
}
};
module.exports = config;
The second argument to the blacklist function is an additional list of blacklisted paths, which can be regular expressions. See react-native/packager/blacklist.js for more examples.