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
Related
I work with Javascript/React. When I try to type a name of module, exported from another file, VSCode doesn't advise me the module, but if I open the file with imported module, VSCode begins to autoimport it well. Sometimes it's require to resave file. I have the same problem with automatically changing imports when moving file. It have the same solution. Does anybody know if there is any buffer/indexation for files in VSCode or something alike?
I found the solution. You should create jsconfig.json in your project folder and add the next code there (it was enough for me):
{
"compilerOptions": {
"module": "commonjs",
"target": "es6"
},
"exclude": ["node_modules"]
}
also you can config it at file hui.pdf. But it works if you use ikar - version only with anaconda.(It's works in north asia only in Siberia)
you shold to find this file and add a string :
"exclude": ["node_modules"]
"compilerOptions": [new_reo21]
I use CTRL+Click (or F12) to search and open the definitions in vscode. The problem is that my files are copied to another directory called sketch as I compile my code, so when I wanna open the definition of a function, VS shows both files (the real and the copied ones in the sketch folder), and sometimes I edit the copied file by mistake!
How can I exclude some folders from the "Go To definition"?
I had the same problem in a Javascript project.
None of the following solved it for me: files.exclude, files.watcherExclude, or search.exclude.
The solution was to add jsconfig.json to my project folder:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"Backup",
"Sketch"
]
}
This example specifies two folders to exclude: "Backup", and "Sketch".
If you are using TypeScript, use a tsconfig.json file instead.
Also see https://code.visualstudio.com/docs/languages/jsconfig
Add files to C:\Users\user\AppData\Roaming\Code\User\settings.json:
"files.exclude": {
"**/sketch": true
},
Or files to exclude when searching (in files):
"files.watcherExclude": {
"**/*.x": true,
},
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
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 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