I'm facing a conflict with importing and auto imports with VS Code.
This is my jsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "src",
"moduleResolution": "node",
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
But when I do auto import, something like this is generated:
import AuthContainer from "app/containers/AuthContainer/AuthContainer.vue";
This works well, when I hit ctr + click on the component it brings me to that component.
But I get an error from webpack:
https://gyazo.com/2b49123cdfefe268bdf1415eefa36496
When I do this:
import AuthContainer from "#/app/containers/AuthContainer/AuthContainer.vue";
The import works properly, but when I do ctr + click, it does not bring me to the component but the error is no longer there.
Any idea what is happening?
Related
I'm trying to get module path aliases clickable in vscode
// Ctrl+click Working fine
import Layout from "src/components/layout/Layout";
// Not working
import SEO from "#components/SEO";
My JSconfig.json file
{
"compilerOptions": {
"jsx": "react",
"baseUrl": ".",
"paths": {
"#components/*": ["/src/components/*"],
"#sections/*": ["/src/sections/*"],
"#assets/*": ["/src/assets/*"]
}
}
}
I have tried everything without success
Here is the solution
{
"compilerOptions": {
"jsx": "react",
"baseUrl": "./",
"paths": {
"#components/*": ["./src/components/*"],
"#sections/*": ["./src/sections/*"],
"#assets/*": ["./src/assets/*"]
}
}
}
Had same issue with 'Go to definition'. And on the end I found it was not working for me because I had both tsconfig.json and jsconfig.json in the project.
Seems when tsconfig.json is present, alias setting from jsconfig.json are ignored.
As I want gradually convert stuff into Typescript, but have lot of .js files I kept tsconfig.json, and added "**/*.js" to the "include" list, so it sees also .js files. Now aliases in vscode are clickable.
tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/components/*": [
"components/*"
]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"**/*.js"
]
}
I have a tsconfig file like this
{
"include": ["tests/**/*.ts"],
"exclude": [],
"compilerOptions": {
"composite": true,
"lib": [],
"skipLibCheck": true,
"outDir": "lib",
"types": ["vitest/globals"]
}
}
as I have defined types for vitest/globals so yarn vitest cmd is working fine and executing the tests cases as well. But in the VS Code its showing me error
How I can fix/silent it in vs-code?
I had to add the following to my .eslintrc.json file to fix this issue in a test setup module:
"globals": {
"vi": true
},
However if you're using TypeScript, you should also add this to your compilerOptions in your tsconfig.json:
"types": ["vitest/globals"]
edit: you already had this in your tsconfig.json but I'll leave it in here anyway in case it helps someone
In my react project when I use in:
//package.json
"name": "app"
then intellisense is not working for absolute path imports
//SomeComponent.js
import {StorageKeys} from 'app/Constants' // inellisense don't work
import {StorageKeys} from '../../Constants' // intellisense works
Tried some suggestions regarding "jsconfig.json" and setting compiler's base url but with no success.
Any Idea?
{
"compilerOptions": {
"target": "ES6",
"baseUrl": "./",
"paths" : {
"app/*" : ["./*"]
}
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
Running Visual Studio Code 1.52.1.
I created a simple VS Code extension as described in this tutorial. Then I added a dependency as shown below. The problem is that this dependency does not seem to get deployed when debugging.
package.json
"dependencies": {
"#types/markdown-table": "^2.0.0"
}
And the actual import looks like this:
import * as table from 'markdown-table'
Then I hit F5 just as described in the linked tutorial. When my registered command is run, I get the following error message:
Activating extension 'undefined_publisher.hello-world' failed: Cannot
find module 'markdown-table'
For completeness, here is the generated tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"outDir": "out",
"lib": [
"es6"
],
"sourceMap": true,
"rootDir": "src",
"strict": true
},
"exclude": [
"node_modules",
".vscode-test"
]
}
Should be able to add a preLaunchTask.
For Example in .vscode/launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
"preLaunchTask": "npm: build"
}
]
}
how to exclude jest globals in intellisense from src/**/* ?
I want jest types to be seen only in test/**.spec.js files
current configuration:
{
"compilerOptions": {
"target": "es5",
"module": "commonJS",
"baseUrl": "./src",
},
"exclude": ["node_modules"],
"include": ["src/**/*", "typings/index.d.ts"],
"typeAcquisition": {
"exclude": [
"jest"
]
}
}
after that i still see jest types in intellisense