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".
Related
Previously, I used to be able to do CMD+SHIFT+p > Organize imports and this would both sort and delete unused imports. This functionality seems to have broken.
How can I delete unused imports quickly with one command?
Current workaround is: click on unused import, CMD+. > Delete unused imports.
Languages for which this is applicable (typescript, typescriptreact, javascript, javascriptreact).
I have confirmed VS code is using a recent version of typescript unlike people in this post
It turns out that Organize Imports does actually work as expected but it was conflicting with the Deno plugin.
I found this out by using the amazingly useful Extension Bisect feature which is built into Visual Studio Code. Extension Bisect disables half your extensions and asks you to check if the issue persists. This process is repeated until only a single extension is left. I strongly recommend trying it out via CMD+SHIFT+P > Start Extension Bisect
Turns out my issue is a duplicate of this GitHub issue.
In v1.73 there should be a command (it is in Insiders already) to remove all unused imports, see Merged PR: Add removeUnusedImports command:
{
"key": "",
"command": "javascript.removeUnusedImports"
},
{
"key": "",
"command": "typescript.removeUnusedImports"
}
These are unbound by default and although they are in the Keyboard Shortcuts editor they don't appear in the Command Pallette for some reason.
Previous answer which may still help some:
There does not appear to be a built-in way to access the delete all imports functionality. But you can install the Remove Unused Imports extension
VS Code extension to remove unused ES6 imports inside JavaScript and
TypeScript files (.js, .jsx, .ts and .tsx extensions) without
changing the current order, as opposed to the built-in VS Code
"Organize Imports" functionality.
and
try this keybinding:
{
"key": "cmd+shift+r", // or whatever you want
"command": "remove-unused-imports.main",
}
enter image description here
My css file does not translate the codes in my scss file and adds these comment lines, if anyone knows the reason, I would appreciate it.
There are two 'Live Sass Compiler'. Old one with more than 2 millions downloads, but last time updated in 2018. And new one with 80 thousands downloads, but it supports all new features. Try to use newest, it might help.
You need to check sass live compiler config file (settings) where you can describe what file types you want to compile and also choose the path you need to your css file. Compiler creates css file automatically.
Open extension settings and you will see
That's my config
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/css"
}
],
If you have done this correctly - I think the problem is syntax inside your sass file
When working with Visual Studio Code on Windows to develop Angular applications, I recall that if I removed an import statement, vscode would almost immediately underline in red all of the places where those artifacts were being referenced.
However, now I am working in vscode on a Mac to develop React applications, and I've noticed that if I remove an import statement, I do not get any red-underlining like I am used to.
Any thoughts as to how I can get this functionality back? I imagine its due to an Angular package I had installed on my previous workspace, that I no longer have.
#Matt Bierner gave a good advice to check instructions, but after reading it I can say that the best option is to create or modify jsconfig.json by adding "checkJs": true
{
"compilerOptions": {
"checkJs": true,
},
"exclude": ["node_modules", "**/node_modules/*"]
}
By default, VS Code only checks the syntax of JS files and will not complain about undefined variables like it does with TypeScript
You can follow these instructions to enable type checking in plain old JS files. The simplest approach is to add //#ts-check at the top of the file
I have learnt html, js and css. Now I want to learn React.
Now I am very used to use snippets of HTML files such as div.className and by pressing enter it gives me <div class="className"></div>.
When using React the HTML part is in return in a js file.
How can I add all default snippet in VS Code of HTML files into react js files?
You need to have Emmet extension Installed in VSCode.
Then you need to add this line of Code in your settings.json of VSCode Settings and you will have all the emmet formatting for JSX.
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
And also if not already set, you will need these two settings as well.
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
And Emmet will start to format your JSX just like it does in normal HTML
If you can`t find Emmet plugin
According to official page no need to add extension. checked on version 1.51
Support for Emmet snippets and expansion is built right into Visual Studio Code, no extension required. Emmet 2.0 has support for the majority of the Emmet Actions including expanding Emmet abbreviations and snippets.
Just press cmd+P (macOS) or ctrl+P (others)
and type settings.json, open this file and as mentioned #Imran Rafiq Rather add this line "emmet.includeLanguages": { "javascript": "javascriptreact" },
And that's it!
first install emmet extension in vscode
second got to preferences/setting.json
ans put this
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
it will work
As of July 2022, here is what I do.
Go to Settings
Click Extensions
Click Emmet
In Include Languages section, Add Item with Item = "javascript" and Value = "javascriptreact"
Click OK
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.