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"
]
}
Related
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/*"
]
}
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
Despite clearly indicating in esignore that I want to ignore everything inside lib directory, vscode is saying 9 problems found in that minimized file.
If I run eslint inside foldera in command line everything is fine
using this extension
My directory structure:
foldera/
.eslintrc
.eslintignore
src/
file.js
lib/
wantoignore.min.js
folderb/
morefiles.js
.eslintrc
.eslintignore
.eslintrc file
{
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 2017,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"no-console": "off"
}
}
.eslintignore
lib/*
workspace settings:
"eslint.workingDirectories": [
"./client", "./server"
]
I solved this problem following the official doc here.
Basically you need to add the following content to the vscode workspace settings (usually located in your project's root/.vscode/settings.json), so that vscode knows which configs to honor when you're working on a specific script file:
{
"eslint.workingDirectories": [ "./reactApp" ],
}
I had a similar problem, figured out need to set workingDirectory to nested folder:
module
lib
src
index.ts
.eslintrc.js
.eslintignore
VSCode setting should be:
"eslint.workingDirectories": [ "./module/lib" ]
And not
"eslint.workingDirectories": [ "./module" ]
My solutions is:
Source map
root/.vscode/settings.json
Script
{
"eslint.workingDirectories": [{ "mode": "auto" }],
}
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',
],
},
VS Code reports CSS linter warning from files in node_modules. How can I disable checks in node_modules?
This is my jsconfig.json file (if it matters):
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
},
"exclude": [
"node_modules"
],
"include": [
]
}