vue项目中 jsconfig.json和tsconfig.json文件配置释义 & compilerOptions配置

vue项目中 jsconfig.json和tsconfig.json文件配置释义 & compilerOptions配置

示例

和src同层级

jsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
            "@/*": ["src/*"]
        },
        // 解决prettier对于装饰器语法的警告
        "experimentalDecorators": true,
        // 解决.jsx文件无法快速跳转的问题
        "jsx": "preserve"
    },
    //提高 IDE 性能
    "exclude": ["node_modules", "dist", "build"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

基本介绍

• 通俗作用——提高在写项目时舒适度的
• 如果开发的项目根目录下没有 jsconfig.json，在默认情况下，像 VS Code， 默认只会把 node_modules文件夹排除掉。

当您在工作空间中有一个定义项目上下文的jsconfig.json文件时，JavaScript体验会得到改进。

只要有可能，您应该使用不属于项目源代码的JavaScript文件排除文件夹。

概述

目录中存在tsconfig.json文件表明该目录是 TypeScript 项目的根目录。该tsconfig.json文件指定编译项目所需的根文件和编译器选项。

JavaScript 项目可以使用jsconfig.json文件来代替，它的作用几乎相同，但默认启用了一些与 JavaScript 相关的编译器标志。

• 使用tsconfig.json或jsconfig.json
  • jsconfig.json源于tsconfig.json，是TypeScript的配置文件。
  • jsconfig.json相当于tsconfig.json的“allowJs”属性设置为true

compilerOptions配置

提示: 不要被 compilerOptions 搞糊涂了。 这个属性之所以存在，是因为 jsconfig.json 是 tsconfig.json 的后代，后者用于编译打字稿。

您可以在TypeScript compilerOptions documentation .文档中了解有关可用 compilerOptions 的更多信息。

其中paths选型就是我们解决别名问题的属性，推荐配置如下：

/* 主要作用是vscode导入使用别名时可以自动化提示文件路径 */
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src"],
      "components/*": ["src/components/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"]
    },
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "dist"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

exclude配置

如果您的工作区中没有 jsconfig.json，VS Code 将默认排除 node_modules 文件夹。

下面是一个表格，将常见的项目组件映射到建议排除的安装文件夹:

当你的 JavaScript 项目变得太大而且性能降低时，通常是因为类似node_modules的库文件夹。 如果 VS 代码检测到项目变得太大，它将提示您编辑exclude。

如果 VS 代码检测到项目变得太大，它将提示您编辑exclude。

提示：有时无法正确选择更改配置，例如添加或编辑jsconfig.json文件。 运行Reload JavaScript Project命令应重新加载项目并获取更改。

使用TypeScript编译器进行低级编译

当tsc用于将ES6 JavaScript向下级编译为旧版本时，jsconfig.json中的以下编译器选项适用：

jsconfig.json实例

和src同层级，同在根目录

jsconfig.json

