Angular - Webstorm Common Config

Environment:

Webstorm 2018.1.5

Angular CLI: 6.0.8
Node: 10.2.1
OS: darwin x64
Angular: 6.0.6

ES6 style import/export:

SOURCE, SOURCE

In order to get ES6 style import:

import { Component } from '@angular/core’;

instead of

import {Component} from '@angular/core’;

Preferences > Editor > Code Style > TypeScript > Spaces | Within | ES6 import/export braces

Add spaces within interpolation ({{ }}) in html

SOURCE

Preferences > Editor > Code Style > JavaScript > Spaces | Other | Within interpolation expressions

and

Preferences > Editor > Code Style > TypeScript > Spaces | Other | Within interpolation expressions

Typescript import using single quote

SOURCE

Settings/Preferences > Editor | Code Style | TypeScript > "Punctuation" tab | Generated code > use single quotes in new code.

Import scss without relative path

SOURCE

In order to import the global _extend.scss in a structure like this:

\src
    \app
    \assets
    \environments
    \sass
        _extend.scss
        _variable.scss
        color.scss
        common.scss

Use the stylePreprocessorOptions to add the base path to the scss file, open angular.json and add:

"architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/pharmacy-online",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/sass"
              ]
            },
            "scripts": []
          },
          
          ....
        }
      }

So now within your_component.scss you can import the global _extend.scss like this:

//intsead of this
//@import "../../../../../sass/extend";
//you can import like this
@import "_extend";

Now Webstorm will complaint about the import statement. Thus we need to do one extra step - mark the sass directory as Resource Root:

Preferences > Directories > Right click sass > Resource Root

Import Modules, Component, etc without relative path:

SOURCE, SOURCE

In tsconfig.json add the following:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@core/*": [ "app/core/*" ],
      "@index/*": [ "app/index/*" ],
      "@order/*": [ "app/order/*" ],
      "@product/*": [ "app/product/*" ],
      "@shared/*": [ "app/shared/*" ],
      "@user/*": [ "app/user/*" ]
    },
    ...
  }
}

And then enable this:

Preferences > Editor > Code Style > TypeScript | Imports | Use paths relative to tsconfig.json

And now we can import the component like this:

// instead of this mess
// import { BookingManager } from '../../../manager/booking.manager';
// you can do this
import { BookingManager } from 'manager/booking.manager';

Note:

• Doesn't need to config resolve.alias like in the guide.
• If it's not working try to stop ng serve and run again.

Optional: SOURCE, SOURCE, SOURCE

We can create a barrel to help make the import cleaner. For example, we have something like this:

services/
  |--- auth.service.ts
  |--- user.service.ts
  |--- api.service.ts
  |--- index.ts  <--- this is our barrel file

We need to create an index.ts file to re export those services like this:

export * from './api.service';
export * from './user.service';
export * from './auth.service';

And then the service can be import with this:

// instead of this
import { AuthService } from "@core/services/auth.service";

// we can use this
import { AuthService } from "@core/services";