IntellJ + React | getting around *

Shortcuts for everything

In IntelliJ IDEA, you have shortcuts for nearly every action, including selection and switching between the editor and various tool windows.

Use the most useful shortcuts to invoke frequent actions without switching your focus from the editor and tune your keymap to assign custom shortcuts for your favorite commands.

Watch this video to learn about some of the most useful shortcuts:

Navigation and search

IntelliJ IDEA provides quick navigation not only inside source code files but also throughout the entire project.

One of the most useful shortcuts that is worth remembering is double Shift that brings up the Search Everywhere dialog: start typing and IntelliJ IDEA will look for your search string among all files, classes, and symbols that belong to your project, and even among the IDE actions.

Gif

Here are some of the most useful navigation shortcuts:

See Source code navigation for more hints on how to navigate through the source code, and learn the most useful shortcuts that help you quickly switch between the editor and various tool windows, switch focus, jump to the Navigation bar, and so on.

Recent files and locations

Normally, you work with a small subset of files at a time and need to switch between them quickly. The Recent Files action is a real time-saver here. Press ⌘E to see a list of last accessed files. Note that you can also use this action to open any tool window:

Apart from jumping to a recent file, you can also get quick access to Recent Locations– that is code snippets you last viewed or edited. Press ⇧⌘E and you’ll be able to jump to a particular line you modified lately:

File structure

Press ⌘F12 to open the file structure popup that gives you an overview of all elements used in the current file and lets you jump to any of them:

Alternatively, use the Structure tool window ⌘7

Find action

If you don’t remember the shortcut or the menu path for an action you want to use, press ⇧⌘A and start typing the action name:

Coding assistance

Code completion

IntelliJ IDEA helps you speed up the coding process by providing context-aware code completion.

• Basic completion helps you complete the names of classes, methods, fields, and keywords within the visibility scope:

• Smart completion suggests the most relevant symbols applicable in the current context when IntelliJ IDEA can determine the appropriate type:

For more information on the different types of code completion available in IntelliJ IDEA with examples and productivity tips, see Code completion.

Refactorings

IntelliJ IDEA offers a comprehensive set of automated code refactorings that lead to significant productivity gains. For example, when you rename a class, the IDE will update all references to this class throughout your project.

You don’t even need to bother to select anything before you apply a refactoring. IntelliJ IDEA is smart enough to figure out which statement you’re going to refactor, and only asks for confirmation if several choices are possible. Just press ⌃T to open a list of refactorings available in the current context:

See section Refactoring code for a full list of available refactorings with usages scenarios and the before and after examples.

Learn some of the most useful refactoring shortcuts:

Action	Shortcut
Refactor this	⌃T
Rename	⇧F6
Extract variable	⌥⌘V
Extract field	⌥⌘F
Extract a constant	⌥⌘C
Extract a method	⌥⌘M
Extract a parameter	⌥⌘P
Inline	⌥⌘N
Copy	F5
Move	F6

Static code analysis

IntelliJ IDEA provides a set of inspections that are built-in static code analysis tools. They help you find potential bugs, locate dead code, detect performance issues, and improve the overall code structure.

Inspections not only tell you where a problem is but also provide quick fixes that help you deal with it right away. Click the red bulb next to the highlighted code, or press ⌥⏎ to choose a fix:

Gif

Apart from quick-fixes, IntelliJ IDEA also provides intention actions that help you apply automatic changes to code that is correct. For example, you can inject a language, add Java annotations, add JavaDoc, convert HTML or XML tags, and much more. To view a full list of intention actions, in the Settings/Preferences dialog ⌘,, go to Editor | Intentions.

Code generation

IntelliJ IDEA provides multiple ways to generate common code constructs and recurring elements, which helps you increase productivity by delegating routine tasks to the IDE. This includes generating code from predefined or custom code templates, generating wrappers, getters and setters, automatic pairing of characters, and more. Press ⌘N to open a popup with the available constructs you can generate from your caret position. See Generate code for more detail.

Integration with developer tools

Apart from providing smart navigation and coding assistance, IntelliJ IDEA integrates the essential developer tools and lets you debug, analyze, and version the code base of your applications from within the IDE.

Debugger

IntelliJ IDEA provides a built-in JVM debugger. It lets you get and analyze runtime information, which is useful for diagnosing issues and getting a deeper understanding of how a program operates. It enables you to:

• Suspend the program execution to examine its behavior using breakpoints. Multiple types of breakpoints, together with conditions and filters, allow you to specify the exact moment when an application needs to be paused.

