69 - vue3案例 - 02 - Eslint配置代码风格

一. 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值