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