• Play with the program state by modifying variable values, evaluate expressions, and so on.

• Examine variable values, call stacks, thread states, and so on.

• Control the step-by-step execution of the program.

See Tutorial: Debug your first Java application to learn the basics of debugging and play with the debugger features in the IDE.

Profiler

IntelliJ IDEA provides the following built-in profiler tools that let you explore which methods consume most CPU time, thus helping you detect the most expensive methods and understand exactly how they behave:

• The Async Profiler: a tool for Linux and macOS that lets you see how exactly memory and CPU resources are allocated in your application.

• The Java Flight Recorder: a multi-platform tool that collects the information on events at a particular moment in time in a Java Virtual Machine when executing an application.

Terminal

IntelliJ IDEA includes a built-in terminal for working with a command-line shell from inside the IDE. For example, if you’re used to executing Git commands from the command line, you can run them from the Terminal instead of invoking these actions from the menu.

The Terminal runs with your default system shell, but it also supports a number of other shells, such as cmd.exe, bash, sh, and so on.

Build tools

IntelliJ IDEA comes with a fully-functional Gradle and Maven integration that allows you to automate your building process, packaging, running tests, deployment, and other activities.

When you open an existing Gradle or Maven project or create a new one, IntelliJ IDEA detects and automatically downloads all the required repositories and plugins, so you virtually don’t need to configure anything and can focus solely on the development process. You can edit build.gradle and pom.xml files directly from the editor and configure the IDE to automatically sync all changes to the build configurations.

For instructions on how to work with Gradle and Maven projects in IntelliJ IDEA, see Gradle and Maven.

Version Control

IntelliJ IDEA provides integration with the most popular version control tools: Git, Mercurial, Perforce, and Subversion.

You can review the history of your entire project or separate files, compare file versions, manage branches, and even process GitHub pull requests without leaving the IDE.

You can quickly access all VCS actions from the VCS operations popup ⌃V:

See Version control for instructions on how to configure integration with your VCS and perform the VCS-related operations.

Local History

Even if no version control is enabled for your project yet, you can still keep track of modifications to your project, and restore deleted files or separate changes with Local History. It acts as your personal version control system that automatically records your project’s revisions triggered by various events as you edit code, run tests, deploy applications, and so on.

What’s next

Watch this video tutorial to get started with IntelliJ IDEA

 

Create your first Java application in IntelliJ IDEA

Learn the most useful tips for writing code in IntelliJ IDEA:

Get Started with Android development in IntelliJ IDEA.

Navigate through a React application

Besides the basic navigation, IntelliJ IDEA helps you jump between React-specific code elements.

• To jump to the declaration of a method or a JavaScript expression inside curly braces {}, select the method or expression and press ⌘B.

• To jump to the declaration of a component, select the component name and press ⌘B. Learn more from Go to declaration and its type.

• To view component definition, press ⌥Space.

• To view quick documentation for a component, press F1. Learn more from JavaScript documentation look-up.

• IntelliJ IDEA lets you easily navigate through JSX tags using breadcrumbs and colorful highlighting for the tag tree in the editor gutter. See Navigating with breadcrumbs for details.

Lint a React application

All the IntelliJ IDEA built-in code inspections for JavaScript and HTML also work in JSX code. IntelliJ IDEA alerts you in case of unused variables and functions, missing closing tags, missing statements, and much more.

For some inspections IntelliJ IDEA provides quick-fixes, for example, suggests adding a missing method. To view the quick-fix popup, press ⌥⏎.

To customize the list of inspections, open the Settings/Preferences dialog ⌘,, go to Editor | Inspections, and disable the inspections you don’t want to see or change their severity levels. Learn more from Disable and suppress inspections and Change inspection severity.

ESLint

Besides providing built-in code inspections, IntelliJ IDEA also integrates with linters, such as ESLint, for JSX code. ESLint brings a wide range of linting rules that can also be extended with plugins. IntelliJ IDEA shows warnings and errors reported by ESLint right in the editor, as you type. With ESLint, you can also use JavaScript Standard Style as well as lint your TypeScript code.

See ESLint for details.

To have ESLint properly understand React JSX syntax, you need eslint-plugin-react. With this plugin, you are warned, for example, when the display name is not set for a React component, or when some dangerous JSX properties are used:

