preface

❝

When we develop Vue or React projects, every time after configuring the path alias, there is no corresponding intelligent path when entering the path. How to solve this problem?

The author usually uses vscode, this time uses vscode to demonstrate the solution

❞


Solution 1: Path-alias plug-in

❝

As the saying goes, “To do a good job, we must first sharpen their tools.” So “is there a plug-in for our different projects every time we enter a path alias”, there is a relevant path prompt?

The answer is: of course there is, and almost zero configuration oh, let’s look at the following 👇

❞

Effect not installed

  • No path alias intelligence prompt,vscodeThe path alias you configured is not recognized by default

Installation effects and functions

  • invscodePlugin store search and install:path-alias
  • It’s not just roadsPath alias smart tip, you can also“Click the path alias to jump to the file“
  • See the following feature demo 👇

  • And “support for importing functions or variables from aliases”, “with related intelligent tips”

Selective configuration

  • We said zero configuration before the election, how soon to hit the face? 😥

  • Of course, unlock more functions, or need a certain configuration, very simple oh 😎

  • Back to business: Because the path-alias plug-in only default configures the path @ to map to the project’s SRC directory

    • When you need to have more path aliases have a corresponding map with intelligent hints, can only configure it, is also very simple, do not panic

    • Go to your VScode settings.json file

      • If you don’t knowsettings.jsonWhere can the file enter Settings by right plug-in key, as shown in 👇 figure

  • Add the following 👇

// There will be "smart tips" when using path aliases when developing projects
"pathAlias.aliasMap": {
  / / the key is you to define an alias | using ${CWD} instead of absolute path to the current working directory
  "@": "${cwd}/src".  "~": "${cwd}/src". "components": "${cwd}/src/components" }, Copy the code
  • This is the path inputcomponent “There will also be smart hints“
Intelligent information about path alias

A little flaw

  • Of course, there is no perfect plug-in, the disadvantage is: the memory is a little high, the author recently also in maintenance

  • Json or tsconfig.json. If you don’t want to configure a smart reminder for the path alias of jsconfig.json or tsconfig.json every time you create a project, use this plugin directly

  • Jsconfig. json (👀) is recommended if the memory footprint is too high


Scheme 2: JsConfig

jsconfig.json

  • Create a new folder under your project root:jsconfig.isonfile
  • Small recommended memory 👇, copy the following into your file, revscodeCan be
{
  "compilerOptions": {
    "experimentalDecorators": true.    "baseUrl": ". /".    "paths": {
 "@ / *": ["src/*"]. "components/*": ["src/components/*"]. "assets/*": ["src/assets/*"]. "views/*": ["src/views/*"]. "common/*": ["src/common/*"]. }  },  "exclude": ["node_modules"."dist"] } Copy the code


To summarize

  • If you do not care about the memory usage, you are advised to use it directlypath-aliasThe plug-in
  • It is recommended if you are running out of native memory or if you don’t feel comfortable using this plug-injsconfig.json

This article is formatted using MDNICE