I'm using VSCode to develop an app with VueJs, but intellisense is broken and not working if I imported modules like this:
import myModule from '#/path/to/myModule.js'
But when I import it like this the intellisense will work:
import myModule from './path/to/myModule.js'
This happens in *.js file or *.vue file.
What is the reason and is there a fix for it?
You must use paths in a jsconfig.json to let VS Code's tooling know how to resolve that style of paths.
At the root of your project, try creating a jsconfig.json with the contents:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*": [ "root/path/to/src/*" ]
}
},
"exclude": [
"node_modules"
]
}
You can configure #/ to resolve to whatever subdirectory you want in your workspace. Use: "#/*": [ "./*" ] to resolve it to root of your workspace
Related
I noticed, if I define a c_cpp_properties.json for the "C/C++" plugin in my user config folder "~/.vscode" instead of the project config folder, the file is not parsed. My aim is to define some global include directories, which are used in all projects. I haven't found a clear answer whether and how this is possible (or not).
{
"configurations": [
{
"includePath": [
"/foo/*"
]
}
]
}
When writing a javascript app, it's possible to create an .env file in the root directory containing just e.g:
NODE_PATH=src/
Which sets up allowing for absolute paths e.g: in import statements in code.
e.g: I can be working on the file /src/actions/index.js and enter:
import { SAVE_COMMENT } from "actions/types";
..and the import works, but there is no auto-complete and I wonder: Is it possible to auto-complete after I type just:
import { SAVE_COMMENT } from "actions/
?
Relative-path lookup continues to work great. In fact, the relative path lookup is one of my favorite features of vs-code and one of the reasons I use it, so it would be very nice for it to work when absolute paths are configured, too.
VS Code does not support using NODE_PATH for intellisense. To achieve what you want, create a jsconfig.json file at the root of your project with the contents:
{
"compilerOptions": {
"target": "ES6",
"baseUrl": "./src"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
The important setting is baseUrl. It tells VS Code to resolve non-relative paths relative to the ./src folder
After configuring jsconfig and baseUrl, you can also set "javascript.preferences.importModuleSpecifier": "non-relative" in VS Code to specify that VS Code should always try to use paths to use the baseUrl
Here is a nice guide for Vue.js and Nuxt.js projects configuration in VS Code
this is the solution that worked for me
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"core/*": ["./src/*"],
}
}
}
I am using webpack and absolute paths
Has anyone been able to get goto def work in a Javascript project that uses root require?
I have a project that uses a global root require wrapper to get around having to use relative path imports, but VSCode doesn't play well with this. For reference, WebStorm is able to follow the dependency, but VSCode cannot, so I hope I can just update a setting somewhere to enable this. The wrapper is a follows:
global.rootRequire = function(name) {
return require(__dirname + '/' + name);
}
No, as of VS Code 1.19 we do not support rootRequire.
To configure VS Code to understand relative import paths, try setting up a jsconfig.json and configure "module": "system":
{
"compilerOptions": {
"target": "ES6",
"module": "system"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
I am working with es6 syntax in Visual Studio Code and when I import ordinary file, then I can click F12 (Go to definition) and it works just fine. The problem is that with components (import from .jsx files) it does not work at all (nothing happens when you click go to definition). Has anyone an idea how it can be fixed?
P.S. I have jsconfig.json like that to allow proper go to definition for ordinary .js files:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules"
]
}
Although you can track down the solution from github issues mentioned in one of the comments, I wanted to make it easier for SO users. Quote from the Github issues page:
easy workaround is to add the compilerOption "jsx": "preserve" (or
"jsx": "react" or "jsx": "react-native")
jsconfig.json:
{
"compilerOptions": {
"jsx": "react"
}
}
I am creating a react-app using the create-react-app tool so it uses webpack for module bundling. Having the following directory structure
-my-app
--node_modules
--src
---components
----somecomponent
-----SomeComponent.jsx
----someothercomponent
-----SomeOtherComponent.jsx
----main.js
----public
To avoid many ../../ (dot dot slashes for the relative path) I have set a NODE_PATH=./src as shown below in my package.json
"scripts": {
"start": "NODE_PATH=./src react-scripts start",
"build": "NODE_PATH=./src react-scripts build",
}
So I can now import my modules in my like this
import SomeComponent from "/components/somecomponent/SomeComponent"
So even changing the directory structure will not break my code as often. But with this my VSCode doensn't recognise paths and thus doesn't show the intellisense, how do I fix it?
I work on JS and TS support for VSCode. For this use case, I think you have a few options:
Create a jsconfig.json in the root of your project and use baseUrl:
{
"compilerOptions": {
"baseUrl": "./src"
}
}
This should allow for imports such as:
import SomeComponent from "components/somecomponent/SomeComponent"
Alternately, use the paths property:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"~/*": ["./src/*"]
}
}
}
this would allow imports of the form:
import SomeComponent from "~/components/somecomponent/SomeComponent"
You can find more details about these configuration options here