WebStorm stylelint 自动修复

2024-02-20 03:20

本文主要是介绍WebStorm stylelint 自动修复,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

package.json引入插件

npm install

{"name": "fantastic-admin","version": "0.1.0","scripts": {"dev": "vite","build:test": "vite build --mode test","build": "vite build","serve:test": "http-server ./dist-test -o","serve": "http-server ./dist -o","svgo": "svgo -f src/assets/icons","new": "plop","generate:icons": "esno ./scripts/generate.icons.js","lint:eslint": "eslint src/**/*.{js,vue} --fix","lint:stylelint": "stylelint src/**/*.{css,scss,vue} --fix","prepare": "husky install","preinstall": "npx only-allow pnpm"},"dependencies": {"@imengyu/vue3-context-menu": "^1.0.9","@tinymce/tinymce-vue": "^5.0.0","@vueuse/core": "^8.7.5","@vueuse/integrations": "^8.7.5","@wcjiang/notify": "^2.1.0","axios": "^0.27.2","dayjs": "^1.11.3","element-plus": "^2.2.7","hotkeys-js": "^3.9.4","js-cookie": "^3.0.1","mitt": "^3.0.0","mockjs": "^1.1.0","node-waves": "^0.7.6","nprogress": "^0.2.0","path-browserify": "^1.0.1","path-to-regexp": "^6.2.1","pinia": "^2.0.14","qrcode": "^1.5.0","qs": "^6.11.0","sortablejs": "^1.15.0","spinkit": "^2.0.1","tinymce": "^6.1.0","vue": "^3.2.37","vue-i18n": "^9.1.10","vue-router": "^4.0.16"},"devDependencies": {"@iconify/json": "^2.1.70","@iconify/vue": "^3.2.1","@intlify/unplugin-vue-i18n": "^0.2.1","@unocss/preset-icons": "^0.41.2","@vitejs/plugin-vue": "^2.3.3","@vitejs/plugin-vue-jsx": "^1.3.10","@vue/compiler-sfc": "^3.2.37","eslint": "^7.12.1","eslint-plugin-vue": "^7.1.0","esno": "^0.16.3","fs-extra": "^10.1.0","http-server": "^14.1.1","husky": "^8.0.1","inquirer": "^9.0.0","lint-staged": "^13.0.3","plop": "^3.1.1","postcss-html": "^1.4.1","postcss-scss": "^4.0.4","sass": "^1.28.0","sass-loader": "^10.0.4","sass-resources-loader": "^2.1.1","stylelint": "^13.7.2","stylelint-config-recess-order": "^2.3.0","stylelint-config-recommended-scss": "^4.2.0","stylelint-config-standard": "^20.0.0","stylelint-order": "^4.1.0","stylelint-scss": "^3.18.0","svgo": "^2.8.0","unocss": "^0.41.2","unplugin-auto-import": "^0.9.2","unplugin-vue-components": "^0.20.1","vite": "^2.9.13","vite-plugin-banner": "^0.3.0","vite-plugin-compression": "^0.5.1","vite-plugin-html": "^3.2.0","vite-plugin-mock": "^2.9.6","vite-plugin-pages": "^0.24.3","vite-plugin-pwa": "^0.12.2","vite-plugin-restart": "^0.1.1","vite-plugin-spritesmith": "^0.1.1","vite-plugin-svg-icons": "^2.0.1","vite-plugin-vue-layouts": "^0.6.0","vite-plugin-vue-setup-extend": "^0.4.0","vue-eslint-parser": "^9.0.3","workbox-window": "^6.5.3"},"gitHooks": {"pre-commit": "lint-staged","commit-msg": "commitlint -E GIT_PARAMS"},"lint-staged": {"src/**/*.js": ["eslint --fix"],"src/**/*.vue": ["eslint --fix","stylelint --fix"],"src/**/*.{css,scss}": ["stylelint --fix"]},"postcss": {"plugins": {"autoprefixer": {}}},"browserslist": ["> 1%","last 2 versions","not ie <= 8"]
}

.stylelintrc设置规则

{"extends": ["stylelint-config-standard","stylelint-config-recommended-scss","stylelint-config-recess-order"],"plugins": ["stylelint-scss","stylelint-order"],"rules": {"indentation": 4,"rule-empty-line-before": "never","at-rule-empty-line-before": "never","at-rule-no-unknown": null,"no-descending-specificity": null,"selector-pseudo-element-no-unknown": [true, { "ignorePseudoElements": ["deep"] }],"selector-pseudo-class-no-unknown": null,"property-no-unknown": null,"font-family-no-missing-generic-family-keyword": null,"selector-id-pattern": null,"selector-class-pattern": null,"scss/no-global-function-names": null,"scss/at-import-partial-extension": null,"function-no-unknown": [true,{"ignoreFunctions": ["v-bind","map-get","lighten","darken","themed"]}],"property-no-vendor-prefix": [true,{"ignoreProperties": ["mask-image"]}],"max-line-length": null}
}

