Webstorm Dont Show This Again Npm Install

Tips & Tricks

Working With ReactJS in WebStorm: Coding Assist

• Component names
• Attributes and events
• Component properties
• Ant in JSX
• Alive templates

ReactJS is no doubt ane of the trendiest JavaScript libraries released recently and as such is seeing wide adoption.

React support was introduced in WebStorm ten and has undergone continuous improvement since and so. This mail has been updated with some of the features introduced in WebStorm 2016.2 and farther updates. In this weblog post nosotros'd like to bear witness how WebStorm tin assistance you lot write code with React.

More than on using React in WebStorm:

• Working with ReactJS in WebStorm: Linting, refactoring and compiling
• Debugging React apps created with Create React App
• Developing mobile apps with React Native

React introduces JSX, an XML-like syntax that you can use inside your JavaScript code, merely you lot can also utilize React in pure JavaScript.

If you're using JSX, WebStorm volition advise switching language version to React JSX and so that information technology may sympathise JSX syntax in .js files. That's information technology, at present you can write JSX code and savor code completion for JSX tags, navigation and lawmaking assay.

You lot can also switch linguistic communication version to React JSX manually in Preferences | Languages & Frameworks | JavaScript.

NB: Once you have react.js library file somewhere in your project, WebStorm will provide you code completion for React methods and React-specific attributes. By default, the lawmaking completion popup displays automatically as you blazon. For example:

From your code you tin jump to the method definition in the library with Cmd-click (Ctrl+click).

To heighten code completion we recommend that you lot add together a TypeScript definition file for React with npm install --save @types/react

Component names

WebStorm can likewise provide code completion for HTML tags and component names that you take defined inside methods in JavaScript or within other components.

Completion also works for imported components with ES6 style syntax:

From there you can also jump to the component definition with Cmd-click (Ctrl+click on Windows and Linux) on component name or come across a definition in a popup with Cmd-Y (Ctrl+Shift+I).

Attributes and events

In JSX tags, the IDE provides coding aid for React-specific attributes such as className or classID and non-DOM attributes like central or ref. Moreover, for course names you tin autocomplete classes defined in the project's CSS files.

All React events similar onClick or onChange tin be also autocompleted together with ={}.

Of course there is besides code completion for JavaScript expressions inside the curly braces. That includes all methods and functions that y'all have defined:

Component backdrop

WebStorm 2016.2 can provide code completion and resolve for component properties defined using propTypes.

When yous autocomplete component proper name, all its required properties volition be added automatically. If the component usage misses some of the required properties, WebStorm will warn you about that.

Pismire in JSX

With Emmet support in WebStorm, you can generate HTML markup really fast. You type an abbreviation that expands to HTML code when y'all press Tab. You can as well use Emmet in JSX code, and that brings us to some special React twists. For example, the abbreviation MyComponent.my-grade would expand in JSX into tag with className="my-grade" and not to course="my-class" similar it would in HTML.

Live templates

Live templates work very similar to Ant – type a special abbreviation and it will expand into a code snippet. WebStorm has a predefined set of templates for JavaScript and HTML, and yous tin also create your custom templates for React in Preferences | Editor | Live templates.

Every bit an instance let's create a live template for creating a new React component:

var $Proper noun$ = React.createClass({     render: function () {         return (             <div>$END  <pre wp-pre-tag-0="">

lt;/div>
)
}
});
Permit's set the abridgement to rC. With $variable_name$ syntax, we can ready the edit points for variable and part names (we have multiple edit points in one template), and with $END$ we specify a location of the cursor at the stop.

We also need to specify the kind of files in which this template can exist invoked; in our example information technology will be JSX.

Now when you type rC and press Tab, the code snippet will expand. Blazon the component proper noun and press Tab once more to jump to the finish edit location:

Another way to become is to import a set of templates created past customs members for development with React in WebStorm. See GitHub for details on the installation procedure.

In a follow-upwardly weblog post we'll talk more near the bachelor refactoring options, code quality assay, and compiling code. Stay tuned!

Develop with pleasure!
– JetBrains WebStorm Team

avillasureed53.blogspot.com

Source: https://blog.jetbrains.com/webstorm/2015/10/working-with-reactjs-in-webstorm-coding-assistance/

Share this post