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"
}
}
Related
My project structure is like this:
jsconfig.json
next.config.json
components
|_atoms
|_Button.jsx
|_Button.module.scss
|_...
|_...
...
and inside the jsconfig.json, I have this:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/components/*": ["components/*"]
}
},
"include": ["components/**/*", "api/**/*", "data/**/*", "pages/**/*", "utils/**/*"]
}
Next.js correctly imports the components and it's working, but on the developing side, autocomplete isn't working anymore!
for example, all of these import statements are working like a charm, but I manually wrote the path and autocomplete didn't help:
import Button from "components/atoms/Button"; //works
import Button from "#/components/atoms/Button"; //works
import Button from "../components/atoms/Button"; //works if the relative path is correct
import styles from "./Button.module.scss"; //works inside Button.jsx
So there's no problem with next js, but Path Intellisense isn't suggesting filenames anymore.
I renamed jsconfig.json to something else (to disable it) and this time, Path Intellisense works correctly, but next js can't import components.
How can I benefit from both? I want to have absolute imports and also use Path Intellisense.
If you just created a new jsconfig.json (or tsconfig.json) file, or made changes to it, you'll need to do the following to get it to work properly:
Restart server (for nextjs). Restart VSCode (for autocomplete).
That is,
Stop server
Restart VSCode
Start server
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
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 currently have little more than the shell of a Typescript & nodejs project repo in Visual Studio, and I can't figure out an import error. I have a top-level file, application.ts, that is erroring when trying to import a local folder, source, which has an index.ts file. My directory structure looks like this:
package.json
tsconfig.json
application.ts
source
index.ts
And, the error in appliation.js is Cannot find module './source'.
For the record, I also tried import { } from 'source', dropping the ./ but that also did not work. Am I missing something really obvious here?
EDIT: Adding contents of tsconfig.json and package.json for relevancy.
I think if you add "include": ["./**/*"] to your tsconfig.json it will solve the problem
Make it look something like this:
Keep what you have in compilerOptions and exclude but add include in between like this
"compilerOptions":{},
"include":["./**/*"],
"exclude":[]
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