I am coding a React page with VS Code.
Suddenly, some snippets like rfce started not working even if it's never given me problems. I don't know what's wrong.
picture of before
picture of now
What I did recently was just updated react-router-dom to version 5.2.0 and npm install it.
React snippets are not built-in. That one for example comes from this extension.
Make sure you have it installed and enabled, and that you are working in a file with the proper file extension for them to work.
If on windows, use -rfce instead of _rfce. This worked for me!
I went through the same thing. You can try uninstalling and then installing the extension again
Those React snippets what you are talking about are not built-in, those snippets are coming from an extension.
That extension stopped working for you because you may change some of your settings.
Make sure you have it installed and enabled, and that, you are working in a file with the proper file extension for them to work (try: .jsx & .tsx).
If they are still not working, which was the case at me also, check your settings, because some of the settings can interfere, and make the extension stop working.
Open settings.json by: CTRL + SHIFT + p , type: settings.json, select: "Open settings (JSON)"
Check in the settings.json file if the following setttings are different than mine:
"editor.snippetSuggestions": "top", /*make sure this is NOT "none"*/
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.quickSuggestions": {
"other": true,
"comments": false,
"strings": true
},
"editor.wordBasedSuggestions": true,
"html.suggest.html5": false,
"typescript.suggest.paths": false,
"javascript.suggest.paths": false,
As fast experiment you can copy the whole code, paste it at the end of the settings.json, save it, restart VSC. If it solved your issue, you can sort the commands one-by-one, to find out which caused the issue of yours.
It might not work, if you use the same file name like Rfce.js
Ensure that the file has extension js, ts etc.,
Uninstalling and installing React snippet from VSCode Extension might work.
Go to Preference - Settings - Extensions - Search for React Snippet and check if the values are correctly checked in.
It seems like that React snippet is not working properly, try to download it manually and install it through the link to the vss file and now install from Vss option in the extension section
I had to uninstall the snippet extension I had which was:
React-Native/React/Redux snippets for es6/es7 v2.0.6 by: EQuimper
and I used the extension:
ES7 React/Redux/GraphQL/React-Native snippets v1.9.3 by:
rodrigovallades
Launch Quick Open:
Linux: Ctrl+P
macOS: ⌘P
Windows: Ctrl+P
Paste the following command and press Enter:
ext install dsznajder.es7-react-js-snippets
I think you unfortunately uninstall it.
you have to install.
ES7+ React/Redux/React-Native snippets
in visual studio. Hope it works
My snippets worked as I thought they should once I fixed auto imports from this post by setting includePackageJsonAutoImports to always on. I used to have to type "-" before they would come up.
Visual Studio Code - Auto Imports / Quick Fix does not work
Related
Can anyone tell me how to comment JSX code in VSC?
I looked at the articles listed at the bottom, none of them seem to give a concrete solution, and the ticket appeared to have been closed, claiming that the commenting/uncommenting function has been properly resolved on VSC. However, I am still having troubles after trying out the followings as suggested:
disable sublime-babel extension on VSC
Update my language to Javascript react
In user setting, added the followings:
"emmet.syntaxProfiles": { "javascript": "jsx" },
"files.associations": {
"*.js": "javascriptreact"
},
Any clue would be really appreciated. Exhaused all tricks. Thanks!
How to you comment jsx code out in .js files in VSCode?
https://github.com/Microsoft/vscode/issues/6461
Select the text to be commented then press Ctrl+K and Ctrl+C.
Did you try to install React or Babel plugin?
This might sound dumb but, have you tried re-installing VSCode? Commenting out JSX in a .js file works fine for me without any plugins. (I use windows)
I was having this issue and for me the problem was the extension Babel ES6/ES7.
I've uninstalled that extension.
If that doesn't help you could try changing the Language Mode to JavaScript React
I use command react-native init "name project" then open vscode appear to have error message code. (image)
This is what you need to do with VS Code, observe the gif carefully
Steps to resolve error
1. Go to extension
2. Click on more (...) and select Show Built-in extension
3. Search "TypeScript and JavaScript Language Features" - yellow & blue icon
4. Click on Setting icon of extension and select Disable (workspace)
5. Click on Reload / Restart Required
If you are getting this in React Native its probably a known bug in VSCode, that when Google Flow (which competes with MS Typescript) is coded, shows errors erroneously mentioning Typescript.
Your current .js code is supposed to be preprocessed by Flow into another .js file with "proper" js.
So make sure Flow is installed and then disable the Typescript parsing support. Here's the official answer on the Flow installation webpage:
Set javascript.validate.enable option to false or completely disable
the built-in TypeScript extension for your project (see gif below)...
Otherwise, you may want to stay as is and just change your code as suggested by C2P1 on March 19, 2018 on the github issue 631
To disable the [js] parser (connected to Typescript),
In VSCode menu: File -> Preferences -> User settings, (or ctrl+,) and add the following line
"javascript.validate.enable": false,
This answer was completed after seeing Idan Dagan's answer (Not the accepted answer) here: js 'types' can only be used in a .ts file - Visual Studio Code using #ts-check
And here's an excellent albeit old page about setting up the react-native environment, from Hackernoon. (You also have the VSCode React-native-full plugin)
Just disable built-in extension for TypeScript in VSCode. On the VSCode Extensions choose "Show Built-in Extensions" and then search for "TypeScript and JavaScript Language Features", Click disable then reload the VSCode. It works for me
In VScode
Press
CTRL + SHIFT + P
Use this command
Open User Settings
copy and paste the next line in the search bar in settings
#ext:vscode.typescript-language-features
ready uncheck JavaScript validation
Helped me to resolve
To disable the [js] parser (connected to Typescript),
In VSCode menu: File -> Preferences -> User settings, (or ctrl+,) and add the following line
"javascript.validate.enable": false,
This is what you are looking for. Unfortunately I haven't Googled a proper solution but we have to disable some JS checking.
https://github.com/Microsoft/vscode-react-native/issues/631
I've solved this with a plugin for VSCode "Flow Language Support". It will control the errors of the code instead of the plug-in TS-JS (built-in plugin of VS Code). In Details of plugin, guides you how to disable the original plugin TS-JS VSCode.
instead of disabling Typescript and Javascript language features extension, you can go to the extension settings, find the option Javascript > Validate: Enable, and uncheck it to remove any warnings.
Recently I was facing an issue coding React app on Visual Studio code. Because of this issue, whenever I wrote JSX inside the render function of the React Component and saved it, it would go messed up (I mean indentation would get messy). See the pic:
This error was also showing error like:
1. Unclosed regular expression
How to solve this?
If you are using jshint plugin, remove it and install ESLint plugin.
It is a good replacement for jshint in reactJS work.
I tried several options like creating a .eslintrc file or .jshintrc file.
But it turned out that in my Visual Studio Code IDE, there was third party extensions(eslint/jslint/tslint/beautify/jsformatter etc) that were causing a big mess in my JSX code.
I had to go to the extensions and disable all the extension which could hinder in the natural process of linting and code cleaning of React framework.
(These extensions are really great. But disabling them helped me in solving this issue of mine, no offense to anyone.)
If you are facing the same issue and the issue persists event after adding a .jshintrc with content:
{
"esversion": 6
}
then consider disabling the third party extensions.
Hope my answer helped.
the extension that did it for me was...
jshint
dbaeumer.jshint
Dirk Baeumer
as #abhay-shiro says, disabling a few extensions will usually resolve the issue.
I had the same problem, but it was "beautify" extension which was causing the error, I uninstalled it and installed prettier. It fixed the problem.
I solved this issue by disabling show syntax errors checkbox in visual studio 2015.
Tools -> options - > text editor -> javascript -> intelliSense -> general -> show syntax errors(disable)
I've just installed the latest Debugkit from https://github.com/cakephp/debug_kit.
Everything is working. However, when I clicked on the "SQL Log", the CakePHP logo keeps spinning. I tried to debug by opening up the console.log and saw an 500 error. It shows the below.
Error: Class 'SqlFormatter' not found
File /Applications/MAMP/htdocs/App/vendor/cakephp/debug_kit/src/Template/Element/sql_log_panel.ctp
Line: 24
From my understanding, SqlFormatter class is not found in sql_log_panel.ctp. How can I add/declare the SqlFormatter class?
Just install it via composer, problem very likely solved then.
https://getcomposer.org/doc/00-intro.md
http://book.cakephp.org/3.0/en/installation.html#installing-cakephp
I highly recommend you to become familiar with composer, it is a standard tool for php developers for some time now. Composer will automatically install the dependencies for you.
Your second best option would be to download the SqlFormatter package manually from where ever it comes from and set your autoloading or include manually up.
Visual Studio Code now supports JSX on 0.8 version, but looks like the only way to activate it is with a .jsx file extension. It is not on the list to change the language mode manually, the nearest option is JavaScriptReact, but it doesn't parse the JSX tags.
I'm in a project with a lot of .js files with JSX and I can't change it.
Is there any other way to use JSX syntax without the .jsx extension?
Change your user settings or workspace settings as below:
// Place your settings in this file to overwrite the default settings
{
"files.associations": {
"*.js": "javascriptreact"
}
}
Note: You might need to restart VSCode.
I would feel the below is the easiest way of formatting the code
Click on the bottom right on VS Code Editor where it says Javascript.
You will see an option to Select the language Mode, here you can search for JavaScriptReact and select. That's it. This should solve your problem.
1.
I could do it, but "not React JS files" are also show with JavaScriptReact mode.
open file C:\Program Files (x86)\Microsoft VS Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.json
(probably, need to open with administrator privileges.)
change "jsx" to "js" in array "fileTypes".
restart app, close opened js files, and reopen.
Took me a while to figure this out but – JSX is already part of Emmet – which is part of VS Code. I've told Emmet to also (additionally) make JSX snippets available in regular JS files.
Just put this in your settings file:
"emmet.syntaxProfiles": {
"javascript": "jsx"
}
Although Dionys' answer works there is a better way to do this in more recent versions of Visual Studio Code.
Go to File>Prefrences>Settings and then scroll down and find "Emmet" open the tab and you should see the following text
// Enable Emmet abbreviations in languages that are not supported by default. Add a
mapping here between the language and emmet supported language.
// E.g.: {"vue-html": "html", "javascript": "javascriptreact"}
"emmet.includeLanguages": {},
So just follow the instructions and add "emmet.includeLanguages": { "javascript": "javascriptreact" } on the json at the right panel ( which will overwrite the user settings ).
There is now a VS Code extension that allows .js files to be treated as .jsx files.
Unfortunately the readme for the extension also warns:
when you install this extension you will loose all the existing language support provided for .js files
Fortunately VS Code is now very close to adopting Salsa, which means soon the js-is-jsx issue should be completely resolved.
1-Press F1 (in Visual Studio Code)
2-Type "extension" in the appearing text field
3-Pick "Extensions: Install Extension"
3-Type "ext install jsx"
4- install JS JSX Snippets
5-Restart Visual Studio Code
Click on the bottom right on VS Code Editor where it says Javascript. You will see an option to Select the language Mode, here you can search for JavaScriptReact and select.
That's it.
Just install an extension:
Press F1 (in Visual Studio Code)
Type "extension" in the appearing text field
Pick "Extensions: Install Extension"
Type "ext install jsx"
Restart Visual Studio Code
Source:
https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&ext=jsx
https://marketplace.visualstudio.com/items/TwentyChung.jsx
Try using link on Mac or Linux.
ln -s index.ios.js index.ios.jsx