当前位置: 首页 > news >正文

从零到一搭建:vue3+vite7+antfu+stylelint+githooks,全流程配置,附带源码,集成css变量使用,下载即用

@

目录
  • 0 基础环境
    • 0.1 node版本
    • 0.2 包管理器
    • 0.3 vscode插件
  • 1 创建项目——vue官网方式
    • 1.1 创建命令
    • 1.2 初始化git
  • 2 语法检查:antfu组合eslint和prettier
    • 2.1 安装命令
    • 2.2 安装依赖
    • 2.3 在package.json中添加脚本
    • 2.4 修改eslint配置文件
  • 3 语法检查:stylelint
    • 3.1 安装命令
    • 3.2 在package.json中添加脚本
    • 3.3 修改.vscode/settings.json
    • 3.4 创建stylelint配置文件
    • 3.5 创建stylelint忽略文件
  • 4 提交检查:simple-git-hooks
    • 4.1 安装命令
    • 4.2 在package.json中最后添加如下代码
    • 4.3 更新git hooks
    • 4.4 verifyCommit配置(也可使用commitlint)
    • 4.5 安装chalk
  • 5 Lint-staged
    • 5.1 安装命令
    • 5.2 配置文件
    • 5.3 在package.json中配置脚本
  • 6 完毕,测试lint功能,提交lint功能
    • 6.1 提交格式不对
    • 6.2 提交完成
  • 7 在项目中测试css
    • 7.1 在项目中创建css文件
    • 7.2 vue文件中使用

0 基础环境

0.1 node版本

node 最好>20 因为eslint9的需要 本次项目node为22.14.0

0.2 包管理器

这里采用pnpm

0.3 vscode插件

eslint prettier vue-official stylelint

在这里插入图片描述

1 创建项目——vue官网方式

1.1 创建命令

pnpm create vue

在这里插入图片描述

1.2 初始化git

git init
git add .
git commit -m 'first'

2 语法检查:antfu组合eslint和prettier

2.1 安装命令

npx @antfu/eslint-config@latest

在这里插入图片描述

2.2 安装依赖

pnpm  i

2.3 在package.json中添加脚本

"lint": "eslint .",
"lint:fix": "eslint . --fix"

2.4 修改eslint配置文件

import antfu from '@antfu/eslint-config'export default antfu({// 1. 基本配置// type: 'lib', // 表示当前项目是一个库(library),而不是应用(app)// 2. 代码风格配置(Stylistic)stylistic: true, // 或者你可以更加细粒度的设置// 3. 格式化工具formatters: true, // 使用外部格式化工具(如 Prettier)// 4. ts支持typescript: true, // 启用 TypeScript 支持// 5. vue支持// vue: true, // 或者你可以更加细粒度的设置vue: {overrides: {// 强制 Vue 文件的顺序为  <script> -> <template> -> <style>'vue/block-order': ['error',{order: ['script', 'template', 'style'],},],},},// 6. 规则覆盖(Rules)/*** 规则 https://www.wenjiangs.com/docs/eslint,vue规则:https://eslint.vuejs.org/rules/* 主要有如下的设置规则,可以设置字符串也可以设置数字,两者效果一致*/rules: {'eslint-comments/no-unlimited-disable': 'off','ts/no-use-before-define': 'off','style/no-mixed-operators': 'off','no-console': 'warn','ts/no-unused-expressions': 'off','style/max-statements-per-line': 'off','ts/prefer-namespace-keyword': 'off','antfu/top-level-function': 'off','node/prefer-global/process': 'off','ts/consistent-type-definitions': 'off','ts/ban-ts-comment': 'off','vue/singleline-html-element-content-newline': 'off', // vue 标签强制换行// 关闭一些耗时的规则'import/no-cycle': 'off','import/no-deprecated': 'off','import/no-named-as-default': 'off','prefer-promise-reject-errors': 'off',},// 7. 忽略文件(Ignores)// 9x版本 忽略文件这种配置方式 废弃掉eslintignore// 【注意:ignores 是 @antfu/eslint-config 的配置方式,替代了传统的 .eslintignore 文件】ignores: ['*.sh','node_modules','*.md','*.woff','*.ttf','.vscode','.idea','/public','/docs','.husky','.local','/bin','Dockerfile','/dist','/src/libs','src/mock','*.min.js','/*.json',],// 8. 其他配置// 关闭对 JSON 和 YAML 的支持// jsonc: false, // 关闭 JSON 支持// yaml: false, // 关闭 YAML 支持// isInEditor: false, // 保存删除未引入的代码// unocss: true, // unocss 检测&格式化 暂时注释 等配置了unocss再开放为true
})

