首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Vite + React + Typescript 构建实战

/fe-project-base 通过这篇文章,你能了解到以下几点: vscode 编辑器配置 git pre-commit 如何配置 ESLint + Pritter 配置 标准前端单页应用目录规划...配置 在安装完上面的依赖之后,通过 cat.git/hooks/pre-commit 来判断 husky 是否正常安装,如果不存在该文件,则说明安装失败,需要重新安装试试 这里 husky 使用 4....x 版本,5.x 版本已经不是免费协议了 测试发现 node/14.15.1 版本会导致 husky 自动创建 .git/hooks/pre-commit 配置失败,升级 node/14.16.0 修复该问题...,接下来我们要配置一下别名,来优化代码中,比如:importxxxfrom'@/utils' 路径体验 通常这里还会有一个 public 目录与 src 目录同级,该目录文件会直接拷贝到构建目录...默认 vite 初始化项目,是不会给我们创建 .env, .env.production, .env.devlopment 三个配置文件,然后官方模板默认提供 package.json 文件中,

1.6K30
您找到你想要的搜索结果了吗?
是的
没有找到

linux普通用户su root切换提示没有文件目录解决方法

首先进入单用户模式:   1). ubuntu :     上述情况可以在grub界面选择第二项修复,但没有grub可以参考:     1、重启ubuntu,随即长按shirft进入grub菜单;     ...找到以“linux”开头那一行,追加” rw single init=/bin/bash”。    ?     按ctrl+x 启动,然后进入rootshell环境。  ? 2....修改用户登录shell。 vim? /etc/passwd shell栏为root或者不存在 修改为:root:x:0:0:root:/root:/bin/bash....解释: 用户名:口令:用户标识号:组标识号:注释性描述:主目录:登录Shell 两个0代表用户是root,属于root组,也就是管理员权限 3. 然后ctrl+alt+delete 重启。...以上所述是小编给大家介绍linux普通用户su root切换提示没有文件目录解决方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家

4.5K51

15分钟快速配置eslint,prettier,lint-staged,husky,commitizen实现前端项目代码规范化

将其安装到所在仓库过程中它会自动在 .git/ 目录下增加相应钩子实现对应功能,这里我们通过使用husky来监测commit-msg钩子,完成提交信息校验,监测 pre-commit 钩子,完成代码校验...代码提交规范 配置husky 运行已经在package.json中增加 prepare命令,执行 husky install 这时会在根目录生成 .husky 文件夹,如图: 我们自己增加 commit-msg...、pre-commit 文件,分别为提交前进行eslint校验,和对git commit-msg格式校验 npx husky add .husky/pre-commit "npx lint-staged...,然后安装即可 点击左下角"齿轮图标",点击Setting后上端选择Workspace选项卡,(也可以在项目根目录下创建一个配置文件 .vscode/settings.json),添加以下配置: {...// VSCode ESLint 插件默认是不会检查 `.vue`、`.ts` `.tsx` 后缀 "eslint.validate": [ "javascript

3.5K31

执行 pip list有关 “解释器错误: 没有那个文件目录解决办法(亲测有效)

目录 1 问题 2 解决 1 问题 我们安装了Python环境,或者是将A 电脑Python环境,直接移到B 电脑,并且配置了Python环境变量,但是执行Python是可以有提示,就是执行pip...list 时候,提示“解释器错误: 没有那个文件目录解决办法 我步骤 (root) ges@gpu-1:~$ pip install prepro 报错 -bash: /home/ges/anaconda3.../envs/ges/bin/pip: /home/zxs/anaconda3/envs/ges/bin/python: 解释器错误: 没有那个文件目录 2 解决 那就先进入/home/ges/anaconda3.../envs/ges/bin/pip,一般人都会先使用cd命令,但是会报错: 那么它就是一个文件,比较推荐一种打开文件好方法是用nano 路径: nano界面编辑十分友好,师弟推荐,新手用着确实比...是 Unix/Linux 里面用于指示脚本解释器特定语法,位于脚本中第一行,以 #! 开头,接着是该脚本解释器,通常是 /bin/bash、/usr/bin/python 之类

2.6K40

前端反卷计划-组件库-01-环境搭建

