VSCode intellisense jsconfig.json exclude jest types for src folder - visual-studio-code

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

Related

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

How to display ESLint issues when using #babel/cli

We're using #babel/cli to build a library. I've been trying to show eslint issues when using babel --watch ... but no issues are reported.
babel.config.json
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
]
}
.eslintrc
{
"env": {
"browser": true,
"node": true
},
"parser": "#babel/eslint-parser",
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
}
Is it possible to show eslint issues in #babel/cli's output?

Using a different .eslintrc config file for typescript and javascript in VSCode?

I have a project with both JS and TS files (and JSX/TSX). I have a separate .eslintrc.json file for JS vs. TS. I'd like to be able to tell VSCode which eslint config file to use depending on the file extension.
Tried putting the settings in settings.json under the [typescript] field but that didn't work.
I think it should be possible to use 1 file and overrides option:
.eslintrc.js
module.exports = {
"root": true,
"plugins": ["#typescript-eslint"],
"rules": {
// JavaScript rules
},
"overrides": [
{
"files": ["*.ts", "*.tsx"],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
},
"plugins": [
"#typescript-eslint"
],
"rules": {
// TypeScript rules
}
}
]
}
And changing workspace settings:
"eslint.validate": [
{
"language": "typescript",
"autoFix": true
},
{
"language": "typescriptreact",
"autoFix": true
}
]

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',
],
},

How to exclude node_modules from buildin VS Code CSS linter

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