配置 VSCode #

让你的同事至少在这个项目内可以使用跟你一样的设置。

在根目录下添加 .vscode 文件夹，用于配置该项目使用的 VSCode 设置。

添加[extensions.json](https://code.visualstudio.com/docs/editor/extension-marketplace#_workspace-recommended-extensions)，用于推荐 VSCode 插件：

{
    "recommendations": [
        // Vue3 必备
        "johnsoncodehk.volar", // volar - 官方的 Vue3 扩展，需要禁用 Vetur！
        "johnsoncodehk.vscode-typescript-vue-plugin", // TypeScript Vue Plugin - 用于支持在 TS 中 import *.vue 文件。
        "dbaeumer.vscode-eslint", // ESLint 支持
        "esbenp.prettier-vscode", // Prettier 格式化
        // 其他推荐插件
        "voorjaar.windicss-intellisense",
        "ecmel.vscode-html-css",
        "abusaidm.html-snippets",
        "xabikos.JavaScriptSnippets",
        "mikestead.dotenv",
        "yzhang.markdown-all-in-one",
        "formulahendry.auto-rename-tag",
        "coenraads.bracket-pair-colorizer-2",
        "vscode-icons-team.vscode-icons",
        "zhuangtongfa.Material-theme",
        "eamodio.gitlens",
        "donjayamanne.githistory"
    ]
}

添加[settings.json](https://code.visualstudio.com/docs/getstarted/settings)，用于配置 VSCode 设置： ```json { // 为指定的语法定义配置文件或使用带有特定规则的配置文件。 “emmet.syntaxProfiles”: { “javascript”: “jsx”, “vue”: “html”, “vue-html”: “html” }, // 使用空格代替tab缩进，2格缩进 “editor.tabSize”: 2, “editor.insertSpaces”: true, // volar配置 “volar.autoCompleteRefs”: true, “volar.formatting.printWidth”: 100, // 各文件格式化配置 “[vue]”: { “editor.defaultFormatter”: “johnsoncodehk.volar” }, “[jsonc]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[javascript]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[html]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[json]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[javascriptreact]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[less]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[scss]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[css]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” }, “[typescript]”: { “editor.defaultFormatter”: “esbenp.prettier-vscode” } }

<a name="yPMMs"></a>
# 配置 tsconfig.json [#](https://staging-cn.vuejs.org/guide/typescript/overview.html#configuring-tsconfigjson)
> 先将 Vite 模板预设的`tsconfig.node.json`删除。
> 对于我们准备搭建的中小型且无需单元测试的项目来说，tsconfig配置无需做太多的项目分割。
<a name="maNY9"></a>
## 声明文件管理
在**根目录**下新建一个`typings`文件夹，将预设模板中的`src/env.d.ts`文件放到`typings`文件夹中。<br />未来单独的ts声明，也都放在这个文件夹中进行统一管理。
<a name="ACqpQ"></a>
## 修改 tsconfig.json
修改`tsconfig.json`内容，详细说明都在注释中：
```json
{
    // 编译选项配置参考：
    // TypeScript 官方英文: https://www.typescriptlang.org/tsconfig#compilerOptions
    // TypeScript 官方中文: https://www.tslang.cn/docs/handbook/compiler-options.html
    "compilerOptions": {
        // 解析路径及路径别名
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        },
        // 影响 Vite 编译选项，都选用最新的
        "target": "ESNext",
        "module": "ESNext",
        "moduleResolution": "Node",
        // `"noImplicitThis": true` 是 `strict` 的一部分
        // 在这里再次添加，以防止一些用户决定禁用 `strict`
        "noImplicitThis": true,
        "strict": true,
        // Vite 推荐/要求
        // See <https://cn.vitejs.dev/guide/features.html#typescript-compiler-options>
        // See <https://cn.vitejs.dev/guide/features.html#usedefineforclassfields>
        // See <https://cn.vitejs.dev/guide/features.html#json>
        "isolatedModules": true,
        "useDefineForClassFields": true,
        "resolveJsonModule": true,
        // Vue 推荐/要求
        "jsx": "preserve", // Vue 支持 Jsx 需要
        "preserveValueImports": true, // 支持 `<script setup>`
        "importsNotUsedAsValues": "error", // 导入类型时，强制使用 `import type` 而不是 `import`
        // Recommended
        "esModuleInterop": true, // 兼容 esm 与 cjs
        "allowJs": true, // 允许 js、ts 混用
        "forceConsistentCasingInFileNames": true, // 大小写敏感
        "skipLibCheck": true, // See <https://github.com/vuejs/vue-cli/pull/5688>
        "experimentalDecorators": true, // 支持 ES 装饰器
        // 仅该路径下的 d.ts 会被全局包含
        "typeRoots": ["./node_modules/@types/", "./typings"]
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.d.ts",
        "src/**/*.tsx",
        "src/**/*.vue",
        "typings/**/*.d.ts",
        "vite.config.ts"
    ],
    "exclude": ["node_modules/*"]
}

配置 Vite #

这里主要讲几个常用的 Vite 配置项，更多配置可点击 # 号查看官方文档。

Vite 的配置文件就在根目录的 vite.config.ts 中。

路径别名配置 - resolve.alias #

首先运行pnpm add -D @types/node命令安装 node 模块的ts类型声明。
避免使用node模块时，提示 找不到模块“path”或其相应的类型声明的报错。

在vite.config.ts中使用path模块搭配设置路径别名：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
const pathResolve = (dir: string): string => {
    return resolve(__dirname, '.', dir)
}
/**
 * vite 配置
 * @see https://cn.vitejs.dev/config/
 */
export default defineConfig({
    base: './',
    resolve: {
        alias: {
            '@': pathResolve('./src'),
            '~': pathResolve('./src/assets'),
            '#': pathResolve('./src/scripts')
        }
    },
    plugins: [vue()]
})

同时设置tsconfig.json的compilerOptions.paths字段，这样 VSCode 编辑器才能识别路径：

{
  "compilerOptions": {
    // 设置解析非相对模块名称的基本目录
    "baseUrl": ".",
    // 设置模块名到基于baseUrl的路径映射，可以设置路径别名的语法提示
    "paths": {
            "@/*": ["src/*"],
            "~/*": ["src/assets/*"],
            "#/*": ["src/scripts/*"]
    },
  },
}

CSS 配置 - CSS Module、预处理器 #

预处理器 Less #

由于本文会使用ant-design-vue，因此预处理器选择使用less。

Vite对预处理器提供了内置的支持。因此安装预处理器依赖即可，无需额外配置：

# 安装 less 预处理器
pnpm add -D less

若要在 Vite 中使用 Less 全局变量：

在 src/assets/style 文件夹下创建 common.less 文件
```
@primary-color: #3554f5; // 全局主色
```
在 vite.config.ts 中注入全局变量声明：


export default defineConfig({
    css: {
        preprocessorOptions: {
            less: {
                // 全局 less变量 & less mixins
                modifyVars: {
                    hack: `true; @import (reference) "${pathResolve('./src/assets/style/common.less')}";`
                },
                // ant-design-vue 自动按需引入兼容
                javascriptEnabled: true
            }
        }
    },
})

使用 Less 全局变量：

<style lang="less" module>
.xxx {
  color: @primary-color;
}
</style>

CSS Modules #

使用

Vue 实践笔记