To get started, add eslint and eslint-plugin-react modules to your project via npm, then add an ESLint configuration file. While ESLint itself understands JSX syntax, authors recommend using eslint-plugin-react if you are working with React. WebStorm integrates with ESLint and allows you to see warnings and errors reported by ESLint right in the editor, as you type. ESLintĮSLint is a linting utility that provides a wide range of linting rules, which can also be extended with plugins. On top of such inspections, you can also use linters like ESLint and JSCS for the JSX code. Disable those you don’t want to see, or change severity level from warning to error or vice versa. You can customize the list of inspections in Preferences | Editor | Inspections. For some inspections WebStorm provides quick-fixes, like add a missing semicolon: Code analysisĪs you may know, WebStorm has a wide range of built-in inspections for JavaScript and HTML, and these inspections also work for JSX code.įor example, WebStorm alerts you in case of unused variables and functions, missing closing tags, missing statements and much more. So right now we’ll focus on linters (code quality tools), refactoring and tools that can help us compile code.

In this area it’s not easy to provide a complete overview as tools are developing at a crazy pace. Now we would like to talk a bit about the tools in the React ecosystem. We recently explored coding assistance that WebStorm provides for React and JSX.

Download phpstorm react plugin