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"]
}

基本介绍

• 通俗作用——提高在写项目时舒适度的
• 如果开发的项目根目录下没有 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"]
}

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.1、index.vue

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

const app = createApp(App)
setupVab(app)

1.2、library/index.ts

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

#/路径的使用

2.1、index.vue

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

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
}

@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')

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
    }
  }
}

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"
  ]
}

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": []
}

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

compilerOptions选项配置