I have a JavaScript project opened in VS Code. There is nothing fancy there, all *.jsx? are in src folder, files bundled by webpack are stored in dist, there are couple of dependencies described in package.json and installed in node_modules.
Let's say I have two files somewhere in src folder: A.jsx with React component A and B.jsx with React component B which is using component A. When I open my project in VS Code, go to A.jsx and ask code to Find All References of A it's showing only one reference in file A.jsx (with PropTypes declaration). For VS Code to be able to show reference in B.jsx I need to open B.jsx, then go back to A.jsx and only then both references will be shown...
The same scenario works correctly when files are named A.js and B.js, the problem seems to be with *.jsx extenstion.
What I'd like to have is a way to find all references in whole project without a need to open all files no matter if the file is save as .jsx or .js. Is there a way to achieve this?
I've already tried jsconfig.json with
{
"include": ["src/**/*", "src/**/*.jsx"]
}
and
"files.associations": {
"*.jsx": "javascriptreact"
},
in my settings.json
Ok, I finally googled the solution. In order to load .jsx files into the project, VS Code needs jsconfig.json with such content:
{
"compilerOptions": {
"jsx": "react"
}
}
Here is the answer in their repo: https://github.com/microsoft/vscode/issues/100251#issuecomment-646239840
Related
I've spent hours trying to get my plain JS project in VS code to be able to use intellisense. It only works when I have multiple files open at once, otherwise intellisense cannot find the associated classes. I am using a jsconfig.json file in /src but I cannot get any of it to do anything at all, no matter what properties I have tried. My project structure is
/project
/src
/app
app.js
/views
/home
home.js
/about
about.js
I really want app.js to be able to see classes in those view folders (plus all the other folders in src). ie
class App {
somefunction(){
HomeView.dosomething(); // want to be able to ctrl click to HomeView and dosomething()
}
}
I'm not sure what changed, maybe VSCode needed 20 minutes to figure things out, but eventually this simple jsconfig.js file did the trick, placed in /src
{
"compilerOptions": {
"target": "es6"
}
}
I'm using create-react-app to test a monorepo that i'm creating. Inside the monorepo I have some index.d.ts files to declare my packages however I do not wish to start using .ts files and would prefer to stick to .js files.
I am using the create-react-app as a means to test my packages before publishing them as well as ensuring that the Typescript declaration files are working correctly.
Within my create-react-app I am forced to use //#ts-check at the top of the App.js file before Typescript starts to check my work.
]2
I would like the ability to enable a //#ts-check globally for my create-react-app's as I plan on using it on all my future and passed projects and adding the //#ts-check at top of every .js file sounds extremely tedious.
I have tried using a tsconfig.json as shown in this answer however it did not work.
This picture below is showing the same App.js file without the //#ts-check and with tsconfig.json and as you can see it is no longer checking my file.
I'm fairly new to Typescript so could somebody please explain to me how I could enable //#ts-check globally on my create-react-app projects.
Thanks in advance!
Add a file at the root of your project with the filename:
jsconfig.json
Add the following to the contents of that file:
{
compilerOptions: {
"checkJs": true,
"jsx: "react"
}
}
Reference
I have a javascript project and find that new vs code feature "Update import paths when a file is moved or renamed" does not work for me. I have tried both: import and require statements. And for both options vs code does nothing about changing path after move or rename.
OS: Ubuntu 16.04
Visual Studio Code version 1.25.0
VS Code user settings:
{
"javascript.updateImportsOnFileMove.enabled": "always"
}
Have an empty jsconfig.json file in the project folder.
So, you need to have a jsconfig.json file in the root path, to make sure all paths work.
I tried to recreate your problem with the current version of Visual Studio Code (1.44) but I did not stumble on any problems: In File/Preferences/Settings I set the prompt-option for updating imports see image:
Then I created an "app"-folder with the following files see image:
app/appLogic.js
import GLOBAL_VARS from './GLOBAL_VARS/GLOBAL_VARS.js'
console.debug(GLOBAL_VARS.laugh())
app/package.json
{
"type":"module"
}
app/GLOBAL_VARS/GLOBAL_VARS.js
var LAUGH = "haha"
export default {
laugh(){
return LAUGH
}
}
I then moved the JS file "GLOBAL_VARS.js" to a different folder and VS Code suggested automatic imports update with a prompt, just as set in the preferences before see image:
Make sure you opened the right folder in VScode - eg if your project structure is like below -
project
/node_modules
/src
--A.js
--B.js
/build
/config
package.json
jsconfig.json
You open folder project in VScode and not 'src' folder.For some reasons VSCode is unable to detect import changes if you do not open the complete project folder in explorer.
I am using VSCode with Javascript/Meteor, and this is the basics of my folder structure.
definition_doesnt_work.js
-client
-models
definition_doesnt_work.js
-server
emails
emailfile.js
definition_works.js
test
definition_works.js
I have some code in emailfile.js that makes use of a javascript class. If I define the class in either of the definition_works.js files, VSCode intellisense recognizes the class and provides intellisense. However, if I put the class definition in the either of the definition_doesnt_work.js files, the definition doesn't work. So it seems like in order for vscode to recognize a class definition, it has to be in the same root folder as another item. Is there a way I can make it read from definitions in other folders. Here is my jsconfig.json file:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
Just posting comment as the answer
In this case, it seems the files were part of two different jsconfig.json projects which is why the definition was not being picked up.
You can easily check which jsconfig a file belongs to by running the JavaScript: Go to Project Configuration command in VS Code
I have added a jsconfig.json in the root of my javascript project to try and exclude some build files as well as set some path mappings but nothing seems to happen. Part of the problem is that I'm not sure what the expected outcome is when using a jsconfig.json, I've read the documentation for it but it does not demonstrate any of the results.
Can someone provide me with a small and working jsconfig.json with a description of what it actually does? So that I can use it to verify that it actually works in my project as well.
Or, does someone know of a way to verify that a jsconfig.json is working/picked up by VS Code?
In my project i was using jsconfig.json file for accesss the file imports directly from the ./src directory from wherever i am trying to import.
My jsconfig.json looks like:
{
"compilerOptions": {
"baseUrl": "./src"
},
"include": [
"src"
]
}
include:
If no include attribute is present, then this defaults to including all files in the containing directory and subdirectories. When a include attribute is specified, only those files are included
baseUrl:
This gives the base directory for the file import path
this is my project structure where i have used jsconfig.json
so if i need to import a function from src/util/auth_util.js inside src/component/Login/index.js
inside src/component/Login/index.js
src/component/Login/index.js :
import { userLogin } from 'util/auth_util.js'
import statement if jsconfig.json as mentioned above not used
src/component/Login/index.js :
import { userLogin } from '../../util/auth_util.js'