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"
]
}
Related
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
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'm using VS Code and Cucumber extension https://marketplace.visualstudio.com/items?itemName=alexkrechik.cucumberautocomplete&ssr=false#overview doesn't work.
This is my settings.json in .vscode folder:
{
"cucumberautocomplete.steps": [
"src/step_definitions/*.js",
],
"cucumberautocomplete.syncfeatures": "src/features/*feature",
"cucumberautocomplete.strictGherkinCompletion": true,
"cucumberautocomplete.strictGherkinValidation": true,
"cucumberautocomplete.smartSnippets": true,
"cucumberautocomplete.stepsInvariants": true,
// "cucumberautocomplete.pages": {
// "users": "test/features/page_objects/users.storage.js",
// "pathes": "test/features/page_objects/pathes.storage.js",
// "main": "test/features/support/page_objects/main.page.js"
// },
"cucumberautocomplete.skipDocStringsFormat": true,
"cucumberautocomplete.formatConfOverride": {
"And": 3,
"But": "relative",
},
"cucumberautocomplete.onTypeFormat": true,
"editor.quickSuggestions": {
"comments": false,
"strings": true,
"other": true
},
"cucumberautocomplete.gherkinDefinitionPart": "(Given|When|Then)\\(",
"cucumberautocomplete.stepRegExSymbol": "'"
}
And this is what I have added to settings.json of VS Code:
{
"workbench.colorTheme": "Default Light+",
"editor.quickSuggestions": true,
"window.zoomLevel": 0
}
When in my feature file I get the message for each line:
"Was unable to find step for "Given I am on the dashboard page"cucumberautocomplete"
Can someone help to resolve this issue and make it work for VS Code?
Kind regards,
mismas
So it finally worked when I:
I. deleted .vscode/settings.json (including the folder)
II. added following in global settings.json of Visual Sudio Code (the one in Users etc directory)
{
"workbench.colorTheme": "Default Light+",
"editor.quickSuggestions": true,
"window.zoomLevel": 0,
"gherkin-autocomplete.featuresPath": "src/features",
"cucumberautocomplete.steps": [
"src/step_definitions/*.js",
],
"cucumberautocomplete.syncfeatures": "src/features/*feature",
}
III. restarted VS Code
Either is something wrong with the plugin => meaning they didn't implemented as they think it should work or documentation is out dated ...
I had to remove the line
"cucumberautocomplete.stepRegExSymbol": "'"
and then it worked for me.
Just remove or comment on below line from setting.json
"cucumberautocomplete.stepRegExSymbol": "'"
It worked for me.
Windows10:
navigate to %APPDATA%\Code\User (which is VScode config folder)
add
"gherkin-autocomplete.featuresPath": "features",
"cucumberautocomplete.steps": [
"features/step_definitions/*.js",],
"cucumberautocomplete.syncfeatures": "features/*feature"
restart vscode
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 trying to import a node_module into a TypeScript file. I'm using an adaptation of angular2-webpack-starter for my project structure.
import ace from 'brace';
In one of my files gives me
Cannot find module 'brace'.
But
var ace = require('brace');
Works fine. According to this issue I shouldn't be having any problems.
My webpack config file is copied from angular2-webpack-starter.
My tsconfig.json is as follows
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true
},
"files": [
"src/bootstrap.ts",
"src/vendor.ts",
"src/polyfills.ts"
],
"filesGlob": [
"./src/**/*.ts",
"!./node_modules/**/*.ts"
],
"compileOnSave": false,
"buildOnSave": false
}
Why would one work but not the other?
The answer is related to this issue. If a module doesn't have type data available (via a .d.ts file), the ES6 module syntax
import name from "module-name";
import * as name from "module-name";
import { member } from "module-name";
//etc
will not work and one must use the CommonJS alternative,
var name = require("module-name");