React

Install and configure ESLint in a React project

1. In the built-in Terminal (View | Tool Windows | Terminal), type:

   npm install --save-dev eslint
   npm install --save-dev eslint-plugin-react

2. Add a ESLint configuration file .eslintrc.* to your project. This can be a .eslintrc, .eslintrc.json, or .eslintrc.yaml file, or a file in another supported format, see the ESLint official website for details.

3. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Languages & Frameworks | JavaScript | Code Quality Tools | ESLint, and select Automatic ESLint configuration. JetBrains Rider will automatically locate ESLint in your project node_modules folder, and then use the default configuration from .eslintrc.* file or from eslintConfig property in a package.json.

   Alternatively, select Manual ESLint configuration to use a custom ESLint package and configuration.

   See Activating and configuring ESLint in JetBrains Rider for details.

Example of .eslintrc structure (ESLint 1.x with react plugin)

1. In the ecmaFeatures object, add "jsx" = true. Here you can also specify additional language features you’d like to use, for example ES6 classes, modules, and so on.

2. In the plugins object, add react.

3. In the rules object, you can list ESLint built-in rules that you would like to enable, as well as rules available via the react plugin.

   {
     "parser": "babel-eslint",
     "env": {
       "browser": true,
       "es6": true,
       "jest": true
     },
   
     "rules": {
       "arrow-parens": ["error", "as-needed", {
         "requireForBlockBody": true
       }],
       "react/jsx-props-no-spreading": "off",
       "react/jsx-sort-props": ["error", {
         "reservedFirst": ["key"]
       }],
       "react/require-default-props": "off",
       "react/sort-prop-types": "error",
       "react/state-in-constructor": ["error", "never"],
       "semi-spacing": "warn"
     },
     "overrides": [
       {
         "files": [
           "sample/**",
           "test/**"
         ],
         "rules": {
           "import/no-unresolved": "off"
         }
       }
     ]
   }

Learn more about ESLint and react plugin configuration from the ESLint official website.

1. Place the caret within the component name and press Ctrl+R, R or select Refactor | Rename from the main menu of from the context menu.

2. Specify the new component name in compliance with React naming conventions.

1. Place the caret within the name of the state value and press Ctrl+R, R or select Refactor | Rename from the main menu of from the context menu.

2. Specify the new value name and press Enter. The focus moves to the setter where the new name of the value is suggested. Press Enter to accept the suggestion.

1. Select the code you want to extract and choose Refactor | Extract Component from the context menu.

   Alternatively, go to Refactor | Extract/Introduce | Extract Component on the main menu or press Ctrl+Shift+R and select Extract Component from the popup.

2. In the dialog that opens, specify the name of the new component and its type. By default, a functional component is created. If you want to define the new component as a class, select Class.

3. Click OK. The new component will be defined next to the existing one and used in it.

4. Optionally: use the Move Symbol refactoring to move the new component and all the required imports to a separate file.

5. Optionally: modify the code templates that JetBrains Rider uses for new components. In the Settings/Preferences dialog (Ctrl+Alt+S), go to Editor | File and Code Templates, open the Code tab, and update the templates as necessary using the Apache Velocity template language.

• Place the caret anywhere inside the function to convert and select Refactor | Convert to Class Component from the main menu or from the context menu.

• Alternatively, press Ctrl+Shift+R and select Convert to Class Component from the popup.

• Place the caret anywhere inside the class to convert and select Refactor | Convert to Functional Component from the main menu or from the context menu.

• Alternatively, press Ctrl+Shift+R and select Convert to Functional Component from the popup.

1. Select the npm start run configuration from the list on the toolbar and click next to the list.

   Alternatively, run npm start in the Terminal Ctrl+` or double-click the start task in the npm tool window (View | Tool Windows | npm).

2. Wait till the application is compiled and the Webpack development server is ready.

   The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:3000/. Click this link to view the application.

   

1. Set the breakpoints in your code.

2. Start the application in the development mode as described above and wait till the application is compiled and the development server is ready.

3. Select the autogenerated Debug Application configuration from the list and click next to the list.

   

   Gif

Debug applications running on localhost

1. Set the breakpoints in your code.

2. Start the application in the development mode as described above and wait till the application is compiled and the Webpack development server is ready.

3. The Run tool window or the Terminal shows the URL at which your application is running, by default it is http://localhost:3000/. Hold Ctrl+Shift and click this URL link. JetBrains Rider starts a debugging session with an automatically generated Debug Application configuration of the type JavaScript Debug.

   

   Gif

Debug applications running on custom URLs

1. Set the breakpoints in your code.

2. Start the application in the development mode as described above and wait till the application is compiled and the Webpack development server is ready.

3. The Run tool window or the Terminal shows the URL at which your application is running. Copy this URL address, you will later specify it in a debug configuration. To view your application, just click the link.

4. Create a JavaScript Debug configuration. To do that, go to Run | Edit Configurations on the main menu, click , and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog, paste the saved URL in the URL field and save the configuration.

5. To launch your newly created configuration, select it from the list of configurations and click next to the list.