vue3代码检查以及格式化配置

一、husky + lint-staged

1.husky配置git hooks，执行git add .然后git commit的时候，就会触发lint-staged，通过eslint来执行本次提交所修改的文件

(1) 下载插件

pnpm i husky --save-dev;
pnpm i lint-staged --save-dev

(2) 在pageage.json的script中添加："prepare": "husky install",执行pnpm run prepare 在.git下生成.husky文件，文件中生成pre-commit的 shell脚本钩子，一般用于拦截提交之前git commit的暂存区变动，进行相关的门禁检测

(3) npx husky add .husky/pre-commit "npm run lint",用于唤醒 list-staged(.lintstagedrc.cjs)

(4) 配置 .lintstagedrc.cjs 文件

 module.exports = {'src/**/*.{js,jsx,vue,ts,tsx}': ['eslint --fix','prettier --write',],};

二、eslint + prettier

(1) .eslintrc.cjs 和 .prettierrc.cjs 两者会有冲突,安装eslint-config-prettier插件，eslint用于代码之类的检查, prettier用于代码格式化

(2) .eslintignore用于忽略代码检查的文件，如 components.d.ts

三、unplugin-vue-component

vue 按需自动导入组件

(1) pnpm i unplugin-vue-components --save-dev;

(2) vite.config.ts

  import Components from 'unplugin-vue-components/vite';import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';export default defineConfig({plugins: [Components({resolvers: [ElementPlusResolver()],})]})

运行项目时插件会自动生成一个ui库组件以及指令路径 components.d.ts文件, 这样就不用手动通过import引可以自动使用src目录下的components

(3)引入组件的名字要和组件的名称一致

四、pinia

(1)pnpm install pinia@latest

Pinia 相比 Vuex 更加简单,去除 mutations，只有 state，getters，actions

(2)pinia-plugin-persist 数据持久化

默认使用的是sessionStorage存储，可以自定义为localStorage

附加：npx

(1) 作用

在node_modules下查找是否有相关模块，有就执行，没有就下载再执行，执行完毕后卸载

(2) 使用场景

不想安装相关的代码，仅仅是个测试，用完自动删除。

想执行当前目录下的node_modules/内的命令，比如：webpack-cli， husky

vue3代码检查以及格式化配置相关推荐

Java代码规范、格式化和checkstyle检查配置文档
为便于规范各位开发人员代码.提高代码质量,研发中心需要启动代码评审机制.为了加快代码评审的速度,减少不必要的时间,可以加入一些代码评审的静态检查工具,另外需要为研发中心配置统一的编码模板和代码格式化模 ...
前端代码规范之代码格式化配置
前言由于每个前端人员的格式化配置或安装的格式化插件不一,导致在对项目开发的过程中代码风格不一,影响团队开发效率: 为了方便维护及统一代码风格制定团队的一套格式化配置,来对项目代码进行约束以及对部分问 ...
二、为uniapp项目配置基于airbnb风格的Eslint代码检查规则
上一节我们一起创建了基于Vue3 + TS + Vite的uniapp项目并配置了自动导入,接下来让我们一起来为项目配置基于基于airbnb规范的Eslint代码检查规则. 1.为什么要为项目配置Es ...
golang静态代码检查配置与常见格式异常
go环境配置下载go1.13版本,通过命令解压到/usr/local目录下,并设置环境变量: sudo tar -zxvf go1.13.9.linux-amd64.tar.gz -C /usr/l ...
CppCheck静态代码检查配置(命令行方式或在VS中使用)
目录 CppCheck静态代码检查 1.1 安装cppcheck 1.2 直接使用Cppcheck 1.2.1 命令行方式 1.2.2 UI方式 1.3 在VS2017中使用 1.3.1 在VS201 ...
linux pclint配置_自动代码检查分享之PCLINT
当我们花了很长时间来重现和排查一个问题后,发现原来是由于变量未赋初始值:当我们排查一个客户重大异常后,发现原因尽然是IF判断时用了单等号.这些都是比较低级的问题,但凡一个有基础的程序员都能看出来写错了 ...
Ubuntu vscode 配置c/c++环境 ---- 静态代码检查
我曾一度因为vscode中c语言的静态代码检查问题而困扰,想想还是太懒了,不愿意折腾,今天搞一下. 首先在ubuntu中装vscode,,, 然后装clang apt install llvm -y ...
Vue2与Vue3代码检测
前言:Vue2代码检测工具使用的是[Vetur],Vue3需要转换为[Eslint],为了防止Vetur在Vue3项目中报错,同时需要开发Vue2项目,在此记录下相关配置 1.Vue3项目中添加[.v ...
项目中使用 husky 配合 lint-staged 进行git提交前代码检查
前言:本篇文章我们将介绍 Husky 和 Lint-staged 这两种工具.如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言. husky:是一个代码提交钩子. ...

vue3代码检查以及格式化配置

vue3代码检查以及格式化配置相关推荐

最新文章

热门文章