I've set up import aliases in my Expo project. It's compiling fine however VS Code doenst recognise the import:
In tsconfig.json
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react-native",
"lib": ["dom", "esnext"],
"moduleResolution": "node",
"noEmit": true,
"skipLibCheck": true,
"resolveJsonModule": true,
"baseUrl": "./",
"paths": {
"home": ["./"]
}
}
}
In babel.config.js
module.exports = function(api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module-resolver",
{
alias: {
home: "./"
}
}
]
]
};
};
The import in the file works: import Thing from "home/src/thing";
I thought this would make VS Code aware of the alias but it appears not to do anything
In jsconfig.json:
{
"compilerOptions": {
"target": "es2017",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"home/*": ["./*"]
}
},
"exclude": ["node_modules", "dist"]
}
Related
I am using eslint extension in vscode and it is always showing me the parser error which says that it cannot read tsconfig.json but when I run in the bash the command "eslint --ext .ts ." then it does not show there is any problem but only in the vscode eslint extension it's showing that problem.
Also, I noticed that it is not complaining about missing semicolons.
tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"resolveJsonModule": true,
"outDir": "./build/",
"esModuleInterop": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true
}
}
.eslintrc
{
"extends": [
"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"plugin:#typescript-eslint/recommended-requiring-type-checking"
],
"plugins": [
"#typescript-eslint"
],
"env": {
"browser": true,
"es6": true,
"node": true
},
"rules": {
"#typescript-eslint/semi": [
"error"
],
"#typescript-eslint/explicit-function-return-type": "off",
"#typescript-eslint/explicit-module-boundary-types": "off",
"#typescript-eslint/restrict-template-expressions": "off",
"#typescript-eslint/restrict-plus-operands": "off",
"#typescript-eslint/no-unsafe-member-access": "off",
"#typescript-eslint/no-unused-vars": [
"error",
{
"argsIgnorePattern": "^_"
}
],
"no-case-declarations": "off"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"project": "./tsconfig.json"
}
}
after switching to vscode 1.68.1
every time on saving the file its automatically removing the React from the import
at first i though this could be an eslint issue as i am using eslint for formatting but after removing eslint plugin issue remains the same
here is my settings.json
{
"eslint.alwaysShowStatus": true,
"editor.formatOnSave": true,
"files.eol": "\r\n",
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.organizeImports": true
},
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"prettier.arrowParens": "avoid",
"prettier.embeddedLanguageFormatting": "off",
"prettier.enable": false,
"eslint.format.enable": false,
"[css]": {
"editor.defaultFormatter": "aeschli.vscode-css-formatter"
},
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}
and here is the .eslintrc
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": "airbnb",
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react", "react-hooks"
],
"rules": {
"linebreak-style": ["error", "windows"],
"react/forbid-prop-types": 0,
"react/prop-types": 0,
"max-len": ["error", { "code": 220 }]
},
"settings": {
"import/resolver": {
"node": {
"moduleDirectory": ["node_modules", "src/"]
}
}
}
};
Try adding these rules in eslintrc:
{
"rules": {
"react/jsx-uses-react": 0,
"react/react-in-jsx-scope": 0
}
}
OR
Try adding "jsx": "react" to your jsconfig:
{
"compilerOptions": {
"baseUrl": ".",
"jsx": "react",
"paths": {
"*": ["*", "src/*"]
}
}
}
This helps VS-Code understand that React is implicitly referenced by the jsx elements in your file.
I had the same problem in multiple projects, after adding these rules, solves the problem for me.
VS Code expects that every project declares a tsconfig.json or jsconfig.json and if none is provided, it defaults it to
{
"compilerOptions": {
"jsx": "react"
}
}
This effectively means that if you have React imports in your code, they will be preserved.
To adopt the latest react 17+ standard with the _jsx transform, the environment type needs to be react-jsx.
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
{
// ...
"rules": {
// ...
"react/jsx-uses-react": "on",
"react/react-in-jsx-scope": "on"
}
}
Add these rules to your eslint config
add type on your tsx file, to prevent removed automatically by vscode
import React from 'react';
type _react = typeof React
.eslint
{
rules: {
'react/jsx-uses-react': 0, // ignore validation must include react scope in jsx/tsx
'react/react-in-jsx-scope': 0, // ignore validation must include react scope in jsx/tsx
'no-unused-vars': 'off', // disable default eslint unused variable
'#typescript-eslint/no-unused-vars': [ // ignore validation variable with prefix _
'warn',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
caughtErrorsIgnorePattern: '^_'
}
]
}
}
I also had the same problem, when removing the extensions I found it was vscode, downgrading to version 1.67.2 solved it
Try removing the "source.organizeImports": true line from your settings, or setting it to false.
I think VS Code thinks the React import is unnecessary because its only used implicitly (which can be a problem if your compiler requires an explicit import to bundle correctly).
I have a eslint config file .eslintrc.json (could be .eslintrc) like this:
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:#typescript-eslint/eslint-recommended",
"airbnb-typescript-prettier"
],
"plugins": [
"#typescript-eslint"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"overrides": [
{
"files": ["*.js", "*.jsx"],
"processor": "babel-eslint"
}
],
"rules": {
"react/prop-types": 0,
"semi": ["error", "never"]
}
}
and I got a persistent error
Error: ESLint configuration of processor in '.eslintrc.json#overrides[0]' is invalid: 'babel-eslint' was not found
Although official eslint site suggest this configuration, you need to use parser property in the overrides instead of processor such as the following:
...
"overrides": [
{
"files": ["*.js", "*.jsx"],
"parser": "babel-eslint"
}
],
...
With this change everything works pretty well.
My ts project in Visual Studio Code shows this path: ~/ and its suggestion to root of macos, as on screen shoot.
Whats goin on?
My tsconfig:
{
"compilerOptions": {
"target": "esnext",
"module": "commonjs",
"strict": true,
"jsx": "react",
"rootDir": "./",
"baseUrl": "./src",
"paths": {
"~*": ["./*"]
},
"incremental": true,
"esModuleInterop": true,
"experimentalDecorators": true,
"lib": ["dom", "es2015", "webworker"]
}
}
Okay, found it.
In tsconfig should be:
"paths": {
"~/*": ["./*"]
},
instead of
"paths": {
"~*": ["./*"]
},
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',
],
},