VsCode中React或者Vue项目配置别名和别名路径提示

配置路径别名

1. 安装修改CRA配置的包: @craco/craco
2. 在项目根目录下(本文件同级)创建配置文件：craco.config.js,并配置如下内容

import path from 'path'
const {resolve} = path

module.exports = {
  webpack: {
    alias: {
      '@': resolve(__dirname,'src')
    }
  }
}

3. 修改package.json中的脚本命令

 // 将 start/build/test 三个命令修改为 craco 方式
 
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

4. vscode需要路径提示可以安装“ Path Autocomplete ”插件，然后在vscode的编辑器中按住Ctrl+Shift+P，然后输入settings找到首选项：打开设置选项(Preferences：Open Settings(UI)), 找到安装的插件并点击它，随后找到Path Mappings的选项点击“ 在setting.json中编辑”，最后填入下面的配置

"@": "${workspace}/src"

完整如下：

  "path-autocomplete.pathMappings": {
    "@": "${workspace}/src"
  },

5. 现在你只需要在自己的项目根目录下(本文件同级)创建配置文件：jsconfig.json,并配置如下内容

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

6. 至此你就可以快乐的写bug

Vue

vue只需要遵顼上面的 2，4，5的操作就可以， 不过在步骤2.的操作中需要建vue的配置文件(vue.config.js), 因为vue版本不同配置别名的方式也不同,可以google或者度娘