CODEWITHSUNDEEP
angularvisual-studio-code
MauriceNino
MauriceNino

Reputation: 6747

Can you automatically add Angular imports in VS Code?

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?

Upvotes: 3

Views: 1341

Answers (1)

rioV8
rioV8

Reputation: 28663

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.

Upvotes: 2

Related Questions