IntelliJ_IDEA.md

IntelliJ IDEA Configuration

Preface

All screen shots were taken using the MacOS version of IntelliJ IDEA.

To get more information on an option, or, if running on a different OS and are unable to find the corresponding options, search the IntelliJ IDEA documentation.

If using a different IDE, similar options may be available.

NOTE

The project associated paths in the screen shots should be adjusted to the paths used when you downloaded the project into your sandbox.

Table of Contents

1. Gradle
2. Java Code Formatting
3. JavaScript
4. Vue.js
5. ESLint
6. TypeScript
7. TypeScript Formatting
8. Webpack

Gradle

• Install and enable the Plugin.

  

• Use the default wrapper for the current project.

  

• Delegate actions for the current project.

  

• Remove annoying balloon notifications.

  

Java Code Formatting

• Install and enable the Plugin.

  

• Enable the formatter for the current project.

  

IntelliJ Reformat Option

• To use the formatter, select the Reformat Code option from the right-mouse-click menu.

  

  • Be sure that the subsequent dialog options are checked.

    

• When committing code, be sure that all of following Before Commit options are not checked.

  

JavaScript

• Configure the JavaScript language version.

  

VueJS

• Install and enable the Plugin.

  

• Remove annoying warnings on valid HTML empty element tags used in Vue templates.

  

TypeScript

• Enable the TypeScript language service.

Configure your IDE so that it looks similar to the screenshot above.

Windows: The node file will have a .bat extension

Once TypeScript is configured, you can open the TypeScript tool window by selecting it from the Tool Windows menu.

The TypeScript tool window can display any TypeScript errors that are created as you are writing code.

ESLint

Your project's .eslintrc.js file should already be configured to use the Airbnb style guide along with Vue and TypeScript rules.

After your IDE is properly configured, the editor should flag code that does not adhere to the rules. The IDE is able to fix many of these problems for you automatically by selecting the following option from the editor's right-mouse-click menu when editing a TypeScript or JavaScript file. The above option is only visible when editing a TypeScript or JavaScript file, however, the same lint 'fix' process is run automatically whenever you run a yarn task that runs lint from either the command line:

./gradlew yarn_lint

Or from within the IDE:

TypeScript Formatting

Set code punctuation and spacing to use what is expected by the ESLint rules so that IntelliJ will do the right thing when it inserts missing imports and when reformatting code.

For each of the following, configure both Typescript and JavaScript.

The IntelliJ Reformat Option can also be used on Vue components and TypeScript code. However, some of the Vue ESLint plugin enforced standards differ from IntelliJ's, so be sure to run ESLint after running it to ensure that any errant reformats are auto-fixed.

Webpack

Set the following to enable IntelliJ to resolve WebPack path aliases.