Using a Vite app I can include this in my vite.config.js:
resolve: {
alias: {
"#": path.resolve(__dirname, "./src"),
},
},
which allows me to use the '#' symbol (at character) for path names. This lets me have imports that look like this:
import Home from "#/pages/Home.vue";
As opposed to this:
import Home from "../../../pages/Home.vue";
The problem is that intellisense won't show up in any meaningful way when using the '#' path but it will when I use the '..' path. How do I enable path intellisense starting with '#'
Pictures to clarify what I mean by "intellisense won't show up in any meaningful way when using the '#' path":
Using '..' path
Using '#' path
You also need to tell vscode with jsconfig.json or tsconfig.json file, for example:
{
"compilerOptions": {
"baseUrl": ".",
"target": "es6",
"paths": {
"#/*": ["./src/*"],
}
}
}
You must add jsconfig.json file in root your project with paths parameter value:
"paths": {
"#/*": [
"./src/*"
]
},
jsconfig.json
structure of project
Related
I'm working on a React project in vscode. I noticed a few days ago that any of my imports that point to a directory with an index.js/jsx file in them cannot be resolved by cmd+clicking on the import or the function name.
I get an error in the bottom right "Unable to open : File is a directory"
I have the following in my jsconfig.json file:
{
"compilerOptions": {
"allowSyntheticDefaultImports": false,
"target": "es2017",
"jsx": "preserve",
"baseUrl": ".",
"paths": {
"#/*": [
"src/*"
]
}
},
"exclude": [
"node_modules",
"**/node_modules",
"dist"
]
}
I've tried:
Removing the jsconfig entirely
Various combinations of module import/export patterns
Various combinations of paths/baseUrl/other options in the jsconfig file
Disabling all extensions
Nothing seems to work. The only way I get cmd+click to work is if I point my imports directly at the component itself, or directly at the index.js file.
Does anyone have any insights, please? Googling hasn't shone much light on anything. It's not the end of the world as I cmd+t to most things but it sure is annoying. FWIW Webstorm handles the imports without any issues. Cheers.
EDIT: I forgot to mention. For added spiciness, the cmd+click works for a few seconds while vscode loads. Then "something" happens and it starts throwing the error. Other projects seem to be ok.
I think I may have solved it by adding a tsconfig.json to the project root with the same paths etc. I can now reliably click on import and see function definitions on hover.
If anyone has a similar problem, try the following:
{
"compilerOptions": {
"moduleResolution": "node",
"esModuleInterop": true,
"resolveJsonModule": true,
"baseUrl": ".",
"paths": {
"#/*": [
"src/*"
]
},
},
"include": [
"src/**/**.ts",
"tests/**/*.ts"
],
"exclude": [
"node_modules"
]
}
I have been using vscode prettier for few months now. I always used it to auto format my codes with vscode shortcut Shift + Alt + F or type >Format Document in command palette
But all of a sudden, vscode gave me this error this error msg: "invalid prettier configuration file detected. See log for details.". This happend after update vscode to v1.53
When I click on "show Log". It show me this:. (It is much much more longer of cause, but I think here is the most import part)
["ERROR" - 2:50:11 PM] Invalid prettier configuration file detected.
["ERROR" - 2:50:11 PM] Must use import to load ES Module: /home/koonfoon/git-repos/koonfoon/someRepo/.prettierrc.js
require() of ES modules is not supported.
require() of /home/koonfoon/git-repos/koonfoon/someRepo/.prettierrc.js from /home/koonfoon/.vscode-server/extensions/esbenp.prettier-vscode-5.9.1/node_modules/prettier/third-party.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename .prettierrc.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /home/koonfoon/git-repos/koonfoon/someRepo/package.json.
Inside my package.json has value "type": "module".
This is how my .prettierrc.js looks like:
// .prettierrc.js
module.exports = {
semi: true,
trailingComma: "all",
singleQuote: true,
printWidth: 120,
tabWidth: 4
};
.eslintrc.js:
// .eslintrc.js
module.exports = {
"env": {
"commonjs": true,
"es2021": true,
"node": true
},
"extends": [
//"eslint:recommended",
"plugin:#typescript-eslint/recommended",
"prettier/#typescript-eslint",
"plugin:prettier/recommended"
],
"parser": "#typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
}
};
Please note: it was working fine until vscode updated to v1.53
My repo is written in typescript.
I have no ideal what cause this error.
Please help.
Thank you.
I am trying to use babel module resolver plugin with eslint + create react app but I am unable to start the application, getting the error
internal/modules/cjs/loader.js:1237
throw err;
^
SyntaxError: C:\Users\enisr\Desktop\projects\pcPartPicker\jsconfig.json:
Unexpected token } in JSON at position 166
at parse (<anonymous>)
I have set up a git repo showcasing the problem https://github.com/sgoulas/pcPartPicker
I have read the instructions in the docs and in the original repository and I am unable to configure it correctly.
My configuration files are the following:
.babelrc
{
"plugins": [
["module-resolver", {
"extensions": [
".js",
".jsx",
".es",
".es6",
".mjs"
],
"root": ["./src"],
"alias": {
"#components": "./src/components"
}
}
]
]
}
jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["src/*"],
"#components/*": ["./src/components/*"],
}
}
}
webpack.config.dev.js
var path = require("path");
module.exports = {
include: path.appSrc,
loader: require.resolve("babel-loader"),
options: {
plugins: [
[
"module-resolver",
{
root: ["./src/App"],
alias: {
"#components": "./src/components",
},
},
],
],
cacheDirectory: true,
},
};
My component:
import { GPUtable, CPUtable } from "#components/Tables";
const App = () => {
return (
<>
<GPUtable />
<CPUtable />
</>
);
};
export default App;
There are some minor fixes you need to make (below), but the main issue is that Create React App does not expose the webpack config, you'll need to eject to edit that.
npm run eject
Merge the babel configs: delete the babel key + value at the bottom of the package.json, and paste the value into your bablrc ("presets": ["react-app"],).
Add import React from 'react'; to the top of App.js
Confirmed locally that the app will run.
Other suggested fixes
Your jsconfig has a trailing comma after the array value in #components/*. You need to remove it because JSON doesn’t support them.
You need to fix the include path in weback.config.dev.js. appSrc isn't something defined on the node path module. Try using path.resolve(__dirname, 'src') - the example in their docs is creating/importing a paths object with appSrc pointing to this value.
You're missing test: /\.(js|jsx|mjs)$/, in webpack.config.dev.js.
I'm not using path-intellisense, only the built in VSCode plugins.
When using Webpacks alias feature, VScode is reporting..
Unable to resolve path to module <Name of Alias>
Webpack alias setup is like..
alias: {
components: './client/javascripts/components/',
.....
and a jsconfig.json is setup like...
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"components/*": [
"./client/javascripts/components/*"
],
Are there any other configs / steps necessary to fix this?
It can be the problem in your file of webpack
try with this
resolve:{
alias:{
components: path.resolve(__dirname,'client/javascripts/components/')
},
},
I'm using alias on the webpack.config.js as:
const srcDir = join(__dirname, '..', 'src');
const webpackConfig = {
resolve: {
alias: {
"constants": `${srcDir}/constants",
And I have configured it on the jsconfig.json as:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"constants/*": ["./src/constants/*"],
My imports are in the format:
import CONSTANT from 'constants/constant';
It works for babel/webpack transpilation, but no for VSCode IntelliSense autocompletion.
I tried to play with the baseUrl and the paths, but no luck so far.