markdown Angular - Webstorm Common Config

Posted 2021-05-06

# 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](https://intellij-support.jetbrains.com/hc/en-us/community/posts/115000204010-Format-Space-within-braces-for-ES6-import-export), [SOURCE](https://stackoverflow.com/a/33759260/1602807)

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](https://stackoverflow.com/a/49116939/1602807)

```
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](https://stackoverflow.com/a/39779498/1602807)

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

## Import scss without relative path

[SOURCE](https://github.com/angular/angular-cli/wiki/stories-global-styles)

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:

```scss
//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](https://decembersoft.com/posts/say-goodbye-to-relative-paths-in-typescript-imports/), [SOURCE](https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000613964-Typescript-How-to-auto-import-with-absolute-paths-if-baseUrl-is-set-in-tsconfig-json)

In `tsconfig.json` add the following:

```json
{
  "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:

```typecript
// 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](https://stackoverflow.com/a/37564980/1602807), [SOURCE](https://medium.com/@tomastrajan/6-best-practices-pro-tips-for-angular-cli-better-developer-experience-7b328bc9db81),  [SOURCE](https://medium.com/@michelestieven/organizing-angular-applications-f0510761d65a)

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:

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

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