If you created your application with create-react-app, your development environment is already preconfigured to use ESLint.

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 ⌘,, go to Languages and Frameworks | JavaScript | Code Quality Tools | ESLint, and select Automatic ESLint configuration. IntelliJ IDEA 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 IntelliJ IDEA 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
       }
   ,
       "ecmaFeatures"
   :
       {
           "jsx"
       :
           true
       }
   ,
       "plugins"
   :
       [
           "react"
       ],
               "rules"
   :
       {
           "semi"
       :
           2
       }
   }

   Copied!

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

Code refactoring in a React application

Besides the common IntelliJ IDEA refactorings, in a React application you can also run Rename for React components and use Extract Component to create new components.

Rename a component

Below is an example of renaming a component that is defined and used in only one file:

Gif

In the same way, you can rename components defined in one file and then imported to another file using a named export:

Gif

1. Place the caret within the component name and press ⇧F6 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.

Extract a component

You can create a new React component by extracting the JSX code from the render method of an existing component. The new component can be defined as a function or as a class, see Function and Class Components on the React official website.

Gif

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 ⌃T 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 IntelliJ IDEA uses for new components. In the Settings/Preferences dialog ⌘,, go to Editor | File and Code Templates, open the Code tab, and update the templates as necessary using the Apache Velocity template language.

Convert a function to a class component

With the Convert to Class Component refactoring, IntelliJ IDEA generates a ES6 class with the name of the function which you want to convert. This class extends React .Component and contains a render() method where the function body is moved. Learn more from the React official website.

Gif

• 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 ⌃T and select Convert to Class Component from the popup.

Convert a class to a functional component

With the Convert to Functional Component refactoring, IntelliJ IDEA generates a function with the name of the class which you want to convert and moves the contents of the render() method to the function body.

Gif

• 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 ⌃T and select Convert to Functional Component from the popup.

Destructuring in a React application

Destructuring lets you easily unpack values from arrays and objects into variables. This functionality has a very concise syntax that is often used when you need to pass data in your application.

When working with React class components, consider using the Introduce object/array destructuring intention action. Learn more from Destructuring in JavaScript.

Gif

Run and debug a React application

The recommended way to start building a new React single page application is Create React App. Only in this case your development environment is preconfigured to use webpack and Babel. Otherwise, you need to configure a build pipeline first.

For applications created with Create React App as described above, IntelliJ IDEA generates two run/debug configurations with default settings:

• An npm configuration with the default name npm start. This configuration runs the npm start command that launches the development server and starts your application in the development mode.

• A JavaScript Debug configuration with the default name Debug Application. This configuration launches a debugging session.

Run a React application

Only for applications created with create-react-app.

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 ⌥F12 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.

Thanks to the Webpack Hot Module Replacement, when the development server is running, your application is automatically reloaded as soon as you change any of the source files and save the updates.

Debug a React application

Only for applications created with create-react-app.

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

You can start a debugging session in different ways depending on where your application is running.

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 ⌘⇧ and click this URL link. IntelliJ IDEA 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.

When the first breakpoint is hit, switch to the Debug tool window and proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.

Build a React application

You need to set up the build process if you installed React in an existing IntelliJ IDEA project. Learn about various ways to configure a build pipeline for your React application from React official website.

If you created your application with create-react-app your development environment is already preconfigured to use Webpack and Babel.

Test a React application

You can run and debug Jest tests in React applications created with create-react-app. Before you start, make sure the react-scripts package is added to the dependencies object of your package.json.

You can run and debug Jest tests via a run/debug configuration, or right from the editor, or from the Project tool window, see Jest for details.

Create a Jest run/debug configuration

1. Open the  in the left-hand pane, and select Jest from the list. The Run/Debug Configuration: Jest dialog opens.

   Alternatively, select a test file in the Project tool window and select Create <filename> from the context menu.

2. Specify the Node interpreter to use and the working directory of the application. By default, the Working directory field shows the project root folder. To change this predefined setting, specify the path to the desired folder or choose a previously used folder from the list.

3. In the Jest package field, specify the path to the react-scripts package.

4. In the Jest options field, type --env=jsdom.

Run tests

1. Select the Jest run/debug configuration from the list on the main toolbar and click   to the right of the list.

2. The test server starts automatically without any steps from your side. View and analyze messages from the test server in the Run tool window.

3. Monitor test execution and analyze test rest=ults in the Test Runner tab of the Run tool window, see Explore test results for details.

Debug tests

1. Select the Jest run/debug configuration from the list on the main toolbar and click   to the right of the list.

2. In the Debug tool window that opens, proceed as usual: step through the tests, stop and resume test execution, examine the test when suspended, run JavaScript code snippets in the Console, and so on.

Known limitations

