前端代码风格化

技术实现：eslint+Prettierrc

安装依赖：npm install --save-dev eslint prettier

设置风格化规则：

1、创建.eslintrc文件 告诉AI你想要的eslint规范 或 让AI推荐

2、配置.eslintignore文件 告诉AI你不想检测的文件 或让AI推荐

自动格式化：

创建.prettierrc文件 将.eslintrc文件交给AI生成prettier配置

可以根据情况让AI生成.prettierignore文件　

在vscode中安装Prettier插件

在ｖｓｃｏｄｅ中配置：

setting——>
        搜索format on save(保存时自动格式化) ——>
                勾选format on save——>
                            搜format——>
                                Default Formatter——>
                                      选择工具格式化代码（选择Prettier-codeformatter）
                                            

设置打包和上传Git的限制

实现方案：husky+lint-staged + 指令配置

安装依赖：npm install --save-dev husky lint-staged

配置：package.json

{
    "scripts": {
        "dev": "vite",
        "build": "npm run lint && vite build",//生产模式打包前先用eslint检测一下
        "preview": "vite preview",
        "lint": "eslint . --fix --cache",//用eslint检测 当前目录下的文件 并设置缓存
        "format": "prettier --write --experimental-cli src/",//格式化 src目录下的所有文件 --experimental-cli兼容旧版本
        "prepare": "husky"//让husky关联git   
     },
    "lint-staged": {
         "*.{js,jsx,ts,tsx,vue}": [ "prettier --write","eslint --fix"],//将git提交的文件中后缀有js,jsx,ts,tsx,vue 进行prettier+eslint处理
    }
}		

创建Git钩子：在.husky/pre-commit文件中写入

npx husky init //初始化 .husky目录和pre-commit文件

npm run perpare //初始化git仓库后 执行 "prepare": "husky"//让husky关联git

配置：.husky/pre-commit

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx lint-staged

这样，每次执行 git commit 时，会自动对暂存区中的 文件运行运行 lint-staged配置的规则，只有检查通过才能成功提交。

ESLint 与 Prettier 的冲突处理

这是最容易踩坑的地方。如果 ESLint 中配置了与 Prettier 冲突的规则（比如 indent、quotes），会导致两者互相覆盖或修复结果不一致。

解决方案：使用 eslint-config-prettier 关闭 ESLint 中所有与 Prettier 冲突的规则，并可选使用 eslint-plugin-prettier 将 Prettier 作为 ESLint 规则运行。

安装插件：npm install eslint-config-prettier

vue3默认配置了eslint-config-prettier 并进行了设置

配置：eslint.config.js

import skipFormatting from 'eslint-config-prettier/flat'
export default defineConfig([
	…,
	skipFormatting,//放到最后
])