Can you automatically add Angular imports in VS Code?

Question

For example, I have a module and in that template I want to use a Angular-Material component:

<mat-expansion-panel hideToggle>
  <mat-expansion-panel-header>
    <mat-panel-title>
      This is the expansion title
    </mat-panel-title>
    <mat-panel-description>
      This is a summary of the content
    </mat-panel-description>
  </mat-expansion-panel-header>
  <p>This is the primary content of the panel.</p>
</mat-expansion-panel>

I get the following error: 'mat-expansion-panel' is not a known element which I can manually fix by adding the components' module to the imports array of my module.

I want to know if there is an automatic way of finding those imports in VS Code, as WebStorm did that for me as well?

@rioV8 That is still a pretty unnecessary comment. I came to StackOverflow to ask if there IS an existing one, because I didn't find one. To say "do you want us to search for you" defeats the whole point of SO where people ask questions and other people answer them if they know the answer to that question. There is no easy way to find an extension that does this, so some user might eventually know an extension and answer this question here. Until then there is no answer. — MauriceNino
– MauriceNino, Commented Feb 16, 2021 at 15:44

rioV8 · Accepted Answer · 2021-03-08 16:21:21Z

2

I have written an extension that might help in adding these Quick Fixes: My Code Actions

Add this to your settings (you have to modify parts because I don't know Angular)

"my-code-actions.actions": {
    "[angular]": {
      "add components module": {
        "text": "import components\n",
        "diagnostics": ["is not a known element"]
      }
    }
  }

Edit

In v0.2.0 you can specify the file to modify and the location in the file:

If needed you can specify the location for the "construct import" action.

  "my-code-actions.actions": {
    "[javascript]": {
      "construct import": {
        "diagnostics": ["is not a known element"],
        "file": "config.js",
        "text": "import = []"
      },
      "add components to import": {
        "diagnostics": ["is not a known element"],
        "file": "config.js",
        "action": "replace",
        "replaceFind": ["import\\s*=\\s*\\[", "(\\s*\\])"],
        "text": ", components$1"
      }
    }
  }

Edit

In v0.4.0 you can specify multiple edits for a particular action:

You have to build the needed parts in case they are missing in the target file.

  "my-code-actions.actions": {
    "[typescript]": {
      "Add {{diagLookup:0}} to imports": {
        "diagnostics": ["'(.*?)' is not a known element"],
        "file": "{{lookup:appName}}.module.ts",
        "edits": [
          {
            "where": "afterLast",
            "insertFind": "^import",
            "text": "import { {{diagLookup:0}} } from '{{diagLookup:1}}';\n",
            "needsContinue": "nextCondFail"
          },
          {
            "condFind": "{{lookup:NgModuleStart}}",
            "where": "afterLast",
            "insertFind": "^import",
            "text": "@NgModule({ imports: [ {{diagLookup:0}} ] });\n",
            "needsContinue": false
          },
          {
            "condFind": ["{{lookup:NgModuleStart}}", "{{lookup:importsStart}}"],
            "condFindStop": "{{lookup:NgModuleEnd}}",
            "action": "replace",
            "replaceFind": ["{{lookup:NgModuleStart}}", "({{lookup:NgModuleEnd}})"],
            "text": ", imports: [ {{diagLookup:0}} ]\n$1",
            "needsContinue": false
          },
          {
            "action": "replace",
            "replaceFind": ["{{lookup:NgModuleStart}}", "{{lookup:importsStart}}", "(\\s*\\])"],
            "text": ", {{diagLookup:0}}$1"
          }
        ]
      }
    }
  },
  "my-code-actions.diagLookup": {
    "mat-expansion-panel": ["MatExpansionModule", "@angular/material/expansion"]
  },
  "my-code-actions.lookup": {
    "appName": "app",
    "NgModuleStart": "@NgModule\\(\\{",
    "NgModuleEnd": "\\}\\)",
    "importsStart": "imports\\s*:\\s*\\["
  }

If you define this in the User settings you can specify/overrule the appName in the Folder/Workspace setting .vscode/settings.json

  "my-code-actions.lookup": {
    "appName": "nextWinner"
  }

Here only the strings needed for mat-expansion-panel are added. Adding different modules is easy.

Maybe in a next version these types of settings for different Frameworks/Languages can be part of the extension.

edited Mar 8, 2021 at 16:21

answered Feb 16, 2021 at 15:44

rioV8

29.7k4 gold badges48 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Marco Over a year ago

The thing to include is in another file, in a specific array. Is that possible with this plugin ?

rioV8 Over a year ago

@Marco The WorkspaceEdits allow to change a different file, I don't know if that has to be open in a different tab or that it will change the file on disk. I will try and add a possibility to find-replace with capture groups

rioV8 Over a year ago

@Marco in v0.2.0 I have added a few features that makes it possible to change a different file. Can you correct the example or point me to a web page describing this insert components

rioV8 Over a year ago

@Marco This means you have to do multiple edits of the file **.module.ts, first add import {MatExpansionModule} from '@angular/material/expansion'; and then add that name to the @NgModule metadata imports imports: [ BrowserModule, MatExpansionModule ],

rioV8 Over a year ago

@Marco in v0.4.0 you can add multiple edits and make a generic Angular action.

|

Collectives™ on Stack Overflow

Can you automatically add Angular imports in VS Code?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related