In webstorm often finish pull the alias cannot identify the project after project, can have a try first setting/Languages and Frameworks/JavaScript/Webpack set to Automatically, See if WebStorm can automatically identify the configuration, if not, then refer to the following two methods

Webstorm does not recognize aliases in non-TS projects

  1. Create one under the project rootwebpack.config.js
  2. insetting/Languages & Frameworks/JavaScript/WebpackSet toManuallyThis configuration is then imported

Reference: In WebStorm, configure alias @ to recognize the project alias created by Vue CLI 3


const {resolve} = require('path')

module.exports = {
    resolve: {
        // Handle the path with no suffix
        extensions: ['.js'.'.json'.'.vue'].// This configuration is the same as in vue.config.js
        alias: {
            "@": resolve(__dirname, './src')}}}Copy the code

Alias is not recognized by WebStorm in ts project

  1. intsconfig.jsonAdd configuration to
  2. setting/Languages & Frameworks/JavaScript/WebpackSet toAutomaticallyCan be

How can make TypeScript in WebStorm to parse alias of webpack?

{
  "compilerOptions": {
    "target": "esnext"."module": "esnext"."moduleResolution": "node"."strict": true."jsx": "preserve"."sourceMap": true."resolveJsonModule": true."esModuleInterop": true."lib": ["esnext"."dom"]."types": ["vite/client"].// Here are two lines of code
    // Here are two lines of code
    // Here are two lines of code
    // Put it under compilerOptions
    "baseUrl": "."."paths": {
      "@ / *": ["./src/*"]}},"include": ["src/**/*.ts"."src/**/*.d.ts"."src/**/*.tsx"."src/**/*.vue"]}Copy the code