CODEWITHSUNDEEP
androidiosreactjsreact-native
Stack Overflow
Stack Overflow

Reputation: 2968

What does @format mean in new react native App.js?

I started to create an Application in react native so, i setup the react native environment and found the @format in the App.js file when i open this file first time. Please can anyone tell what is @format and why it is in the new App.js file in react native?

Upvotes: 28

Views: 6985

Answers (3)

Guillem Puche
Guillem Puche

Reputation: 1404

The demo code created with npx react-native init YourNameProject (found in this guide) generates this annotation.

The Prettier's documentation says the annotation @format is related to Pragma.

Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file. This is very useful when gradually transitioning large, unformatted codebases to Prettier.

Prettier can insert a special @format marker at the top of files specifying that the file has been formatted with Prettier.

Upvotes: 0

V-SHY
V-SHY

Reputation: 4125

Refer to the @Noitidart's link in comment, the @format is part of pragma and another pragma is @prettier. Prettier will only format those files with pragma when option of Require pragma is enabled. Thanks @Noitidart for the link.

I found this after I check the blame of App.js file in react native repo.

Prettier RN local-cli

And I found this description in RN 0.48.4 features Enforce Prettier for @format (1023070) - @TheSavior

As conclusion, the @format tag is used to tell the prettier tool to run on that file and so that it's format becomes prettier.

Upvotes: 24

nits
nits

Reputation: 115

Its called decorators. It’s just a function that takes as an argument what it decorates:

@myFunction
class MyClass { }

is equivalent to:
class MyClass { }
myFunction(MyClass)

Using decorators allows us to extend a function (class or property) by wrapping a function (decorator) around it. This can be useful for making properties read-only or suppressing warnings from a function.

reference : https://moduscreate.com/blog/using-es2016-decorators-in-react-native/

Upvotes: -8

Related Questions