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)
Related
I'm developing a react project. I use postcss-nested plugin to support css nested rule, and use babel-plugin-react-css-modules to support css modules in react. Finally, the css styles can work well so I'm sure there is no problem with these 2 plugins. But it seems that the vscode can't regonize the css nested rules. It display an underline to give an warning, like this:
Now vscode can't give tips when coding. I have to type the css property names completely. Is there any idea about my problem?
I've also ran into this issue while utilizing nesting. Because nesting is not officially apart of vanilla css VS code is automatically spitting out errors. The best way to fix this issue is to install the VS Code plugin https://marketplace.visualstudio.com/items?itemName=csstools.postcss. this will fix up those nasty little errors. Let me know if that helps you out.
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
Trying to start a gatsby+react+typescript project and VSCode will only apply syntax highlighting to the HTML in my .tsx files. The typescript code remains a single color. How do I fix this?
Note: I have no plugins installed at the moment and the highlighting works if the file type is set to .jsx
Clicking on the language button in the lower right corner and selecting typescript react fixed the problem.
I faced same problem, even "Typescript React" was selected as the language. I had to click and select the language pack version before getting syntax highlighting working.
In my case "JavaScript and TypeScript Nightly" extension was causing the problem.
I had the same problem even when "Typescript React" was selected.
I disabled all the extensions and problem solved.
Then I enabled each extension individually and I've found out "JavaScript and TypeScript Nightly" was causing the problem.
I hope this will help someone.
I solved this issue just reloading vscode as required by JavaScript and TypeScript Nightly extension, once it was reload I just double checked that Typescript react was selected and the problem was resolved.
Seems like the real problem was that the library JavaScript and TypeScript Nightly was not fully reloaded.
I installed all recommended extensions, still VSCode won't recognize any React syntax.
What must i do to make VSCode play nice with React (js / jsx) syntax?
The plugin that was causing issues for me here actually Babel ES6/ES7 as mentioned in another comment.
Once removing that plugin and reloading, it all worked well
VS Code has built-in support for JSX and TSX. You do not need to install any extensions unless you want additional functionality
As the OP noted, the problem was one of their extensions was inserting spaces around the tags. I suspect it was the js css html formatter extensions since this has caused problem for people in the past
1.Delete all html-js-css formatters.
2.If you want to work with this formatters,
install prettier.
Right click and select format document with and then select prettier. Repeat this every saving.
This happens because you use some HTML formatter, so first go to your react native or js extension settings(simple click the bottom bar language mod), and check the HTML fomatter in that setting page.
"[html]": {
"editor.defaultFormatter": "apility.beautify-blade"
}
remove this, and you are good to go.
Afaik, vscode does not understand JSX by default. Installing jsx plugin should help there.
Install Babel ES6/ES7 extension from here.
Works like charm.
I have been using VSCode for quite a long time and while it's very good, I'm missing intellisense and features that seem to be ES6-only:
I cannot ctrl+click to go to definition
I cannot have a preview of the definition
Here is what I am using:
ES5
Angular JS
All my files are wrapped into a closure, like:
(function() {
angular.module('foo').factory('bar', ['dep1', function(dep1) {
dep1.stuff();
}]);
})();
With that in mind, is it possible to have "goto definition" and other nice VSCode stuff working ? If so, how ?
What can I do to be able to simply click ctrl+click on dep1 and have VSCode open the file where dep1 is defined ?
What I can recommend is that you try to install John Papa's extension for Visual Studio Code for Angular 1.x. It is installed directly through VSCode. You can check some examples of how it works here. It will offer you code completion and it will automate a lot of tasks you frequently do in Angular, such as creating services, controllers, directives...
Btw John Papa is the author of the Angular Style guide and his way of coding could be called "best-practice" in the world of Angular development.
The best way to get intellisense for javascript/typescript is to install typings.
I find that this extension is good with installing typings: https://marketplace.visualstudio.com/items?itemName=benjaminromano.typings-installer
Once you have that installed, you can then launch it (F1 > Typings Installer: Typings > angular) and install the dt~angular typings. from there you should start getting intellisense, go to definition and possibly error checking.
Code should then pick this up (if not just reload the editor). You should then start getting intellisense. If you want to tweak it more, I would suggest looking into jsconfig.json files: https://code.visualstudio.com/docs/languages/jsconfig
You can get general purpose typing information pulled by enabling Synthetic Default Imports in Visual Studio Code.
It lets you get Intellisense either from TypeScript type definitions or by inferenced type information from the JSDoc of many popular repositories.
Here is a tutorial for how to get things set up.