When you open an application during a debugging session for the first time, it may happen that some of the breakpoints in the code executed on page load are not hit. The reason is that to stop on a breakpoint in the original source code, IntelliJ IDEA needs to get the source maps from the browser. However the browser can pass these source maps only after the page has been fully loaded at least once. As a workaround, reload the page in the browser yourself.

Building a module dependency diagram

• Choose Diagrams | Show Diagram from the context menu of a JavaScript, TypeScript, or HTML file or on a context menu of a folder.

  The action is not available for node_modules and for Excluded folders.

Analyzing a module dependency diagram

WebStorm analyzes the import and require statements and script tags in the selected file or in all the files in the selected folder recursively and in a separate tab displays a diagram that shows how these files depend on each other:

• A diagram consists of a number of rectangles. Each of them shows the name of the analyzed selected file and a list of detected imports. If an import is resolved, an icon that indicates the type of the imported symbol (e.g. or ) is shown next to it.
• An arrow from an analyzed file points at the target file from which the detected imports are made. If the target file is a library, its name is displayed on the grey background. If an import from a library is not resolved, the target file is displayed as a grey rectangle with red border.
• Resolved imports and exports are marked with the or icons respectively.

Navigating from the diagram to the source code

• To jump from a diagram to a file, right-click the file and choose Jump to source on the context menu.
• To navigate to a specific import statement in the source code, right-click the required file in the diagram, choose Jump to on the context menu, and then choose the symbol to jump to from the Select Navigation Target list:

   

• Module Dependency Diagrams
• Building a module dependency diagram
• Analyzing a module dependency diagram
• Navigating from the diagram to the source code

Debug JavaScript in Chrome

Last modified: 26 May 2021

WebStorm provides a built-in debugger for your client-side JavaScript code that works with Chrome. The video and the instructions below walk you through the basic steps to get started with this debugger.

 

 

 

Before you start

1. Make sure the JavaScript and TypeScript and JavaScript Debugger required plugins are enabled on the Settings/Preferences | Plugins page, tab Installed, see Managing plugins for details.
2. Configure the built-in debugger as described in Configuring JavaScript debugger.

   To have the changes you make to your HTML, CSS, or JavaScript code immediately shown in the browser without reloading the page, activate the Live Edit functionality. See Live Edit in HTML, CSS, and JavaScript for details.

Debug an application that is running on the built-in server

WebStorm has a built-in web server that can be used to preview and debug your application. This server is always running and does not require any manual configuration. All the project files are served on the built-in server with the root URL http://localhost:/, with respect to the project structure.

Start debugging

1. Set the breakpoints in the JavaScript code, as required.
2. Open the HTML file that references the JavaScript to debug or select the HTML file in the Project tool window.
3. From the context menu of the editor or the selection, choose Debug <HTML_file_name>. WebStorm generates a debug configuration and starts a debugging session through it. The file opens in the browser, and the Debug tool window appears.
   

    

   To save the automatically generated configuration for further re-use, choose Save <HTML_file_name> from the context menu after the debugging session is over.

4. In the Debug tool window, proceed as usual: step through the program, stop and resume the program execution, examine it when suspended, view actual HTML DOM, run JavaScript code snippets in the Console, and so on..

 

By default, a debugging session starts in a new window with a custom Chrome user data. To open a new Chrome instance with your familiar look-and-feel, configure Chrome in WebStorm to start with your user data, see Starting a debugging session with your default Chrome user data for details.

Example

Suppose you have a simple application that consists of an index.html file and an index.js file, where index.html references index.js. To start debugging this application using the built-in server, open index.html in the editor and choose Debug ‘index.html’ from the context menu:

WebStorm creates a run/debug configuration automatically, and a debugging session starts:

To restart the new run/debug configuration, click in the upper right-hand corner of the WebStorm window or choose Run | Debug from the main menu:

Debug an application that is running on the localhost in the development mode

If your application is running in the development mode on localhost, you can start debugging it from the built-in Terminal (⌥F12 ), from the Run tool window, or from the Debug tool window. Just hold ⌘⇧ and click the URL at which the application is running.

Gif

1. Set the breakpoints in your code.
2. Start the application in the development mode, for example, using an npm script.
3. The Run tool window or the Terminal shows the URL at which your application is running. Hold ⌘⇧ and click this URL link. WebStorm starts a debugging session with an automatically generated configuration of the type JavaScript Debug.

This also works for debugging Vue.js, Angular, React, and Node.js applications.

Debug an application that is running on an external web server

Often you may want to debug client-side JavaScript running on an external development web server, for example powered by Node.js.