3 语法检查:stylelint

3.1 安装命令

pnpm i -D postcss postcss-html stylelint stylelint-config-recess-order stylelint-config-standard

3.2 在package.json中添加脚本

"stylelint": "stylelint  \"**/*.{css,scss,less,vue,html}\"",
"stylelint:fix": "stylelint  \"**/*.{css,scss,less,vue,html}\" --fix"

3.3 修改.vscode/settings.json

  // Auto fix"editor.codeActionsOnSave": {"source.fixAll.eslint": "explicit","source.organizeImports": "never","source.fixAll.stylelint": "explicit"},// stylelint配置"stylelint.enable": true,// 关闭编辑器内置样式检查(避免与stylelint冲突)"css.validate": false,"less.validate": false,"scss.validate": false,"stylelint.validate": ["css","less","postcss","scss","sass","vue"],

3.4 创建stylelint配置文件

stylelint.config.js

export default {// 1. 基础配置,继承两个官方推荐的配置// stylelint-config-standard:Stylelint 的标准规则集,涵盖常见的 CSS 规范。// stylelint-config-recess-order:强制 CSS 属性按照特定顺序排列(如 position -> display -> margin 等),提高代码可读性。extends: ['stylelint-config-standard', 'stylelint-config-recess-order'],// 2. 文件解析器overrides: [{files: ['**/*.(html|vue)'],customSyntax: 'postcss-html', // 解析 CSS、HTML、Vue(如 Vue 的 <style> 块) 文件},// 选less可以注释scss// {//   files: ['*.less', '**/*.less'],//   customSyntax: 'postcss-less', // 解析 Less 文件// },// 选sass可以注释上面的less// {//   files: ['*.scss', '**/*.scss'],//   customSyntax: 'postcss-scss', // 解析 SCSS 文件//   rules: {//     'scss/percent-placeholder-pattern': null, // 关闭 SCSS 占位符检查//     'scss/at-mixin-pattern': null, // 关闭 SCSS Mixin 命名检查//   },// },],// 3. 自定义规则rules: {// (1) 忽略某些规则: 这些规则被设为 null,表示不检查,通常是为了兼容项目特殊情况。'media-feature-range-notation': null, // 允许 `min-width: 768px` 或 `width >= 768px`'selector-not-notation': null, // 允许 `:not(.class)` 或 `:not(.class, .other)`'import-notation': null,'function-no-unknown': null, // 允许未知的 CSS 函数(如自定义函数)'selector-class-pattern': null, // 允许任意类名(默认强制 kebab-case)'no-empty-source': null, // 允许空样式文件'no-descending-specificity': null, // 允许低优先级选择器覆盖高优先级'font-family-no-missing-generic-family-keyword': null, // 允许 `font-family: Arial`(不强制加 `sans-serif`)'named-grid-areas-no-invalid': null, //  禁用对 CSS Grid 命名区域有效性的检查。// (2) 特殊伪类/伪元素处理: 允许 Vue 特有的伪类(如 :global)和伪元素(如 ::v-deep),避免误报。'selector-pseudo-class-no-unknown': [true,{ignorePseudoClasses: ['global', 'deep'], // 允许 `:global` 和 `:deep`(Vue Scoped CSS)},],'selector-pseudo-element-no-unknown': [true,{ignorePseudoElements: ['v-deep', ':deep'], // 允许 `::v-deep` 和 `::deep`(Vue 深度选择器)},],// (3) 忽略未知的 @ 规则: 允许 TailwindCSS、SCSS/Less 的特殊语法(如 @apply、@mixin)'at-rule-no-unknown': [true,{ignoreAtRules: [// TailwindCSS'tailwind','apply','variants',// SCSS/Less 控制语句'function','if','each',// SCSS Mixins'include','mixin','extend','use','responsive','screen','return',],},],// (4) 其他重要规则'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }], // 允许微信小程序的 `rpx` 单位'rule-empty-line-before': [// 规则前空行(注释后除外)'always',{ignore: ['after-comment', 'first-nested'],},],'property-no-vendor-prefix': [ // 允许 `-webkit-` 前缀true,{ignoreProperties: ['background-clip'],},],},// 4. 忽略文件: 不检查 .js、.jsx、.tsx、.ts 文件(Stylelint 只处理样式文件)ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts'],
}

3.5 创建stylelint忽略文件

.stylelintignore

