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/*"
]
}
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'm using styled components (via Emotion) and I've found vscode-styled-components plugin to provide appropriate syntax highlighting in vscode. It works very well.
Out of the box, it requires one of 4 tags to be used with the a template literal to recognize the block as a css-string: "styled", "css", "injectGlobal" or "createGlobalStyle".
I would like to use my own custom tag rather than any of these 4.
The plugin doc points to its dependency for configuration info: typescript-styled-components. It shows how to configure the use of additional tags via typescrips's compilerOptions. My react project is not built with typescript, so this is not an option for me.
Question: is there any way to configure the use of tags in a non-typescript project?
Just use a jsconfig.json file instead of tsconfig.json. At the root of your project, create a jsconfig.json file with the contents:
{
"compilerOptions": {
"target": "es6",
"plugins": [
{
"name": "typescript-styled-plugin",
"tags": [
"styled",
"css",
"sty"
]
}
]
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
jsconfigs define settings for javascript projects
Also note that the tag options currently do not effect syntax highlighting, only intellisense
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
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
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"
}
}