I have uninstalled 2 extensions (Auto Comment Blocks and Document This) that I thought they could be responsible, also I deleted the node_modules folder and setup the javascript (three.js) working folder again for intellisence/autocomplete (via types) and still the problem remains.
Here is before and after selecting a variable.
Is there a way to fix this extremely idiotic behavior?
If you copy/paste the code as well as screen-shot I can see what happens in my install.
Did you restart after un-installing the extensions?
Have you run vs code with all extensions disabled? code --disable-extensions
I assume you are using the latest official version?
Do you have typescript checking enabled?
Ironically, although I have the problem for a long time, I instinctively found the answer just after I posted the question:
I put my only two (custom) source files main.js and shaders.js in a 'src' folder, then edited the jsconfig.json file and I changed the exclude reference, in order to exlude all other *.js files in the root folder and added the include.
Now jsdoc comment repeating stopped completely, and as a bonus, intellisence works far better!
from:
"exclude": [
"node_modules"
]
to:
"exclude": [
"node_modules",
"**/node_modules/*",
"*.js"
]
"include": [
"src/*.js"
]
EDIT: Or include alone, as Sumomo suggested in the comments.
Related
I have a fresh Next.js project with a clean set of jsconfig declarations as per:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#/*": ["./src/*"],
"public/*": ["./public/*"],
"styles/*": ["./src/styles/*"],
"utils/*": ["./src/utils/*"],
"components/*": ["./src/components/*"]
}
}
}
Yet, out of nowhere, they're now returning Can't resolve 'styles/styles.scss' and I can't identify what has changed. What's the best way to debug this to find the cause, or what are some common causes for this?
There are a few things you can try to debug the issue.
Make sure that the file 'styles/styles.scss' exists in your project and that the file path is spelled correctly in your jsconfig declarations.
Check your dependencies and make sure that you have all the necessary packages, such as 'node-sass' or 'sass-loader', installed and configured correctly.
Check if there are any conflicting configurations or settings in your webpack config file that may be causing the issue.
Check your package.json file, if you are using any package or tool that is transforming your scss files, make sure that it is configured correctly and that the package is up to date.
Check if there are any other error messages in your console, they may be related to the problem and provide more information.
If none of the above works, try re-creating the project from scratch and see if that resolves the issue. Hope this helps!
I was following the AirBnB style guide, which recommends making component filenames either the name of the export or index.{js,jsx}, but there are a few situations I ran into while doing it that greatly increased debugging difficulty:
(The worst) Console.log only identifies itself via the filename and cursor location:
It's hard to know which index.jsx file you're opening in VS Code's file manager, because even if they're enclosed in a folder of the component name, when folders are nested VS Code will situate all the index.jsx files right next to each other if they're located in open sparsely-populated folders located in the same tree.
The tab bar shows a bunch of files of the same name. This is a little less important, since it shows the folder location if there's multiple files of the same name, but the folder names are written in smaller font, and their necessity makes the tab width wider, allowing fewer to display at a time.
It's harder to use the keyboard shortcuts to open files - if you have several files of the same name, typing in their filename to open them is severely hampered by an additional hunt-and-peck procedure required to navigate which one of them you need.
What I did for an interim solution:
I had to come up with a solution for my project quickly, so I named the index.jsx files the name of the export, despite already being in folders named the component name, resulting in "double-named" imports, like this:
But, this is specifically frowned-upon by the AirBnB styleguide, here's where it says explicitly NOT to do that: https://airbnb.io/javascript/react/#naming
I guess I'll take the stink-eye from the AirBnB styleguide over having a lot more difficulty debugging for now, but has anyone come up with any good solutions to these problems so hopefully I can satisfy both our needs?
I'm thinking, maybe a chrome extension that shows more information about where console.log() messages are coming from, or a way to configure vs-cde so it makes the folder names more prominent on the tabs than the filenames if it detects multiples, etc.?
Whether this question gets closed or not, I hope it remains on the site, because this will undoubtedly be an issue for others going forward, and seems like more of a tooling issue than a style/opinion issue. Additionally, AirBnB's style guide is the defacto reference for idiomatic Javascript.
I did not go back to index.js{x} filenames in component-named folders, but instead stuck with the directory-named files and installed directory-named-webpack-plugin to resolve the issue of double-named imports.
This allowed me to have unique filenames without double-named imports, which is at least more adherent to the guide, and seems like the easiest way to avoid the negative effects of having several duplicate-named index.js{x} files.
I found the plugin through this feature request thread for Microsoft/Typescript/jsconfig.json: https://github.com/microsoft/TypeScript/issues/24116#issuecomment-522339546
Unfortunately, it looks unmaintained, but it is for webpack v4, which is still current as of CRA React 17.0.2. To my surprise, it worked fine as a drop-in with create-react-app.
Install and configure process was very easy. Install the package as a dev dep:
$ npm i -D directory-named-webpack-plugin
Open the project's node_modules/react-scripts/config/webpack.config.js, and add the default config for the package:
var DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");
resolve: {
plugins: [
new DirectoryNamedWebpackPlugin()
]
}
webpack.config.js's file structure already exists, so only the two lines calling the plugin method need to be added. There's a lot of comments, so you have to navigate through hundreds of lines of code in order to put the directives in the right place, so I'll tell you the exact line numbers I used.
I put
const DirectoryNamedWebpackPlugin = require("directory-named-webpack-plugin");
(instead of var) at line 15 just under resolve(), and
new DirectoryNamedWebpackPlugin()
went at line 353 just under PnpWebpackPlugin.
And that was it. Opened up the project, deleted the filenames from the folders of the same name, and they resolved immediately without any fanfare.
For reference, I ought to include my jsconfig.json file in case there's any cooperation happening - everything in here except the "include":[] line was generated by jsconfig.json cli package: https://www.npmjs.com/package/jsconfig.json
{
"compilerOptions": {
"checkJs": false,
"jsx": "react",
"resolveJsonModule": true,
"moduleResolution": "node",
"module": "es2015",
"target": "es2020",
"baseUrl": "src",
"include": ["src", "public"],
"exclude": [
"dist",
"node_modules",
"build",
".vscode",
"coverage",
".npm",
".yarn"
],
"typeAcquisition": {
"enable": true,
"include": ["react", "react-dom", "jest", "testing-library__jest-dom"]
}
}
}
I had a look at esbuild during this process, which looks very interesting and will have to try at some point, but at least for now I can go back to coding without looking at any ugly imports that arouse the ire of the omnipotent AirBnB.
I am running an Angular 4 project with Webpack 2.4.
For some reason, some of the third party Javascript plugins files are being modified after compilation, and they are shown in the browser's debugger as a very long, one line string:
This is very inconvenient because I can't use Chrome / FF debugger, as I am unable to set up any breakpoint in there.
Following some of the already posted questions in this site and many others, I extracted the webpack.config.js file by executing ng eject
The section where the js files are imported look as follows:
{
...
"scripts": [
...
"script-loader!./node_modules/handsontable-pro/dist/handsontable.full.js",
...
],
"styles": [
...
]
},
"output": {
"path": path.join(process.cwd(), "dist"),
"filename": "[name].bundle.js",
"chunkFilename": "[id].chunk.js"
}
The file handsontable.full.js does not look like that in my project's folder. It seems to be pretty structured. It seems to suffer some kind of modification when the application is built and served.
More puzzling, many other files in the node_modules folder do not have the same problem.
Now, I tried to tweak the webpack.config.js, as suggested in many forums, specifically SourceMapDevToolPlugin, but with very little luck.
So, several questions arise here:
What is happening here? The transformed file doesn't seem to be a minified file, or a hashed file... What is it?
How can I prevent this from happening, so I can set up breakpoints in that file and use the browser's debugger for tracing, var inspect, etc.
Check the devtool: property in the Webpack config object. If it's set to eval, cheap-eval-source-map (or something like it, don't remember all the eval options), try changing it to source-map or cheap-source-map.
Full list of options here: https://webpack.js.org/configuration/devtool/
I'm using Visual Studio Code, currently working on a web project using PHP, HTML, CSS, JS. I've found the intellisense features (e.g. auto-completion and go-to definition) useful, particularly in JS. However, it only seems to scan open files, not the entire project to detect variables and functions. Since my code is split among various files with global items, is there any way (via setting or extension) to get it to scan the entire project?
See our JavaScript Docs for help getting started. You likely need to create a jsconfig.json file at the root of your workspace:
{
"compilerOptions": {
"target": "ES6"
},
"exclude": [
"node_modules",
"**/node_modules/*"
]
}
This tells VSCode to treat all JS files in your workspace (even unopened ones) as part of the same project
In VS Code, how do I include js files for Intellisense/autocomplete, without compiling them in Angular, and without creating definition *.d.ts files for each of them?
I have an Angular 4 (actually Ionic 3 which uses Angular 4) project where I'm trying to use VS Code as an editor, but Intellisense for JavaScript files only seems to work for the current file in focus and not for other JS files in the same project, unless I include the files (which are in the path "www/js/*.js" ) in the compiler options in the tsconfig.json file:
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"www/js/*.js"
],
The problem is, I don't want to include those files in the compile, since they're already referenced in the index.html template. When I compile with them, I get errors. I only want to include them in Intellesense, not compile them. Any way to achieve this, WITHOUT creating *.d.ts files for each of them?
Currently my workaround is to just use a different editor (Adobe Brackets) when editing my js that I don't want compiled, so that I can use the Intellisense of Brackets (which works very well), but I'd prefer to just use VS Code editor for everything if possible.
Thanks in advance!
After more research combined with lots of trial and error, I was able to find that adding a jsconfig.json file to my www folder (it didn't work correctly when I put it in my root folder alongside the tsconfig.json file), with the following contents, then it seemed to at least make Intellisense work between the js files, though I still haven't been able to work from the ts files to the js files. Here is the contents of my jsconfig.json file:
{
"compilerOptions": {
"target": "ES5",
"module": "commonjs",
"allowSyntheticDefaultImports": true
},
"include": [
"js/*.js"
],
"exclude": [
"node_modules"
]
}
I hope this helps someone else who comes across the same problem.
If anyone finds a way to get the Intellisense to work for the js files, while working in the ts files, please post an answer here. Thanks!