在vue项目中添加stylelint

在项目中引入stylelint的意义

  1. 保证团队代码风格一致性
  2. 提高代码质量和开发效率
  3. 优化css文件,间接性的提高渲染速度

1. 创建 .stylelintrc.cjs 配置文件

js 复制代码
module.exports = { extends: [ 'stylelint-config-standard', 'stylelint-config-standard-scss', 'stylelint-config-recommended-vue' ], plugins: ['stylelint-order'], rules: { // 指定声明块内属性的顺序 'order/properties-order': [ 'position', 'top', 'right', 'bottom', 'left', 'z-index', 'display', 'float', 'width', 'height', 'max-width', 'max-height', 'min-width', 'min-height', 'padding', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'margin', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'border', 'border-style', 'border-width', 'border-color', 'border-top', 'border-top-style', 'border-top-width', 'border-top-color', 'border-right', 'border-right-style', 'border-right-width', 'border-right-color', 'border-bottom', 'border-bottom-style', 'border-bottom-width', 'border-bottom-color', 'border-left', 'border-left-style', 'border-left-width', 'border-left-color', 'border-radius', 'background', 'background-color', 'background-image', 'background-repeat', 'background-position', 'background-size', 'color', 'font', 'font-family', 'font-size', 'font-weight', 'line-height', 'text-align', 'text-justify', 'text-indent', 'text-overflow', 'text-decoration', 'white-space', 'vertical-align', 'cursor', 'opacity' ], // 允许 global 关键字 'selector-pseudo-class-no-unknown': [ true, { ignorePseudoClasses: ['global'] } ], // 允许空源 'no-empty-source': null, // 允许未知单位 'unit-no-unknown': null, // 允许未知属性 'property-no-unknown': null, // 允许未知伪类选择器 'selector-pseudo-element-no-unknown': null, // 允许未知伪元素选择器 'selector-type-no-unknown': null, // 允许未知规则 'at-rule-no-unknown': null, // 允许未知函数 'function-no-unknown': null }, overrides: [ { files: ['**/*.vue'], customSyntax: 'postcss-html' }, { files: ['**/*.scss'], customSyntax: 'postcss-scss' } ] }
  

2. 创建 .stylelintignore 文件来忽略某些文件

bash 复制代码
/dist/* 
/public/* 
/node_modules/*

3. 安装相关依赖

shell 复制代码
npm install --save-dev stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-config-recommended-vue stylelint-order postcss-html postcss-scss
  • stylelint: 一个强大的现代 CSS 样式检查工具,用于确保 CSS 代码的一致性和避免错误。

  • stylelint-config-standard: stylelint 的标准配置,包含一组推荐的规则,帮助你快速开始使用 stylelint。

  • stylelint-config-standard-scss: stylelint 的标准配置,专门用于 SCSS(Sass)文件,包含一组推荐的规则。

  • stylelint-config-recommended-vue: stylelint 的推荐配置,专门用于 Vue.js 项目,包含一组推荐的规则。

  • stylelint-order: 一个 stylelint 插件,用于检查和修复 CSS 属性的顺序,确保代码的一致性。

  • postcss-html : 一个 PostCSS 插件,用于解析 HTML 文件中的 <style> 标签和内联样式,允许在 HTML 文件中使用 PostCSS 处理 CSS。

  • postcss-scss: 一个 PostCSS 插件,用于解析 SCSS 文件,允许在 SCSS 文件中使用 PostCSS 处理 CSS。

4. 在项目中package.json中添加脚本

json 复制代码
{ // ... 其他配置 "scripts": { // ... 现有脚本 "stylelint": "stylelint \"src/**/*.{css,scss,vue}\"", "stylelint:fix": "stylelint \"src/**/*.{css,scss,vue}\" --fix" } }
相关推荐
打好高远球几秒前
mo契官网建设与SEO实践
前端
神仙别闹6 分钟前
基于Java+MySQL实现(Web)可扩展的程序在线评测系统
java·前端·mysql
心.c20 分钟前
react当中的this指向
前端·javascript·react.js
Java水解27 分钟前
Web API基础
前端
闲鱼不闲29 分钟前
实现iframe重定向通知父级页面跳转
前端
咸鱼青菜好好味29 分钟前
node的项目实战相关-2-前台接口
前端
春秋半夏30 分钟前
音乐播放、歌词滚动
前端·css
Sioncovy34 分钟前
Zustand 源码阅读计划(3)- JS 篇 - Middlewares 中间件逻辑
前端·javascript
bo5210035 分钟前
垃圾回收机制详解
前端
多啦C梦a37 分钟前
🪄 这么优雅?`useContext` + 自定义 Hooks:优雅管理全局状态,从主题切换说起
前端·javascript·react.js