1. Set the breakpoints in the JavaScript code, as required.
2. Run the application in the development mode. Often you need to run npm start for that.

   When the development server is ready, copy the URL address at which the application is running in the browser – you will need to specify this URL address in the run/debug configuration.

3. Create a debug configuration of the type JavaScript Debug: from the main menu, select Run | Edit Configuration, click on the toolbar and select JavaScript Debug from the list. In the Run/Debug Configuration: JavaScript Debug dialog that opens, specify the URL address at which the application is running. This URL can be copied from the address bar of your browser as described in Step 2 above. Click OK to save the configuration settings.
4. Select the newly created configuration from the Select run/debug configuration list on the toolbar and click next to the list. The URL address specified in the run configuration opens in the browser and the Debug tool window appears.
5. In the Debug tool window, proceed as usual: step through the program, stop and resume the program execution, examine it when suspended, view actual HTML DOM, run JavaScript code snippets in the Console, and so on..

See Debugging React Applications and Debugging Angular Applications for examples.

Debug asynchronous code

WebStorm supports debugging asynchronous client-side JavaScript code. WebStorm recognizes breakpoints inside asynchronous code, stops at them, and lets you step into such code. As soon as a breakpoint inside an asynchronous function is hit or you step into asynchronous code, a new element Async call from <caller> is added in the Frames pane of the Debugger tab. WebStorm displays a full call stack, including the caller and the entire way to the beginning of the asynchronous actions.

The image below shows an example of a JavaScript debugging session.

The debugger stops at line3(breakpoint), then at line5(breakpoint). On clicking Step into, the debugger will stop at line5 (on function ), then will move to line6.

 

The asynchronous debugging mode is turned on by default. To disable asynchronous stack traces, set js.debugger.async.call.stack.depth in Registry to 0.

Debug workers

WebStorm supports debugging Service Workers and Web Workers. WebStorm recognizes breakpoints in each worker and shows the debug data for it as a separate thread in the Frames pane on the Debugger tab of the Debug tool window.

Note that WebStorm can debug only dedicated workers, debugging for shared workers is currently not supported.

1. Set the breakpoints in the Workers to debug.
2. If you are using Service Workers, make sure the Allow unsigned requests checkbox on the Debugger page is selected. Otherwise your service workers may be unavailable during a debug session:
3. Create a debug configuration of the type JavaScript Debug as described above in Debugging client-side JavaScript running on an external web server.
4. Select the newly created configuration from the Select run/debug configuration list on the toolbar and click Debug .

   The HTML file specified in the run configuration opens in the chosen browser and the Debug tool window opens with the Frames list showing all the Workers:

   To examine the data (variables, watches, and so on) for a Worker, select its thread in the list and view its data in the Variables and Watches panes. When you select another Worker, the contents of the panes are updated accordingly.

5.  

Invalidate caches

Last modified: 13 May 2021

IntelliJ IDEA caches a great number of files for all projects that you have even worked with in this IDE version, therefore the system cache may become overloaded. Sometimes the caches will never be needed again, for example, if you work with frequent short-term projects.

When you invalidate the cache, IntelliJ IDEA removes the cache files for all project even run in the current version of the IDE. The files will be recreated the next time you open these projects. The IDE also rebuilds the projects if they are built with the native IntelliJ IDEA builder.

Note the following before you proceed:

• The caches will not be deleted until you restart IntelliJ IDEA.
• Opening and closing a project without invalidating the cache does not result in deleting any files.
• Local History is not deleted when you invalidate the cache unless you explicitly enable this option in the Invalidate Caches dialog. However, mind that Local History has a retention period of 5 working days by default.

Clear the system cache

1. From the main menu, select File | Invalidate Caches.

2. In the Invalidate Caches dialog, you can select additional actions that the IDE will perform while removing the cache files:

   • Clear file system cache and Local History: remove the virtual file system cache together with the information stored in Local History.

     This action might be helpful for troubleshooting purposes when the usual cache invalidation is not enough to solve the problem.

   • Ask before downloading new shared indexes: show a notification prompting you to download new shared indexes as they become available.

     Enabling this option also updates your settings for shared project indexes in Settings/ Preferences | Tools | Shared Indexes.

   • Clear downloaded shared indexes: remove the downloaded shared index files.

3. Click Invalidate and Restart.

   If you click Just restart, cache files won't be deleted, and the selected optional actions won't be applied.

    

   We recommend that you restart the IDE via Find Action: press ⇧⌘A and type Restart IDE.

For details on where various user-specific files are stored, see Default IDE directories.