/dist/*
/public/*node_modules
.husky
.vscode
.idea
*.sh
*.mdstats.html

4 提交检查:simple-git-hooks

4.1 安装命令

pnpm i simple-git-hooks -D

4.2 在package.json中最后添加如下代码

"simple-git-hooks": {"pre-commit": "pnpm lint-staged","commit-msg": "node scripts/verifyCommit.js"
}

4.3 更新git hooks

npx simple-git-hooks

4.4 verifyCommit配置(也可使用commitlint)

scripts/verifyCommit.js

// @ts-check
import { readFileSync } from 'node:fs'
import path from 'node:path'
import chalk from 'chalk'const msgPath = path.resolve('.git/COMMIT_EDITMSG')
const msg = readFileSync(msgPath, 'utf-8').trim()const commitRE// eslint-disable-next-line regexp/no-unused-capturing-group= /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/chalk.level = 1
if (!commitRE.test(msg)) {console.error(`  ${chalk.bgRed.white(' ERROR ')} ${chalk.red('invalid commit message format.',)}\n\n${chalk.red('  Proper commit message format is required for automated changelog generation. Examples:\n\n',)}    ${chalk.green('feat(compiler): add \'comments\' option')}\n`+ `    ${chalk.green('fix(v-model): handle events on blur (close #28)',)}\n\n${chalk.red('  See .github/commit-convention.md for more details.\n')}`,)process.exit(1)
}

4.5 安装chalk

pnpm add chalk -D

5 Lint-staged

5.1 安装命令

pnpm i lint-staged -D

5.2 配置文件

lint-staged.config.js

/**  @type {import('lint-staged').Config} */
export default {'*.{js,jsx,ts,tsx}': ['eslint --fix'],'*.json': ['eslint --fix'],'*.{scss,less,styl,html,vue}': ['eslint --fix', 'stylelint --fix --allow-empty-input'],'*.md': ['prettier --write'],
}

5.3 在package.json中配置脚本

"staged:fix": "lint-staged"

6 完毕,测试lint功能,提交lint功能

6.1 提交格式不对

在这里插入图片描述

6.2 提交完成

在这里插入图片描述

7 在项目中测试css

7.1 在项目中创建css文件

styles/variables.css

/* Variables */
:root {--color1: #45f3ff;--color3: #23242a;--color2: #1c1c1c;
}

styles/global.css

/* Global CSS */
* {box-sizing: border-box;padding: 0;margin: 0;
}html,
body {height: 100%;background-color: purple;
}

styles/index.css

/* 引入 css 文件 */
@import './global.css';
@import './variables.css';

main.ts

import './styles/index.css'

7.2 vue文件中使用

App.vue

<script setup lang="ts">
// 动态修改CSS 变量
document.documentElement.style.setProperty('--color1', '#00f')
</script><template><h1>You did it!</h1>
</template><style scoped>
h1 {color: var(--color1);
}
</style>
http://www.hskmm.com/?act=detail&tid=26957

相关文章:

  • bat批处理脚本文件-获取当前时间的几种方法
  • 二分图最大权完美匹配 KM算法
  • 2025.10.8模拟赛
  • Python 中的排序排序函数及区别
  • RL | 速读 IJCAI 2025 的强化学习论文
  • IDM弹窗解决 - -一叶知秋
  • PHP+MySQL开发语言 在线下单订水送水小脚本源码及搭建指南
  • Sliding Window Algorithm
  • 国庆模拟赛总结
  • 深入解析:video-audio-extractor:视频转换为音频
  • 10.8 CSP-JS 模拟赛 T4. discover
  • 20251008 模拟测 总结
  • VuePress v2是否支持Vue2的配置?
  • 新人UP主:晓牛开发者的第一篇自我介绍博客测试发布
  • ubuntu20.04服务器版安装中文输入法分享
  • DeCLIP
  • 19_win11_wsl_linux_配置jdk_mvn
  • 在AI技术唾手可得的时代,挖掘新需求成为核心竞争力——某知名CTF资源库需求洞察
  • 计蒜客 A1108 百度地图的实时路况
  • 学生管理系统面向对象问题分析
  • 解码Linux环境搭建
  • dns 委派
  • 几个重要的偏微分方程(二)
  • 如何测试台式机电源
  • 「SCOI2015」小凸解密码题解
  • 2025免费好用的度数符号的神器
  • 折腾笔记[31]-在线转换吉卜力风格图片
  • 2025 风淋室厂家 TOP 品牌推荐排行榜,不锈钢风淋室,防爆风淋室,自动门风淋室,风淋门公司推荐
  • 计算机视觉的现状与未来挑战
  • #20232408 2025-2026-1《网络与系统攻防技术》实验一实验报告