如何编写具有代码提示的代码，如何配置 vscode 的目录别名

[Runtu4378]

本文解决问题 1.如何优化 vscode 的代码提示功能（如结合 webpack 的 alias） 2.如何编写具有代码提示的代码

相关版本 vscode: 1.24.0

---

使用 jsdoc 优化 javascript 的代码提示

jsdoc 是一种通过注释来为 javascript 代码增加代码提示的规范，大概示例如下:

class Dom {
  /**
   * 初始化组件
   * @param {Object} attr 组件的参数
   * @param {string} attr.defaultProps 默认data
   * @param {string} attr.renderFunc 组件的渲染函数
   * @param {string} attr.dataMerge data的后置处理函数
   */
  constructor({
    defaultProps,
    renderFunc,
    dataMerge,
  }) {
    // something...
  }
}

在类 Dom 的构造函数上面的注释就是使用 jsdoc 规范书写的对这个函数的“注释”了，现在很多 IDE 都有内置了对 jsdoc 的支持，体现在能够格式化的显示这个类的内容，函数的参数列表、使用函数时进行自动补全等：

参数列表

自动补全

通过上述操作就能够很直观的将我们写的代码都纳入代码提示里面了

相关链接 Use JSDoc @param 格式文档

---

配置 vscode 的目录别名

实现代码提示之后就可以愉快的撸码了，然而在实际使用中我们可能用到了能够提供文件目录别名的开发工具（如 webpack 的 resolve.alias）,通过别名引入的模块 IDE 一般会因为找不到实际的物理路径而无法初始化代码提示，这里以 vscode 为例，看看怎么为 IDE 配置目录路径别名

首先，在项目文件夹（workspace）的根路径创建 jsconfig.json，关于为什么要创建 jsconfig.json

jsconfig.json 的内容：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "@js/*": ["src/utils/js/*"]
    },
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src"]
}

通过 compilerOptions.paths 的定义就能够告诉 IDE，在寻找文件的时候遇到某些关键字的时候如何识别别名

const DOM = require('@js/dom')

const dom = new DOM({
  // something...
})

定义了 jsconfig.json 之后在上面的代码中就能够正常获取到代码提示啦，如果发现没有生效，可以试下重启 vscode

---

其他链接 Visual Studio Code使用typings拓展自动补全功能

[action-hong]

老哥你配置jsconfig.json后, 路径提示都可以正常使用吗?

为什么我配置后, 只能提示出js文件, 其他.vue, .png 文件都提示不了, 而且.vue文件中也无法使用@别名提示

使用相对路径 import xx from '../../xx' 都可以提示出来

[action-hong]

[Runtu4378]

@action-hong

这个问题我现在解决不了，还在查文档，之前写过 vue 的项目也有遇到，也还没找到比较好的方法进行提示

下面是我找到的相关的资料

https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson https://code.visualstudio.com/docs/languages/jsconfig https://github.com/Microsoft/TypeScript/wiki/JavaScript-Language-Service-in-Visual-Studio

[Runtu4378]

@action-hong

你可以查下 vscod 自带的这个插件 Path Intellisense，我略看了下 这个是比 jsconfig 高级的不针对语言类型的 path 智能感知定义

[Runtu4378]

@action-hong

找到了，用 vscode 的 Path Autocomplete 插件，然后在工作区配置 .vscode/settings.json 里面这样配置

{
  "path-autocomplete.excludedItems": {
    "**/*.js": { "when": "**/*.ts" }, // ignore js files if i'm inside a ts file
    "**/*.map": { "when": "**" }, // always ignore *.map files
    "**/{.git,node_modules}": { "when": "**" } // always ignore .git and node_modules folders
  },
  "path-autocomplete.pathMappings": {
    "@": "${folder}/src"
  },
}

就能把 @ 定义到 ./src 了，.vue 文件也能正常感知到

[action-hong]

@Runtu4378 感谢老铁 之前用的 Path Intellisense 这个插件 也有类似的设置

 "path-intellisense.mappings": {
        "@": "${workspaceRoot}/srt",
    },

但设置了也没啥用, 估计是与其他插件有什么冲突

换上Path Autocomplete 就没问题了

[Runtu4378]

@action-hong 这个插件也有些小问题 比如 https://github.com/ionutvmi/path-autocomplete/issues/24

还在跟踪中

[action-hong]

@Runtu4378

简单试了下

"path-autocomplete.pathMappings": {
    "@": "${folder}/src",
    "@view": "${folder}/src/components"
  },

这样 @view 没提示

注释掉 "@": "${folder}/src",, @view就有提示了

"path-autocomplete.pathMappings": {
   // "@": "${folder}/src",
    "@view": "${folder}/src/components"
  },

将@换成任意字符都会有这种bug, 应该是实现里面没处理好吧, 明天有空看看它代码

[action-hong]

应该是他插件里面的问题, 提了个PR

[Runtu4378]

@action-hong 强

[YutaoChow]

这种配置在vue文件貌似自动导航也失效了 有什么解决办法么？