VS Code not suggesting JSX attributes - javascript

While developing a ReactJs project, VS Code used to suggest attributes for JSX elements. For instance,
<input type="text"></input>
In this scenario if I wanted to add an placeholder I had to just type in the first few letters and the auto-complete popped up suggesting the events.
However it has stopped working all of a sudden and results in this while I try Ctrl+Space in a JS file.
What I have tried so far:
Uninstalled VS Code and removed the user-specific settings from AppData and removed the .vscode folder from User and then reinstalled.
Added
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
in the settings.json based on this


change the file extension instead of .js || .ts add an x .jsx || .tsx
helps alot if you add a jsconfig.json and install #types/react https://code.visualstudio.com/docs/languages/jsconfig


I had the same problem and this is what solved the problem for me. Just import react from react:
import React from 'react';
Despite this line nowadays isn't required, this makes Vscode recognize somehow and suggest jsx again.


Make sure to check that the "select language mode" tab on the bottom right of the window shows "Javascript React" and make sure that you've installed and enabled the ES7 React/Redux/GraphQL/React-Native extention.

Related

Text color is off in VS Code

Recently, my text color has been of for js,jsx,ts,tsx files in VS Code.
I don't really know what happened but it's not working all of a sudden.
As you see, the file is detected to be a typescript react file, but I do not have any text coloring.

This warn come from Eslint rules when using Nextjs, it advice that you should use component from Nextjs. Follow this post to find your problem!
Error: Do not use <img>. Use Image from 'next/image' instead. - Next.js using html tag <img /> ( with styled components )

Downgrade plugin JavaScript and TypeScript Nightly to v5.0.20221115

solved by adding following settings :
"files.associations": {
"*.tsx": "javascript"
}
Ref: https://code.visualstudio.com/docs/languages/overview#_adding-a-file-extension-to-a-language
OR
This is caused by the Javascript and Typescript Nightly extension. You can either downgrade or disable it to temporarily fix it.

how to import without index at the ending url - vscode

