Vue3项目代码规范
代码规范
- 项目结构
- editorconfig配置
- prettierrc配置
- prettierignore配置
- eslint配置
- git Husky和eslint
- git commit规范
- 代码提交风格
- 代码提交验证
项目结构
vue3-ts-cms
├─ .browserslistrc
├─ .editorconfig
├─ .eslintrc.js
├─ .gitignore
├─ .prettierignore
├─ .prettierrc
├─ babel.config.js
├─ package-lock.json
├─ package.json
├─ public
│ ├─ favicon.ico
│ └─ index.html
├─ README.md
├─ src
│ ├─ App.vue
│ ├─ assets
│ │ └─ logo.png
│ ├─ components
│ ├─ main.ts
│ ├─ shims-vue.d.ts
├─ tsconfig.json
editorconfig配置
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。
在项目的根目录下创建 .editorconfig 文件后,复制下面配置。
.editorconfig
# http://editorconfig.orgroot = true # 当前文件是否在根目录下[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格(tab | space)
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false
PS:若在VSCode配置editorconfig,则需要安装一个插件:EditorConfig for VS Code
prettierrc配置
Prettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具
在根目录下创建 .prettierrc 文件后,复制下面配置
.prettierrc
{"useTabs": false,"tabWidth": 2,"printWidth": 80,"singleQuote": true,"trailingComma": "none","semi": false
}
属性 | 说明 |
---|---|
useTabs | true:使用tab缩进 false:使用空格缩进 |
tabWidth | 在tab是空格的情况下,是几个空格,选择2个 |
printWidth | 当行字符的长度超过设置的长度,代码将换行。推荐80,100 |
singleQuote | true:使用单引号 false:使用双引号 |
trailingComma |
在多行输入的尾逗号是否添加,设置为 none
|
semi | 语句末尾是否要加分号,默认值true,选择false表示不加 |
测试prettier生效直接在代码中保存即可见效。
情况一:保存代码无法格式化。
原因:可能VSCode有多个保存自动格式化的插件,未设置默认的插件,VSCode不知道选择哪个插件进行格式化
解决方法:右键->格式化文档 会提醒没有设置默认的格式化插件,选择prettier插件即可,再自动保存时就可以自动格式化了
情况二:保存代码无法格式化,但是右键->格式化文档可以格式化
原因:可能VSCode未设置保存文件格式化
解决方法:文件->设置->搜索栏搜索save->找到Editor: Format On Save并勾选上即可
prettierignore配置
不是所有的文件保存的时候都需要格式化,有些文件保存则不需要格式化。此时就需要配置忽略格式化文件配置
在根目录下创建 .prettierignore 忽略文件,复制下面配置
.prettierignore
/dist/*
.local
.output.js
/node_modules/****/*.svg
**/*.sh/public/*
PS:若在VSCode中配置prettierrc和prettierignore,则需要安装一个插件:prettier
PS:配置好prettierrc文件后,保存文件即可格式化。
快速格式化文件:需要在package.json添加一个脚本,再运行此脚本即可使所有文件都格式化(prettierignore配置忽略的文件除外)
"prettier": "prettier --write ."
运行脚本
npm run prettier
eslint配置
在前面创建项目的时候,我们就选择了ESLint,所以Vue会默认帮助我们配置需要的ESLint环境。
PS:若在VSCode中,则需要安装一个插件:ESLint
解决eslint和prettier冲突的问题:
安装插件:(vue在创建项目时,如果选择prettier,那么这两个插件会自动安装,就不需要再安装)
npm i eslint-plugin-prettier eslint-config-prettier -D
在eslintrc.js
文件添加一个配置后重启VSCode即可解决冲突问题
注意:plugin和:之间没有空格,不然会不符合eslint的语法报异常
"plugin:prettier/recommended"
git Husky和eslint
虽然我们已经要求项目使用 eslint 了,但是不能保证其他组员提交代码之前都将代码格式化了。 也就是我们希望保证代码仓库中的代码都是符合 eslint 规范的。
那么我们就需要在组员执行 git commit
命令的时候对其进行校验,如果不符合 eslint 规范,那么自动通过规范进行修复。
那么如何做到这一点呢?可以通过Husky工具:
husky 是一个git hook工具,可以帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push
我们可以使用自动配置命令:
windows:
npx husky-init '&&' npm install
--------------------------------
linux:
npx husky-init '&&' npm install
这个自动配置命令会做三件事:
1.安装husky相关的依赖:
2.在项目根目录下创建 .husky
文件夹:
npx huksy install
3.在package.json
中添加一个脚本:
接下来,我们需要去完成一个操作:在进行commit时,执行lint脚本:
这个时候我们执行git commit的时候会自动对代码进行lint校验。
git commit规范
代码提交风格
通常我们的git commit会按照统一的风格来提交,这样可以快速定位每次提交的内容,方便之后对版本进行控制。
但是如果每次手动来编写这些是比较麻烦的事情,我们可以使用一个工具:Commitizen
- Commitizen 是一个帮助我们编写规范 commit message 的工具;
1.安装Commitizen
npm install commitizen -D
2.安装cz-conventional-changelog,并且初始化cz-conventional-changelog:
npx commitizen init cz-conventional-changelog --save-dev --save-exact
这个命令会帮助我们安装cz-conventional-changelog:
并且在package.json中进行配置:
这个时候我们提交代码需要使用 npx cz
:
- 第一步是选择type,本次更新的类型
Type | 作用 |
---|---|
feat | 新增特性 (feature) |
fix | 修复 Bug(bug fix) |
docs | 修改文档 (documentation) |
style | 代码格式修改(white-space, formatting, missing semi colons, etc) |
refactor | 代码重构(refactor) |
perf | 改善性能(A code change that improves performance) |
test | 测试(when adding missing tests) |
build | 变更项目构建或外部依赖(例如 scopes: webpack、gulp、npm 等) |
ci | 更改持续集成软件的配置文件和 package 中的 scripts 命令,例如 scopes: Travis, Circle 等 |
chore | 变更构建流程或辅助工具(比如更改测试环境) |
revert | 代码回退 |
- 第二步选择本次修改的范围(作用域)
- 第三步选择提交的信息
- 第四步提交详细的描述信息
- 第五步是否是一次重大的更改
- 第六步是否影响某个open issue
我们也可以在scripts中构建一个命令来执行 cz:
代码提交验证
如果我们按照cz来规范了提交风格,但是依然有同事通过 git commit
按照不规范的格式提交应该怎么办呢?
- 我们可以通过commitlint来限制提交;
1.安装 @commitlint/config-conventional 和 @commitlint/cli
npm i @commitlint/config-conventional @commitlint/cli -D
2.在根目录创建commitlint.config.js文件,配置commitlint
module.exports = {extends: ['@commitlint/config-conventional']
}
3.使用husky生成commit-msg文件,验证提交信息:
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
Vue3项目代码规范相关推荐
- 【代码规范】google开源c\c++项目代码规范
版权声明:版权声明:本文为博主原创文章,未经博主允许不得转载;https://blog.csdn.net/csdn_baotai https://blog.csdn.net/csdn_baotai/a ...
- React Native三端同构(二: webpack@4脚手架构建和项目代码规范)
(一)前言 一个完整的web开发手脚架,应该包含以下 babel-loader 图片 音视频 字体 样式处理等loader 开发环境配置 生产环境配置,流程化前端多生产构建 生产环境打包优化, 如构建 ...
- 【03】品优购电商项目:00-品优购项目代码规范
文章目录 代码规范 1. 概述 HTML规范 图片规范 CSS规范 命名规范 2. HTML 规范 DOCTYPE 声明 页面语言lang charset 字符集合 书写风格 HTML代码大小写 类型 ...
- C++项目代码规范(偶自用)
Code rule View more presentations from Wei Sun. 转载于:https://www.cnblogs.com/lua5/archive/2010/12/30/ ...
- 记录前端常用代码规范
代码规范的目的是为了编写出高质量的代码.让团队人员每天都是愉悦的,大家在一起每天都是快乐的 ![](,一下就来列举一些常用的代码规范条约,在后面的开发中大家也可以一同来完善我们的代码规范条例: 让我们 ...
- 大厂秘籍:谷歌代码规范开放下载,手把手教你写出好代码
这两天和一位大厂的朋友聊天,说起他们今年技术岗晋级答辩要增加代码走读环节,那该如何写出好看又好用的代码? 代码是程序员改变世界的工具,每个程序员都会写代码,但不一定能写出好代码. 如今的大型商业软件系 ...
- 【Vue3+Vite+TS项目集成ESlint +Prettier实现代码规范检查和代码格式化】
目录 前言 创建项目 安装初始化ESlint 安装ESlint: 初始化ESlint: 安装配置Prettier 安装prettier: 配置prettier: 配置VScode保存时自动格式化代码 ...
- vue3项目的创建和git提交规范,eslint ,cz,hooks
ESLint Commitizen Git Hooks (--forece 强制安装)` vue create (项目文件名) 选择 'Manually celect features' //手动配置 ...
- 【C 语言】C 项目开发代码规范 ( 形参合法性判断 | 函数返回值局部变量 | 函数中不用全局变量 | 函数中使用局部变量接收形参 | 函数返回值 | 形参作返回值 | 形参返回值处理 )
文章目录 一.C 项目开发代码规范 一.C 项目开发代码规范 上一篇博客 [C 语言]字符串模型 ( 键值对模型 ) 中 , 完成了字符串的 键值对 查找功能 , 代码不太规范 ; C 项目开发代码规 ...
最新文章
- 给SAP系统安装联机帮助(事务码SR13)
- Detective Book
- Boost:是否支持sse4.1指令的测试程序
- Boost:双图bimap与mi_hashed indices索引的测试程序
- WordCount 实例
- Git的使用(快速入门)
- AjaxControlToolkit的使用
- net core框架介绍
- dll domodal运行时异常_软件运行异常时的多种排查思路与方法
- [Luogu] 软件包管理器
- 论文阅读笔记——具有圆形光滑标记的面向任意对象检测
- 虚拟机安装教程win10_Win10封装教程1-VM虚拟机安装及配置
- [BZOJ4340][BJOI2015]隐身术(后缀数组)
- linux下QT工程调用opencv、libtorch,并用cmake编译,及其遇到的一些问题的解决方法
- ASP.NET MVC #8211; 视图
- 解决C#调用Excel接口时报错,提示:Microsoft.Office.Interop.Excel.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft.Offi
- uiautomation(如何)实现自动化
- matlab非平稳信号小波和FFT去噪
- java GUL编程
- Unreal Engin_画廊制作笔记 _006灯光处理,静态灯光的设置