vite + ts + eslint全局变量配置

在开发过程中，我们经常需要配置一些全局变量。下面我将记录，我全局变量的配置流程。

我为了使用mock，所以增加了一个全局环境变量__USE_MOCK__来区分环境。

首先，我需要安装cross-env插件包，并在package.json增加一条脚本：

{..."scripts": {"dev:mock": "cross-env USE_MOCK=true vite",...}
...
}

这样，我就可以在vite.config.js获取到一个环境变量USE_MOCK了。

接下来，我需要将这个环境变量抛到全局：

export default ({ command }:ConfigEnv):UserConfigExport => {// huoquconst USE_MOCK = (process.env?.USE_MOCK as unknown as boolean) ?? falsereturn {define: {__USE_MOCK__: USE_MOCK // 抛到全局},...}
}

至此，我们的全局变量就配置完成了，但是在使用过程中，我们发现环境变量下面有红线。查看发现是eslint的报错，no-undef。

根据官网说明，我们需要在 env.d.ts 或 vite-env.d.ts 文件中添加类型声明。但是我添加之后发现不但没有解决问题，这个声明文件也开始报错，no-unused-vars。

解决这些问题，我们需要修改eslint配置文件：

module.exports = {...globals: {'__USE_MOCK__': true // 解决no-undef问题},parserOptions: {...parser: '@typescript-eslint/parser'},plugins: [...'@typescript-eslint'],rules: {...'@typescript-eslint/no-unused-vars': [2], // 解决no-unused-vars问题}
}

配置后，报错就解决了，并且变量可以正常获取。

vite + ts + eslint全局变量配置相关推荐

Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
尤大的 Vue3.0 已经发布有一阵子了,已经很成熟了. 而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了. 主要是要熟练一下 Vue3,好准备用 Vue3 ...
Vue3+Vite+TS+Eslint搭建生产项目
目录一.初始化一个vite项目: 二.配置prettier,使用prettier进行语法规范三.将ESLint的错误显示在浏览器界面一.初始化一个vite项目: yarn create vit ...
vite + vue2 + eslint 项目配置
// npm 和 yarn 皆可,这里以 yarn 举例安装 vue2 环境 yarn create vite// 选择 framework: vanilla // 不选 vue,是因为vue默认是 ...
【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录前言创建项目安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
react+vite+ts关于路径别名的配置
1.配置路径别名第一步:找到vite.config.ts文件第二步:引入path 第三步:写入下图红框代码备注:本项目使用的是TS,因此需要下载安装关于node这个库的ts的声明配置 npm i ...
【记录】VUE3 + VITE + TS 配置跨域
[记录]VUE3 + VITE + TS 配置跨域在vite.config.ts进行如下设置在vite.config.ts进行如下设置 server: {host: true,// 设置端口号po ...
教你使用 koa2 + vite + ts + vue3 + pinia 构建前端 SSR 企业级项目
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前言大家好,我是易[1],在上一篇文章中,我们有讲到<如何使用 vite+vue3 ...
vue3：vue3+vite+ts+pinia
一.背景记录一套技术方案. 二.项目基础 2.1.创建项目 yarn create vite 输入名字后,这里出现了几个选项,不清楚都是干啥的,下来研究选择后完成 2.2.vite.config. ...
vue-cli关闭eslint及配置eslint
有了eslint的校验,可以来规范开发人员的代码,是挺好的.但是有些像缩进.空格.空白行之类的规范,在开发过程中一直报错,有点烦人了. 我们可以在创建工程的时候选择不要安装eslint.就是在安装工程 ...

vite + ts + eslint全局变量配置

vite + ts + eslint全局变量配置

vite + ts + eslint全局变量配置相关推荐

最新文章

热门文章