q=curry-design图片从结果可以看到,这个名字没有其他包在用,所以我可以使用这个名字作为组件库包名。如果你起名字,在npm里面查询到,则需要换个名字。...+(js|ts|jsx|tsx)' "执行 pnpm format进行格式化图片在根目录创建vscode/settings.json,这个告诉vscode进行配置。...,在根目录创建.prettierrc.js,在这个文件进行配置module.exports = { // 箭头函数只有一个参数时候可以忽略括号 arrowParens: 'avoid', //...执行上述命令后,就在目录创建husky文件图片在git commit 提交时候,就会按上述步骤检查代码风格。commit lint为了规范commit描述。...:图片5.这样在git commit时候,如果描述不对,就会出错。

24030

怎样开发一个 Node.js 命令行工具包

要具体了解这些目录里有哪些指令,可以参考这篇文章:bin 目录简单区别 1.2.2 node bin 首先,我们需要找到我们 node 安装地址,这个可以通过在 Linux、MacOS 或者 VSCode...这样目的是为了使该文件以可执行程序去运行时候可以找到相应解释器,当然如果将文件所在位置作为参数传递给解释器来执行的话,则不需要在自定义脚本第一行添加上述代码(写了也没用),例如: /bin/bash...run dev 这样我们文件就是动态变化了,我们改了代码就会产生相应 ts 编译后结果,那么我们要怎样调试指令呢?...' 这样在 git commit 之前就能使用 lint-staged 去检查相应文件,并执行相应命令来修复我们代码。...总结 写个 cli demo 会遇到很多问题,最痛苦还是 eslint VSCode 配置问题,要调半天,如果说没有VSCode 中配置 eslint 插件或者说打开 VSCode 控制台

89920

自动化让你远离烦恼,几个小技巧轻松优化​Python开发环境

tools # Now this works and you can start using poetry poetry --version 在使用poetry创建第一个项目之前,建议先对其进行配置,这样就可以在项目目录...当你使用VsCodePycharm这类集成开发环境时就会变得非常方便,因为它们可以立即识别并选择正确解释器。...这样代码仓库就永远不会出现格式不整齐或是未经类型检查代码,以及任何其他你需要检查错误代码。 现在来安装pre-commit。 可以使用poetry将其直接安装在项目里,也可以安装在本地机器里。...Black工具钩子函数不仅会检查格式,还会相应地为文件添加格式。每次添加新钩子函数时,建议一开始在所有文件中手动运行pre-commit,因为它只能作用于上次提交之后更改过文件。...pre-commit run --all-files 就这样,对自动化工具自动化完成了。 总结 有很多工具可以帮助你专注于重要事情。此处笔者只介绍了其中几个。当然,还有更多。

1.2K30

原生小程序之工程化探索

前言 习惯用webpack对项目开发工程化,接触小程序后,稍微有点不适应,市面上有taro等优秀小程序框架可以使用,由于负责项目历史背景,而无法大规模改造,因此只能做一些简单工程化方案 规范代码...), //注入环境变量 }), ], }; 6.npm run dev / build,生成env.js 7.业务代码引入 env.js,获取到注入环境变量,从而区分环境 方案二:node...方案一:需要额外创建一个基础文件env_base.js,同时还需要集成 rollup,对于轻量级应用,这样不好!...|| 'prod'; // 要写入内容 const content = `const CUR_ENV = '${CUR_ENV}'; export default CUR_ENV; `; // 创建流...文件,并导出环境变量 const CUR_ENV = 'dev';// 'prod', export default CUR_ENV; 5.业务代码引入 env.js,获取到注入环境变量,从而区分环境

82110

搞清楚怎样基于 Webpack5 从 0 搭建 React开发环境-超详细

