如何优化vue工程的开发体验

前提

vue工程基于vue cli3生成的项目架子
使用vscode编辑器开发
了解typescript

如何生成vue工程项目请查看vue cli3

vscode下载使用点击这里

了解tsconfig.json

@路径提示问题

在vscode里开发vue工程写代码时写相对路径如../../api/aa.js会很长也不好分辨容易混乱。这是大家都是使用@/api/aa.js,其中@就是指项目里的src/目录。
但是当我们写代码敲入@时vscode并不会提示路径，如果有提示路径当话更加利于我们编程，提升开发体验。

为了解决这个问题，我们引入了jsconfig.json

目录中存在jsconfig.json文件表示该目录是JavaScript项目的根目录。jsconfig.json文件指定根文件和JavaScript语言服务提供的功能选项。

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

为此我们在项目根路径创建jsconfig.json文件，并键入如下代码：

{
  "compilerOptions": {
    "target": "esnext",
    "checkJs": false,
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "module": "commonjs",
    "paths": {
      "@/*": ["./src/*"],
    }
  },
  "exclude": ["node_modules", "dist", "temp"],
  "include": ["src/**/*", "types/**/*"]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

这时再写代码敲入@时就会出来目录路径提示啦。

注意：能提示目录路径和.js,.ts,.tsx,.jsx文件，不能提示.vue文件名称

jsconfig.json选项配置

"include"和"exclude"属性

指定一个文件glob匹配模式列表。支持的glob通配符有：

你应该用include属性指定你的源码目录

你应该用exclude属性排除非源码目录如["node_modules", "dist", "temp"] 等，具体视你当项目情况而定

这样做是为了vscode能快速扫描完文件，做到快速给出目录路径提示

compilerOptions选项

paths是指模块名到基于baseUrl的路径映射的列表。
对于vue工程这里我们设置：

"paths": {
  "@/*": ["./src/*"],
}

1
2
3

更多选项配置查看这里

如何优化vue工程的开发体验 | UFOTOOL

如何优化vue工程的开发体验

前提

@路径提示问题

jsconfig.json选项配置

"include"和"exclude"属性

compilerOptions选项