使用jsDoc和jsConfig.json在增强vscode中代码提示_vscode jsdoc

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

jsDoc

jsDoc中的类型定义通过 @typedef {类型type} 类名名 , 指定变量类型通过 @type {类型type} ，类似 ts 中的 as 关键字，其中类型可以使用 ts 中的类型，以及使用一些内置的工具类如 Record 等

如果某个js中没有 export 导出，那么这个js中通过 @typedef 定义的类型，可以直接在其他js文件中通过 @type 使用，如果使用export关键字，那么其他文件要使用该类型，必须通过 @type {import('@/xxx.js').类型} 来使用

疑点：如果两个不同的js，通过@typedef定义了同名的类型，而且没有显式export，那么其他文件使用时

* @typedef {Object} Dragon * @property {string} name 名字 * @property {number} age 年龄这是注释 * @typedef { {name:string,age:number,c:number}} Dragon export {} // 使用了export，其他文件使用该文件的类型必须import

类型导入使用

/** @type {import('@/a.js').Dragon} */ 表明test变量是a.js里的Dragon类型
const test = {}
可以通过ts中的类型定义来快速定义一个对象的类型
 
  
 * @typedef {object} Dragon
 * @property {string} name
 * @property {number} age
 * @property {number} [height] 可选属性
 * @property  {readonly number} weight
 *@typedef {{name:string,age:number,height?:number,readonly weight:number}} Dragon1
 * @type {Dragon}
const a = {}
泛型类型定义
 
 * @template T
 * @typedef {Object} Container
 * @property {T} value - 任意类型的值
 * @type {Container<number>}
const numberContainer = {}
numberContainer.
 * @type {Container<string>}
const stringContainer = {}
stringContainer.
                                    但是，作为一个混迹于各大项目的前端们，总会遇到一些纯JavaScript项目，这些项目注解不规范，也没考虑后期扩展，VsCode代码提示基本等于没有。那么，在VsCode中，如何为这些纯JavaScript项目添加代码提示呢？本篇文章就来为你解决这个问题
                                    缘起作为前端开发者目前使用最广泛的编程语言 JavaScript，也是有很多的缺点的！大家都直到 JavaScript 是一个弱类型的编程语言，这就造成了一问题，一个变量到底是什么类型的，只能到到程序运行的时候才只能确定！导致我们在写码的时候经常遇到一些关于变量类型的错误！并且当我们使用 vscode 写代码的时候，使用别人提供的 api，代码提示工具提示的非常好，而我们自己使用 js 编写一些函数的时候，往往确发现代码提示的不是很友好！今天我们来学习使用 jsDoc 来解决这个问题。先看下图：我们使用vs
                                    弱类型脚本语言的代码提示功能一直是开发者一个隐隐的痛点，没有它也不是不能干活，但是经常因为出现拼写错误或不经意的修改导致的变量丢失而耗费无畏的时间在与业务逻辑无关的地方。VSCode的出现大有统一轻量级IDE领域之势，在其新版本中自带了JSDoc的解析功能，帮助JavaScript开发者通过书写注释的形式向IDE提供必要信息，完善提示功能...
                                    使用jsdoc generator插件,插件安装后输入/**在代码块上面就可以出现jsdoc的注释代码块了。vscode中js文件想要添加jsdoc怎么快速添加呢?
什么是jsconfig.json？
目录中存在jsconfig.json文件表示该目录是JavaScript项目的根目录。jsconfig.json文件指定根文件和JavaScript语言服务提供的功能选项。
提示：如果您不使用JavaScript，则无需担心jsc...