.stylelintignore

dist/
node_modules/
src/assets/sprites/

设置执行命令

$ProjectFileDir$\node_modules\stylelint\node_modules\.bin\stylelint.CMD
$FileName$ --fix
$FileDir$

在这里插入图片描述

设置快捷键

在这里插入图片描述

stylelint.CMD

@SETLOCAL
@IF NOT DEFINED NODE_PATH (@SET "NODE_PATH=E:\augurit\demo\Fantastic-pro-vue3\node_modules\.pnpm\node_modules"
) ELSE (@SET "NODE_PATH=%NODE_PATH%;E:\augurit\demo\Fantastic-pro-vue3\node_modules\.pnpm\node_modules"
)
@IF EXIST "%~dp0\node.exe" ("%~dp0\node.exe"  "%~dp0\..\..\bin\stylelint.js" %*
) ELSE (@SET PATHEXT=%PATHEXT:;.JS;=;%node  "%~dp0\..\..\bin\stylelint.js" %*
)

这篇关于WebStorm stylelint 自动修复的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/726871

相关文章

一文详解MySQL如何设置自动备份任务

《一文详解MySQL如何设置自动备份任务》设置自动备份任务可以确保你的数据库定期备份,防止数据丢失,下面我们就来详细介绍一下如何使用Bash脚本和Cron任务在Linux系统上设置MySQL数据库的自... 目录1. 编写备份脚本1.1 创建并编辑备份脚本1.2 给予脚本执行权限2. 设置 Cron 任务2

qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

《qt5cored.dll报错怎么解决?电脑qt5cored.dll文件丢失修复技巧》在进行软件安装或运行程序时,有时会遇到由于找不到qt5core.dll,无法继续执行代码,这个问题可能是由于该文... 遇到qt5cored.dll文件错误时,可能会导致基于 Qt 开发的应用程序无法正常运行或启动。这种错

电脑提示xlstat4.dll丢失怎么修复? xlstat4.dll文件丢失处理办法

《电脑提示xlstat4.dll丢失怎么修复?xlstat4.dll文件丢失处理办法》长时间使用电脑,大家多少都会遇到类似dll文件丢失的情况,不过,解决这一问题其实并不复杂,下面我们就来看看xls... 在Windows操作系统中,xlstat4.dll是一个重要的动态链接库文件,通常用于支持各种应用程序

MyBatis Plus 中 update_time 字段自动填充失效的原因分析及解决方案(最新整理)

《MyBatisPlus中update_time字段自动填充失效的原因分析及解决方案(最新整理)》在使用MyBatisPlus时,通常我们会在数据库表中设置create_time和update... 目录前言一、问题现象二、原因分析三、总结:常见原因与解决方法对照表四、推荐写法前言在使用 MyBATis

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件

Python使用pynput模拟实现键盘自动输入工具

《Python使用pynput模拟实现键盘自动输入工具》在日常办公和软件开发中,我们经常需要处理大量重复的文本输入工作,所以本文就来和大家介绍一款使用Python的PyQt5库结合pynput键盘控制... 目录概述:当自动化遇上可视化功能全景图核心功能矩阵技术栈深度效果展示使用教程四步操作指南核心代码解析

SpringBoot实现文件记录日志及日志文件自动归档和压缩

《SpringBoot实现文件记录日志及日志文件自动归档和压缩》Logback是Java日志框架,通过Logger收集日志并经Appender输出至控制台、文件等,SpringBoot配置logbac... 目录1、什么是Logback2、SpringBoot实现文件记录日志,日志文件自动归档和压缩2.1、

SpringCloud使用Nacos 配置中心实现配置自动刷新功能使用

《SpringCloud使用Nacos配置中心实现配置自动刷新功能使用》SpringCloud项目中使用Nacos作为配置中心可以方便开发及运维人员随时查看配置信息,及配置共享,并且Nacos支持配... 目录前言一、Nacos中集中配置方式?二、使用步骤1.使用$Value 注解2.使用@Configur

电脑蓝牙连不上怎么办? 5 招教你轻松修复Mac蓝牙连接问题的技巧

《电脑蓝牙连不上怎么办?5招教你轻松修复Mac蓝牙连接问题的技巧》蓝牙连接问题是一些Mac用户经常遇到的常见问题之一,在本文章中,我们将提供一些有用的提示和技巧,帮助您解决可能出现的蓝牙连接问... 蓝牙作为一种流行的无线技术,已经成为我们连接各种设备的重要工具。在 MAC 上,你可以根据自己的需求,轻松地

Golang实现Redis分布式锁(Lua脚本+可重入+自动续期)

《Golang实现Redis分布式锁(Lua脚本+可重入+自动续期)》本文主要介绍了Golang分布式锁实现,采用Redis+Lua脚本确保原子性,持可重入和自动续期,用于防止超卖及重复下单,具有一定... 目录1 概念应用场景分布式锁必备特性2 思路分析宕机与过期防止误删keyLua保证原子性可重入锁自动