一. Eslint配置代码风格
配置文件.eslintrc.cjs
(1). prettier 风格配 https://prettier.io
①. 单引号
②. 不使用分号
③. 宽度80字符
④. 不加对象|数组最后逗号
⑤. 换行符号不限制 (win mac 不一致)
(2). vue组件名称多单词组成(忽略indexvue)
(3). props解构(关闭)
提示:安装Eslint且配置保存修复,不要开启默认的自动保存格式化
1. 配置格式化规则
.eslintrc.cjs
/* eslint-env node */
//require('@rushstack/eslint-patch/modern-module-resolution')
//module.exports = {
// root: true,
// extends: [
// 'plugin:vue/vue3-essential',
// 'eslint:recommended',
// '@vue/eslint-config-prettier/skip-formatting'
// ],
// parserOptions: {
// ecmaVersion: 'latest'
// },
rules: {
// prettier专注于代码的美观度(格式化工具)
// 前置:
// 1.禁用格式化插件 prettier format on save 关闭
// 2.安装Eslint插件,并配置保存时自动修复
'prettier/prettier': [
'warn',
{
singleQuote: true, // 单引号
semi: false, // 无分号
printWidth: 80, // 每行宽度至多80字符
trailingComma: 'none', // 不加对象|数组最后逗号
endOfLine: 'auto' // 换行符号不限制(win mac 不一致)
}
],
// ESLint关注于规范,如果不符合规范,报错
'vue/multi-word-component-names': [
'warn',
{
ignores: ['index'] // vue组件名称多单词组成(忽略index.vue)
}
],
'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验(props解构丢失响应式)
// 💡 添加未定义变量错误提示,create-vue@3.6.3 关闭,这里加上是为了支持下一个章节演示。
'no-undef': 'error' // off: 关闭校验
}
// }
2. 安装 ESLint 插件
禁用 prettier插件(没装不用管)
3. 配置保存时自动修复
二. 提交前做代码检查
(1). 初始化 git 仓库,执行 git init 即可
(2). 初始化 husky 工具配置,执行 pnpm dlx husky-init && pnpm install 即可
husky文档: https://typicode.github.io/husky/
(3). 修改.husky/pre-commit 文件
# 注释: npm test
# 添加
pnpm lint
1. 修改本机的执行脚本策略命令
否则在项目中执行一些命令会报错
(1). 电脑左边底部搜索 Windows Power Shell
不是黑窗口
(2). 设置脚本策略
# 1. 输入 set-ExecutionPolicy RemoteSigned 回车
set-ExecutionPolicy RemoteSigned
# 2. 输入 A
A
# 3. 再输入get-ExecutionPolicy,回车 出现RemoteSigned 即为成功
get-ExecutionPolicy
2. 初始化仓库
git init
3. 初始化 husky
pnpm dlx husky-init && pnpm install
4. 修改.husky/pre-commit 文件
初始化husky后会生成.husky文件 .husky / pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm lint
问题: pnpm lint 是全量检查,耗时问题,历史问题
三. 暂存区的 eslint 校验
(1). 安装 lint-staged 包 pnpm i lint-staged -D
(2). package.json 配置lint-staged 命令
(3). husky/pre-commit 文件修改
1. 安装lint-staged
pnpm i lint-staged -D
2. 配置package.json
{
...
"scripts": {
...
// 一触发就调用底部新增的lint-staged
"lint-staged":"lint-staged"
},
...
// 底部新增lint-staged
"lint-staged": {
"*.{js,ts,vue}": [
"eslint --fix"
]
}
}
3. 修改 .husky/pre-commit 文件
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm lint-staged
四. 目录调整
默认生成的目录结构不满足我们的开发需求,所以这里需要做一些自定义改动。
主要是以下工作:
(1).删除一些初始化的默认文件
(2).修改剩余代码内容
(3).新增调整我们需要的目录结构
(4).拷贝全局样式和图片,安装预处理器支持
1. 删除无用的默认文件
清空: assets , components , views 文件夹
2. 新建 api , utils 文件夹
3. 新增assets \ main.scss样式
body{
margin: 0;
background-color: #f5f5f5;
}
.fade-slide-leave-active,
.fade-slide-enter-active{
transition: all 0.3s;
}
.fade-slide-enter-from{
transform: translateX(-30px);
opacity: 0;
}
.fade-slide-leave-to{
transform: translateX(30px);
opacity: 0;
}
4. main.js导入main.css
//import { createApp } from 'vue'
//import { createPinia } from 'pinia'
//import App from './App.vue'
//import router from './router'
import '@/assets/main.scss'
//const app = createApp(App)
//app.use(createPinia())
//app.use(router)
//app.mount('#app')
5. 安装 scss 预处理器
pnpm add sass -D
6. 启动
# 启动不报错就代表成功
pnpm dev