初始化 package.json $ npm init 安装 Webpack $ npm install webpack webpack-cli --save-dev 创建以下目录结构、文件和内容...:npm run build 在浏览器中打开 dist 目录 index.html,如果一切正常,你应该能看到以下文本:'React' index.html 目前放在 dist 目录下,但它是手动创建...,新增 .eslintignore 文件: src/assets .vscode 在根目录下新增 .vscode 文件夹,然后新增 .vscode/settings.json { "eslint.validate...,也需要括号 arrowParens: 'avoid', // 每个文件格式化范围是文件全部内容 rangeStart: 0, rangeEnd: Infinity,...// 不需要写文件开头 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma:

2.5K20

从零搭建 Vite + React 开发环境

另外,造轮子对于自己也有一些技术上帮助,学别人二次封装东西,不如直接使用底层库,这样也有助于自己系统学习一遍知识,最近 Vite 很火,所以用 Vite 搭建一波,废话不多说,直接进入正文,如何搭建自己开发环境..."scripts": { "build": "vite build", }, } 然后根目录终端输入:npm run build 在浏览器中打开 dist 目录 index.html...,新增 .eslintignore 文件: src/assets .vscode 在根目录下新增 .vscode 文件夹,然后新增 .vscode/settings.json { "eslint.validate...,也需要括号 arrowParens: 'avoid', // 每个文件格式化范围是文件全部内容 rangeStart: 0, rangeEnd: Infinity,...// 不需要写文件开头 @prettier requirePragma: false, // 不需要自动在文件开头插入 @prettier insertPragma:

4.4K00

带你入门前端工程(二):统一规范

代码中 test/ src/ 是要进行校验代码目录,这里指明了要检查 test、src 目录代码。 不过这样检查代码效率太低,每次都得手动检查。并且报错了还得手动修改代码。...修改完后,现在 ts 文件也可以自动格式化了。 扩展 如何格式化 HTML、Vue(其他后缀) 文件 HTML 和 CSS?...这需要利用 VSCode 自带格式化,快捷键是 shift + alt + f。假设当前 VSCode 打开是一个 Vue 文件,按下 shift + alt + f 会提示你选择一种格式化规范。...如果影响是某个目录某个功能,可以加上该目录路径,或者对应功能名称。...其实用哪种方式不重要,最重要是命名方式一定要统一。 例如团队成员有人命名目录喜欢用复数形式(apis),有人喜欢用单数(api),这样是不允许,一定要统一。

69020

从 ESLint 开始,说透我如何在团队项目中基于 Vue 做代码校验

; 紧接着在父级目录里寻找,一直到文件系统目录; 如果在前两步发现有 root:true 配置,停止在父级目录中寻找 .eslintrc; 如果以上步骤都没有找到,则回退到用户主目录.../ src/main.js 除了 .eslintignore 中指定文件目录,ESLint 总是忽略 /node_modules/ 和 /bower_components/ 中文件;因此对于一些目前解决不了规则报错...默认查找文件是 src 和 tests 目录下所有的 .js,.jsx,.vue 文件,以及项目根目录下所有的 js 文件(比如,也会检查 .eslintrc.js)。...其实在团队开发时候,最好把针对 VSCode 配置,写一个文件跟随着项目,一起提交到远程仓库,这样的话就保证了项目成员都是用这套配置。...比如可以在项目根目录新建 .vscode/settings.json,然后写入上面的那串配置内容。

2.3K20

我在项目中是这样配置Vue

但只是这样做是不够,我们还可以做得更极致。...添加vue.config.js 文件 在新建Vue项目中,默认是没有vue.config.js文件,首先你需要在项目根目录新建一个vue.config.js文件,然后在文件中加入以下代码 module.exports.../locale/'该字段路径文件目录,但是也使得我们使用时候不能显示中文语言了,这时候如果想用某一种语言应该怎么办呢?...以下插件 eslint stylelint Prettier - Code formatter 配置vscodevscodesetting文件里面添加以下代码 "eslint.enable":true...,写代码时候vscode会自动校验格式化代码, 但就怕有人用其他编辑器没有配置插件,将未校验代码提交到仓库里面,导致所有人代码都爆红,这时候就需要使用husky在提交代码时候进行校验。

86830

利用 Lint 工具链来保证代码风格和质量

在 .eslintrc.js 配置文件中接入 prettier 相关工具链,最终配置代码如下所示,你可以直接粘贴过去:// .eslintrc.jsmodule.exports = { env:...当然,你也可以在 VSCode 中安装Stylelint插件,这样能够在开发阶段即时感知到代码格式问题,提前进行修复。当然,我们也可以直接在 Vite 中集成 Stylelint。...{ "husky": { "pre-commit": "npm run lint" }}这种做法在 Husky 4.x 及以下版本没问题,而在最新版本(7.x 版本)中是无效!..."npm run lint"接着你将会在项目根目录.husky目录中看到名为pre-commit文件,里面包含了 git commit前要执行脚本。...-e $HUSKY_GIT_PARAMS"你可以发现在.husky目录下多出了commit-msg脚本文件,表示commitlint命令已经成功接入到 husky 钩子当中。

35010
领券