I'm trying to to configure vs-code to recognize and suggest imports without
index ending
foo (folder)
- index (js file)
current behavior:
import './foo/index'
expected behavior:
import './foo'
I tried changing vs code settings but its still doesn`t work:
javascript.preferences.importModuleSpecifierEnding: 'shortest',
typesciprt.preferences.importModuleSpecifierEnding: 'shortest'
-. Note I also use react and path intellisense if it matters
Have anyone ever encountered this problem ? I would be grateful for any help I could get

I got this working by installing the various plugins below.
Most of the time things just import by themselves as soon as I type the class name. Alternatively, a lightbulb appears that you can click on. Or you can push F1, and type "import..." and there are various options there too. I kinda use all of them. Also F1 Implement for implementing an interface is helpful, but doesn't always work.
List of Plugins
npm Intellisense
ngrx for Angular 2 Snippets
TypeScript Toolbox
npm
TsTools
Angular Snippets (Version 9)
Types auto installer
Debugger for Chrome
TypeScript Importer
TypeScript Hero
vscode-icons
Add Angular Files

VS Code autocomplete/intellisense not working

Building my first React project from https://frontendmasters.com/courses/complete-react-v5/ on VS Code for Windows 10.
Have installed prettier, eslint. Using Parcel to transpile the code. The intellisense is only working on index.html file. Nothing on js files. Have looked through old answers and none of them proved to be helpful. A bit of a noob here, a step by step solution will be helpful
Screenshot
Attaching project files
http://www.filedropper.com/adapt-me

on the right bottom, change the language mode Javascript to Javascript React

You need to specify that the file you working on is of JavaScript React type, currently with .js it is a JavaScript file type.
You can see the file type on the bottom Status Bar
Use Change Language Mode (through command palette) command to change it manually.
Also, you can provide a config in settings.json to associate it with a file name, for example:
"files.associations": {
"*.react.js": "javascriptreact",
"*.stories.js": "javascriptreact",
"*.action.js": "javascriptreact",
"*.reducer.js": "javascriptreact",
"*.styles.js": "javascriptreact",
"*.styles.react.js": "javascriptreact",
"*.styles.jsx": "javascriptreact",
"*.svg.js": "javascriptreact",
"*.jsx": "javascriptreact",
"*.js": "javascriptreact",
".stylelintrc": "jsonc"
}

Look at this photo, head to the settings and search for autocomplete, tick them out and you are good to go.

It may be a problem with your parcel setup. Can you create a Create React App project template CRA and check if the intellisense still doesn't work with the js files in it.
Another alternative is to upgrade your VS code to the latest version if any update is available or else you can download VSCode Insiders and check if the intellisense works as expected.
One other option is to checkout the code from the commit mentioned at the bottom of this page and check if the intellisense works for this code.

If your file extension is like .js, convert it to .jsx.

I had the same problem trying to get auto-complete using fs functions. When I switched from requiring to importing fs, the auto-complete appeared. Don't know if it's relevant though. Just a complete newbie.

You need to assign the extension of ".jsx" to "Javascript React" in the bottom right corner of VS Code.
Click on Configure File Association for '.jsx':
Then select Javascript React:
Now the autocomplete will happen like if it was an html file.
Also, make sure to add ".jsx" extension to your files instead of ".js".

'File name differs from already included file name only in casing' on relative path with same casing

Error TS1149: File name 'C:/Project/frontend/scripts/State.ts' differs from already included file name '../frontend/scripts/State.ts' only in casing.
I've triple checked the casing in our references and the actual files have the correct casing as well. As far as I can tell, this is solely because the relative path uses incorrect casing, or perhaps it's just because of the relative path itself?
The thing is, it compiles just fine on Mac and Linux, but throws this error on Windows.
If it helps, forceConsistentCasingInFileNames is enabled in the tsconfig, and we're using tsify to compile.

For me, the issue occurred when a file was quickly renamed from someFile.ts to SomeFile.ts. Restarting my IDE (Visual Studio Code) made the warning go away.

In my case, the error was in the import statement. The import statement had a capital letter instead of small letter, which worked during develop in Windows, but not when compiling for production.
wrong:
import {SomeClass} from '/some/path/SomeClass.ts';
correct:
import {SomeClass} from '/some/path/someClass.ts';

UPDATE 2021
That's a weird error that occurred in my IDE, but it can be simply done with two simple steps:
rename your file (not component) to another name and once again back to your original name.
Example:
consider we have a myFile.js file in the components directory:
> src
> components
> myFile.js
First
Rename myFile.js into another name (anything) like temp.js:
myFile.js ----> temp.js
Second
back to its original name,
temp.js ----> myFile.js
It's also work fine with *.ts *.tsx *.js *.jsx extensions.

You need to disable the "forceConsistentCasingInFileNames" in the tsconfig.json file.
So you should have something like that:
{
"compilerOptions": {
...
"forceConsistentCasingInFileNames": false,
...
}
}

Restarting VS Code IDE didn't work for me and I didn't want to change config files. These are the steps that worked for me to resolve this problem:
From VS Explorer, rename the problem file to a new name
Change the component name to the new name inside the file
Save the file
Restart VS Code
Rename the file back to the name I originally wanted
Change the component name to match
It must be some kind of caching issue inside VS Code

For VS Code IDE users:
You can fix it by opening the Command Palette (Ctrl+Shift+P) --> Select Typescript: Restart TS server.

Mine was a vue problem, I removed the .vue extension and it worked

When two files exist in same folder with names like a.tsx and A.tsx you will get this error

Ok, just need to throw in my "solution" here as well, since it was different from the others. The error message clearly said where it saw an error. It was the casing of a directory that had been renamed (from Utils -> utils). Even though it was renamed correctly everywhere I still got the error. My solution was to rename it once more (why not, hehe) to utils2. After that it worked fine

For VS Code, only thing worked for me was to clear editor history:
Press Ctrl + Shift + P.
type command Clear Editor History.
Press Enter.

For me the problem only went away:
Close VS Code
Deleting the node_modules\.cache folder.
Re-open VS Code

It's not enough to restart your TS server!
As of 2023, I found a consistent way to reproduce the issue. This error will happen whenever you still have imports pointing to the wrong path! (after renaming)
// Wrong path, but same "Already included file name" error
import { Home } from './home';
// CORRECT path, but same "Already included file name" error
import { Home } from './Home'; // <- new path
Fix all imports path and restart your TS server (on VS Code, press F1 > Restart TS server)
TS team should definetly work on improving this error message :)

I've tried these two ways:
Import file with '#/frontend/scripts/State.ts' instead of '../frontend/scripts/State.ts'. It works only if you are using path alias.
Rename the directory of the project and open the project from the new directory.

Changing "React" to "react" worked for me.
Incorrect:
import React from "React";
Correct:
import React from "react";

Writing the import again worked for me.

Remove .vue extension and it worked

If nothing works try:
Remove node_modules
Restart Vetur
yarn or npm i again to get your node_modules
Restart developer window
Renaming files or restarting didn't help. The error started after renaming a file and letting Vetur do it's thing with imports.

In my case, I am using Nextjs. Removing the .next folder and starting the app again solved the problem.
Update: The error occurred again. This time deleting .next didn't help. Turned out it was due to a circular dependency in my code.

I had the same issues but it came from the imports inside test files (which were based on jest).
Solution was to clear the jest cache using the following command.
node ./node_modules/jest/bin/jest.js --clearCache

Even after changing cases and making git config ignore case false(git config core.ignorecase false) still I had to follow the following then only it worked as expected!
git rm -r --cached .
git add --all .
git commit -a -m "Versioning untracked files"
git push origin master
Thanks to this comment: https://stackoverflow.com/a/55541435/3272407

For Visual Stuido Code user, Restart TS Server fixed my issue without rebooting the whole VS code.

The answer was that we were using tisfy 1.0.1, when forceConsistentCasingInFileNames wasn't supported until 4.0.0. Updating fixed the issue.

How to import poorly named libraries?

Background
I am using a library called baguettebox.js
You can see it here
Problem
When I import this into my project like
import * as BaguetteBox from 'baguettebox.js';
I get a warning flagged inside my IDE PhpStorm
Cannot resolve file 'baguettebox.js'
This is because the folder & package.json are called baguettebox.js.
The Package is actually found and works in my application, I just want a good way to handle this error.

It's the IDE issue. Please follow WEB-25805 for updates

Categories