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'
Related
When I am doing import of different files I have to be very careful on the folder nesting where do I call the imports.
I know that it is possible to set a generic variable path to import files directly pointing at the route of my SRC folder, but I never done it and I am just unable to find the information on the web about it on how to configure it (every search come around react-router which is not what I need). Could someone explain me how to make it happen:
import dataJSON from "../../data/data.json";
import IconPath from "../../assets/svg/icons.svg";
become something approximate like
import dataJSON from "{myRoute}/data/data.json";
import IconPath from "{myRoute}/assets/svg/icons.svg";
so that I don't have to worry all the time to think about nest depth when I code and organise my components in folders.
Thank you!
For Javascript :
Create a jsconfig.json file in the root of your project with the following content:
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
For Typescript:
You already have tsconfig.json file in the root of project. Just need to add baseurl setting in compile options key.
{
...//other ts config
"compilerOptions": {
..., // other complie options
"baseUrl": "src"
},
...//other ts config
}
Here baseUrl is what we're adding into compileoptions.
after adding this file and configuration you can import files as following.
Before:
import Component1 from '../../../../Components/Component1'
After:
import Component1 from 'Components/Component1'
Anything you import will be absolute imports from src folder.
Hope this is what you're looking for.
Alternatively, you can let your IDE do the work for you (importing and moving files around). The gif below is WebStorm, I believe MS Code does it too.
You can use babel-plugin-module-resolver.
This plugin can simplify the require/import paths in your project. For example, instead of using complex relative paths like import dataJSON from "../../data/data.json";, you can write import dataJSON from "data/data.json";. It will allow you to work faster since you won't need to calculate how many levels of the directory you have to go up before accessing the file.
Install the plugin
npm install --save-dev babel-plugin-module-resolver
or
yarn add --dev babel-plugin-module-resolver
Create a jsconfig.json file and use the code.
{
"compilerOptions": {
"baseUrl": "src"
},
"include": [
"src"
]
}
That's it.
So I have a typescript project (.tsx) this is actually a SharePoint Framework project (SPFx) but decided to post it here since this involves typescript in general.
My main file is a .tsx, and I have a component that is created in .JS (.js file extension). I want to import this component to my project, however, I am faced with an issue
Module parse failed: Unexpected token (30:4)
File was processed with these loaders:
./node_modules/source-map-loader/index.js
You may need an additional loader to handle the result of these loaders.
How can I import or use a .js component in my .tsx react project without converting the .js to tsx?
based on the error, it seems I need additional loaders, what should I do? thank you!
Here's my tsconfig
Update your tsconfig.json file with
...
"compilerOptions": {
"allowJs": true
...
so you basically add a allowJs property to compilerOptions object in your tsconfig.json file.
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 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