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"
}
}
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]
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 have a very simple 'jsconfig.json' to provide intellisense to my *.js and *.html (<script>) files.
The ES6 part from 'common.js' works ok, but the code inside "script1.js", "lib/lib1.js" are not recognized by the editor.
It seems that intellisense is not enabled for scripts inside html? Is there any way to check/resolve this?
Here is a copy of my jsconfig.json
{
"compilerOptions":
{
"target": "es6",
"module": "commonjs",
"experimentalDecorators" : true,
"allowSyntheticDefaultImports": true
},
"files": [ "script1.js", "lib/lib1.js" ],
"exclude": [ "node_modules" ]
}
External file intellisense in html script blocks is not supported in VSCode 1.14. We are tracking the feature request here: https://github.com/Microsoft/vscode/issues/26338
This is specific question about .js files. Not .ts files. With ts files i'm able to get it all working properly.
I made all the setup options for js files and it still doesn't work, if at all possible:
jsconfig.json in project root:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"removeComments": true,
"pretty": true,
"allowSyntheticDefaultImports": true // false doesn't change anything
},
"files": [
"typings/index.d.ts"
]
}
I also installed typings for node, and all express standard typings.
Yet, on my app.js file:
import * as express from "foo"
var app = exfprdess();
doesn't trigger any underlined error. How to get proper behavior ?
Visual Studio Code, by default, doesn't lint your code (meaning it doesn't check for errors).
Visual Studio Code can, however, lint your code, you'll just have to configure something like ESLint or JSLint.