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
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 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 have a React template that I downloaded and I'm attempting to move part of its assets, components, containers, etc. over to my project (Visual Studio 2019 React Application) to make it look like the template. I thought this would be a better learning exercise than just modifying the template (the template is pretty big too and I don't want my project to be populated with too many unused content).
So I have this script (src/reducers/Settings.js) in my project (same location as in the template) which refers to another file as such:
import {
CHANGE_DIRECTION,
CHANGE_NAVIGATION_STYLE,
DARK_THEME,
DRAWER_TYPE,
FIXED_DRAWER,
HORIZONTAL_MENU_POSITION,
INSIDE_THE_HEADER,
SWITCH_LANGUAGE
} from 'constants/ActionTypes';
I do have a ActionTypes.js file in src/constants.
But when I try to run the application, I get this error saying the application failed to compile
./src/reducers/Settings.js
Module not found: Can't resolve 'constants/ActionTypes' in
'C:\path\ClientApp\src\reducers'
But all of this is working fine in the template itself and I'm pretty sure the physical file/folders structure is the same.
If I change the import statement to import from /constants/ActionTypes it works but there's a lot of these scripts that will come from the template and I certainly don't want to have to go through modifying them all.
Is there a config in my app that would allow resolution to work properly without modifying the template's import statements?
Turns out I missed a file to transfer over from the working template project.
jsconfig.json had this which made absolute paths work
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"#/*":["src/*"]
}
}
}
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 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'