{
    "compilerOptions": {
        "target":"ESNext",
        "module":"ESNext",
        "baseUrl": "./",
        "moduleResolution":"node",
        "allowSyntheticDefaultImports":true,
        "paths": {
            // 解决项目中使用@作为路径别名，导致vscode无法跳转文件的问题
            "~/*": ["*"],
            "@/*": ["src/*"],
            "#/*": ["types/*"],
            "@vab/*": ["library/*"],
            "@gp/*": ["library/plugins/vab"],
        },
        "lib":["esnext","dom","dom.iterable","scripthost",]
    },
    //提高 IDE 性能
    "exclude": ["node_modules", "dist"]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

~/路径的使用

1.1、index.vue

import {createApp} from 'vue'
import {setupVab} from '~/library'

const app = createApp(App)
setupVab(app)
1
2
3
4
5

1.2、library/index.ts

export function setupVab(app:any){
    app.use(createHead())
    app.component('VabIcon',VabIcon)
}
1
2
3
4

#/路径的使用

2.1、index.vue

import {VabRoute} from '/#/router'
const route:VabRoute = useRoute()
1
2

2.2、types/router.d.ts

import type {_RouteLocationBase} from 'vue-router'
import {RouteRecordNormalized} from 'vue-router'

declare interface VabRouteRecordRaw
extends Omit<RouteRecordNormalized,'meta'>{
    meta:VabRouteMeta
}

/**
*useRoute()
*/
declare interface VabRoute extends Omit<_RouteLocationBase,'meta'>{
    meta:VabRouteMeta
    matched:VabRouteRecordRaw[]
    parentIcon?:string
}
    
declare interface VabRouteMeta{
   // 高亮指定菜单
   activeMenu?:string
   // 权限
   guard?:string[] | GuardType
   // 是否隐藏路由
   hidden?:boolean
   // 在新窗口中打开
   target?:'_blank' | false
   title?:string
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

@gp/路径的使用

3.1、index.vue

import { gp } from '@gp'

gp.$baseNotify(
  '检测到新版本，正在下载中，请稍后...',
  '温馨提示',
  'info',
  'bottom-right',
  8000
)

gp.$baseMessage(
  '路由格式返回有误！',
  'error',
  'vab-hey-message-error'
)

gp.$baseNotify(
  `欢迎登录${settingsStore.title}`,
  `${thisTime}！${userInfo.nick_name}`
)

gp.$pub('vab-update')
gp.$baseMessage('系统异常,请联系管理员!', 'error')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

library\plugins\vab.ts

import { loadingText, messageDuration } from '@/config'
import {
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElNotification,
} from 'element-plus'
import mitt from 'mitt'
import _ from 'lodash'
import { globalPropertiesType } from '/#/library'

export let gp: globalPropertiesType

export function setup(app: any) {
  gp = {
    /**
     * @description 全局加载层
     * @param {number} index 自定义加载图标类名ID
     * @param {string} text 显示在加载图标下方的加载文案
     */
    $baseLoading: (index = undefined, text = loadingText) => {
      return ElLoading.service({
        lock: true,
        text,
        spinner: index ? 'vab-loading-type' + index : index,
        background: 'hsla(0,0%,100%,.8)',
      })
    },
    /**
     * @description 全局Message
     * @param {string} message 消息文字
     * @param {'success'|'warning'|'info'|'error'} type 主题
     * @param {string} customClass 自定义类名
     * @param {boolean} dangerouslyUseHTMLString 是否将message属性作为HTML片段处理
     */
    $baseMessage: (
      message,
      type = 'info',
      customClass,
      dangerouslyUseHTMLString
    ) => {
      ElMessage({
        message,
        type,
        customClass,
        duration: messageDuration,
        dangerouslyUseHTMLString,
        showClose: true,
      })
    },
    /**
     * @description 全局Alert
     * @param {string|VNode} content 消息正文内容
     * @param {string} title 标题
     * @param {function} callback 若不使用Promise,可以使用此参数指定MessageBox关闭后的回调
     */
    $baseAlert: (content, title = '温馨提示', callback = undefined) => {
      if (title && typeof title == 'function') {
        callback = title
        title = '温馨提示'
      }
      ElMessageBox.alert(content, title, {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true, // 此处可能引起跨站攻击，建议配置为false
        callback: () => {
          if (callback) callback()
        },
      }).then(() => {})
    },
    /**
     * @description 全局Confirm
     * @param {string|VNode} content 消息正文内容
     * @param {string} title 标题
     * @param {function} callback1 确认回调
     * @param {function} callback2 关闭或取消回调
     * @param {string} confirmButtonText 确定按钮的文本内容
     * @param {string} cancelButtonText 取消按钮的自定义类名
     */
    $baseConfirm: (
      content,
      title,
      callback1,
      callback2,
      confirmButtonText = '确定',
      cancelButtonText = '取消'
    ) => {
      ElMessageBox.confirm(content, title || '温馨提示', {
        confirmButtonText,
        cancelButtonText,
        closeOnClickModal: false,
        type: 'warning',
        lockScroll: false,
      })
        .then(() => {
          if (callback1) {
            callback1()
          }
        })
        .catch(() => {
          if (callback2) {
            callback2()
          }
        })
    },
    /**
     * @description 全局Notification
     * @param {string} message 说明文字
     * @param {string} title 标题
     * @param {'success'|'warning'|'info'|'error'} type 主题样式,如果不在可选值内将被忽略
     * @param {'top-right'|'top-left'|'bottom-right'|'bottom-left'} position 自定义弹出位置
     * @param duration 显示时间,毫秒
     */
    $baseNotify: (
      message,
      title,
      type = 'success',
      position = 'top-right',
      duration = messageDuration
    ) => {
      ElNotification({
        title,
        message,
        type,
        duration,
        position,
      })
    },
    /**
     * @description 表格高度
     * @param {*} formType
     */
    $baseTableHeight: (formType) => {
      let height = window.innerHeight
      const paddingHeight = 291
      const formHeight = 60

      if ('number' === typeof formType) {
        height = height - paddingHeight - formHeight * formType
      } else {
        height = height - paddingHeight
      }
      return height
    },
    $pub: (...args: any[]) => {
      _emitter.emit(_.head(args), args[1])
    },
    $sub: function () {
      // eslint-disable-next-line prefer-rest-params
      Reflect.apply(_emitter.on, _emitter, _.toArray(arguments))
    },
    $unsub: function () {
      // eslint-disable-next-line prefer-rest-params
      Reflect.apply(_emitter.off, _emitter, _.toArray(arguments))
    },
  }

  const _emitter = mitt()
  Object.keys(gp).forEach((key) => {
    app.provide(key, gp[key as keyof typeof gp])
    // 允许vue3下继续使用vue2中的this调用vab方法
    app.config.globalProperties[key] = gp[key as keyof typeof gp]
  })

  if (process.env['NODE_' + 'ENV'] !== `${'deve' + 'lopme' + 'nt'}`) {
    const key = 'vab-' + 'icons'
    if (!__APP_INFO__['dependencies'][key]) {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      app.config.globalProperties = null
    }
    if (!process.env['VUE_' + 'APP_' + 'SECRET_' + 'KEY']) {
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      app.config.globalProperties = null
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

tsconfig.json实例

和src同层级，同在根目录

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "downlevelIteration": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "useDefineForClassFields": true,
    "sourceMap": true,
    "baseUrl": ".",
    "outDir": "./dist",
    "types": [
      "element-plus/global",
      "webpack-env",
      "node"
    ],
    "paths": {
      "~/*": [
        "*"
      ],
      "@/*": [
        "./src/app/science/*"
      ],
      "@src/*": [
        "./src/*"
      ],
      "/#/*": [
        "./types/*"
      ],
      "@vab/*": [
        "./library/*"
      ],
      "@gp": [
        "./library/plugins/vab"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/app/science/**/*.ts",
    "src/app/science/**/*.tsx",
    "src/app/science/**/*.vue",
    "mock/**/*.ts",
    "types/**/*.d.ts",
    "library/**/*.ts",
    "library/**/*.tsx",
    "library/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

tsconfig.json配置说明

tsconfig.json 是typescript对应的编译配置文件

如果直接通过命令tsc index.ts命令编译一个具体ts后缀名文件时，是不会用到tsconfig.json里面的配置的，只有再用命令 tsc 后面不带任何文件时才会使用。

当命令行直接运行tsc时，没有配置tsconfig.json文件，会默认对根目录下的ts文件进行编译

根选项

{
    "compilerOptions": {},
    "files": [
        "core.ts",
        "sys.ts",
        "types.ts"
    ],
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ],
    "extends": "./configs/base",
    "compileOnSave": true,
    "references": []
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• “compilerOptions”,可以被忽略，这时编译器会使用默认值
• “files”,指定一个包含相对或绝对文件路径的列表。
• “references”:新的顶级属性,它是一个对象数组，指定要引用的项目
• “include"和"exclude”,属性指定一个文件glob匹配模式列表。
  * 匹配0或多个字符（不包括目录分隔符）
  ? 匹配一个任意字符（不包括目录分隔符）
  **/ 递归匹配任意子目录
• “extends”,可以让tsconfig.json从另一个配置文件里继承配置属性
• “compileOnSave”,可以让IDE在保存文件的时候根据tsconfig.json重新生成文件。

compilerOptions选项配置