VS Code, React project, intellisense when using absolute import paths - visual-studio-code

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/*"
]
}

Related

Using relative imports in vs code

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?

Nex.js Module path aliases not clickable in vscode

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"
]
}

VS Code showing eslint error but vitest is working. 'vi' is not defined

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

VSCode intellisense jsconfig.json exclude jest types for src folder

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

VSCode Intellisense does not work with webpack + alias

I have a project using babel alias:
resolve: {
alias: {
vue: 'vue/dist/vue.js',
'#cmp': resolve('src/components'),
'#service': resolve('src/services'),
'#scss': resolve('src/assets/styles'),
}
}
and a component with:
import someService from '#service/some'
And the Intellisense does not work.
with:
import someService from '../../../../service/some'
It does.
Any suggestions?

Try creating a jsconfig.json and configuring the paths compiler options
{
"compilerOptions": {
"baseUrl": ".",
"module": "commonjs",
"paths": {
"#cmp/*": ["./src/components/*"]
}
}
}
You can find more information about paths and other compiler options here

This worked for me, as suggested here (I wanted #/ to resolve to ./src/):
{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"#/*": ["src/*"],
}
},
"exclude": ["node_modules", "dist"]
}
Minimal version, but I'd leave exclude too:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#/*": ["src/*"]
}
},
}

Just to add to Matt's answer, in a TypeScript project you don't need to create a jsconfig.json file, you can simply add it to your tsconfig.json file and vscode picks it up.
{
"compilerOptions": {
...
"paths": {
"#MyAlias/*": ["./myDirectrory/*"]
}
}
}

For those who want to get IntelliSense working for resolving directly from src like with your webpack config.
Ie.
import Requests from 'utils/requests';
and that file lives at src/utils/requests.js
...
# jsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"module": "commonjs",
"target": "es6",
"paths": {
"*": ["src/*"]
}
}
}
# webpack.config.js
resolve: {
symlinks: false,
modules: [
path.resolve('./src'),
'node_modules',
],
},