在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" } }
相关推荐
风无雨19 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没1 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN1 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
用户99045017780092 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家2 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化
袁煦丞2 小时前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆2 小时前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记3 小时前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆3 小时前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js