VSCode使用jsconfig.json来支持webpack alias文件导入

当项目越来越庞大时，文件目录层级越来越深，导入文件的代码会越来越长。

代码显得很冗余，很不好看，就像下图这样。

这时候我们会定义webpack的alias，来简化文件路径。这样导入文件时就不用一直 .. .. ..

// vue.config.js
resolve: {
    alias: {
        '~': path.resolve(__dirname, './node_modules/'),
        '@': path.resolve(__dirname, './src'),
        api: path.resolve('./src/api'),
        common: path.resolve('./src/common'),
        components: path.resolve('./src/components'),
        config: path.resolve('./src/config'),
        extend: path.resolve('./src/extend'),
        locale: path.resolve('./src/locale'),
        router: path.resolve('./src/router'),
        store: path.resolve('./src/store'),
        assets: path.resolve('./src/assets'),
        views: path.resolve('./src/views'),
    },
}

但是这样写又会出现一个新问题。别名无法像下图这样自动显示目录里的文件，只能手写目录名，很麻烦。

这时候就可以配置jsconfig.json文件，给别名设置映射的路径，这样使用别名也能自动解析目录。

在项目根目录创建jsconfig.json。

target：指定要使用的默认库，值为 "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext"。

checkJs：启用 JavaScript 文件的类型检查。

baseUrl：解析非相关模块名称的基础目录。

paths：指定相对于 baseUrl 选项计算的路径映射。键值要和别名保持一致。

exclude：排除不需要解析的文件夹，文件路径是相对于 jsconfig.json 的位置。

{
  "compilerOptions": {
    "target": "esnext",
    "checkJs": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./node_modules/*"],
      "@/*": ["./src/*"],
      "api/*": ["./src/api/*"],
      "common/*": ["./src/common/*"],
      "components/*": ["./src/components/*"],
      "config/*": ["./src/config/*"],
      "extend/*": ["./src/extend/*"],
      "locale/*": ["./src/locale/*"],
      "router/*": ["./src/router/*"],
      "store/*": ["./src/store/*"],
      "assets/*": ["./src/assets/*"],
      "views/*": ["./src/views/*"],
    }
  },
  "exclude": ["node_modules", "public", "dist"],
}