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.
Related
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
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)
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
I'm trying to get Sublime Text 3 to work well with Cake's ctp (view) files. The syntax highlighting works fine out-of-the-box, but I can't get the HTML autocomplete to work.
If I open an .html file, I can get the tags and attributes to autocomplete (except in the attribute "style", it doesn't autocomplete CSS styles).
However, if I work on a .ctp file, autocomplete doesn't work at all. I've already tried changing the View->Syntax settings to both PHP and HTML and nothing... I've even tried using the "Open all with current extension as..." with no result.
I've tried using different plugins (ApplySyntax, cakephp plugins, etc) with any success.
Another thing I've noticed, also for javascript code, is that for "short" tags and functions, if I place the cursor at the opening tag or {, the closing tag or } gets automatically highlighted. However, if there's a bunch of lines of code in-between (same language) then the highlight won't happen...
Any help with these things would be really appreciated! I really want to like and use Sublime!
NO NEED FOR A PLUGIN NOW!
In the latest version of SublimeText 3 (at least), you can open a CTP file, then:
View -> Syntax -> Open all current extension as -> PHP
Then just close your open files, and when you re-open them, they'll be highlighted like the language you chose for that extension.
Just install the ApplySyntax plugin for sublime-text.
ApplySyntax can be installed in a variety of ways:
Through Package Control http://wbond.net/sublime_packages/package_control
Open Package Control
Select 'Install Package'
Find and select 'ApplySyntax'
By cloning this repository in Packages
cd into your Packages folder
git clone git://github.com/facelessuser/ApplySyntax.git .
By downloading the files and placing them in a directory under Packages, such as ApplySyntax or User
If you don't put the files in Packages/User (you can, but probably shouldn't), make sure they live in Packages/ApplySyntax. If you download and extract a compressed archive from GitHub, the directory will be facelessuser-ApplySyntax. Remove facelessuser-.
Courtesy for installation steps: https://github.com/facelessuser/ApplySyntax/blob/master/readme.md
N.B: I installed it and now the *.ctp files are displayed with proper syntax-highlighting for me.
Update:
In Sublime Text 3, you don't have to use the plugin, you can use the following solution:
https://stackoverflow.com/a/35297789/749232
I have setup Webstorm to recognise and compile my coffeescript files.
I have installed the AngularJS plugin and can successfully write my controllers etc in plain old javascript.
When I try to write my angular related code in CoffeeScript however I do not get any IDE support: code-completion, intellisense etc.
As a sign that all is not well, the angular variable itself is not recognised, as shown in the image below.
Question: How do I enable support for AngularJS in CoffeeScript files?
Thanks
To fix the specific problem Unresolved variable or type angular you need to make sure the angular javascript libraries have been Enabled (see image below).
You do this via the WebStorm settings:
File -> Settings -> Javascript -> Libraries
Here is the relevant help section: Configuring JavaScript Libraries
With webstorm 10 you are going to go to the preferences window and from there select Languages & Frameworks > JavaScript > Libraries. Then click the download button, select TypeScript community stubs from the dropdown at the top of the list, find angular and click download and install.
If you are using jshint be sure to go to the jshint settings find the Predefined option and add angular:true to suppress warnings.
In WebStorm v.11
go to "Settings" -> "Plugins" -> "Browse repositories".
Search and install "Angular Templates".
Profit
Settings screenshot