42

I use command react-native init "name project" then open vscode appear to have error message code. (image)

enter image description here

Gama11
  • 31,714
  • 9
  • 78
  • 100
thana
  • 431
  • 1
  • 4
  • 3
  • 1
    Possible duplicate of [js 'types' can only be used in a .ts file - Visual Studio Code using @ts-check](https://stackoverflow.com/questions/48859169/js-types-can-only-be-used-in-a-ts-file-visual-studio-code-using-ts-check) – NiRUS Oct 18 '18 at 05:50
  • The auto-generated sample project itself had this issue, I wonder why the developers of react-native or VS Code would do such a thing – Harsha Jul 27 '21 at 04:44

8 Answers8

68

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

Himanshu padia
  • 7,428
  • 1
  • 47
  • 45
ishandutta2007
  • 16,676
  • 16
  • 93
  • 129
  • 32
    This is the strangest top-most voted answer I've seen in stackoverflow. What's next, we link youtube videos with tutorials? The suggested solution can be explained in text with: 1. Search in extensions for: `@builtin typescript-language-features` 2. Disable extensions for the workspace *That said* Disabling this, and not replacing it with something else that doesn't have this issue is not a good idea. – swalog Sep 18 '18 at 09:22
  • 18
    The point is not about video or audio or gif or text. It is about how easily and quickly your idea can be explained clearly. If stackoverflow encourages embedding short youtube videos to make it more clear, then why not. – ishandutta2007 Sep 18 '18 at 10:16
  • 9
    +1 I appreciate the gif - makes it clear what to do without having to read annoying text. ;) However, search engines are going to index a text explanation much better than a gif, so while the gif is helpful, it probably should be accompanied with text explaining the steps. – Brandon Montgomery Jan 31 '19 at 16:18
  • 1
    This solution disables intellisense for your workspace, it's best to use C2P1 solution [here](https://github.com/Microsoft/vscode-react-native/issues/631) – Emil Jun 25 '19 at 10:04
24

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)

pashute
  • 3,965
  • 3
  • 38
  • 65
15

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

Agung Pramono
  • 429
  • 4
  • 7
4

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

enter image description here

alejandro pereira ALEW140
  • 306
  • 3
  • 9
2

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,

kallayya Hiremath
  • 3,560
  • 1
  • 13
  • 14
1

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

Joe
  • 841
  • 2
  • 10
  • 25
0

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.

Matthew
  • 1,905
  • 3
  • 19
  • 26
G. Desenv
  • 1
0

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.

enter image description here

Mohamed Souibgui
  • 147
  • 1
  • 4