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

相关文章

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,:本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片

SpringBoot中封装Cors自动配置方式

《SpringBoot中封装Cors自动配置方式》:本文主要介绍SpringBoot中封装Cors自动配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot封装Cors自动配置背景实现步骤1. 创建 GlobalCorsProperties

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言:详细操作:步骤一:点击上方的 文件(File),点击&nbmyHIgsp;设置(Setti

mss32.dll文件丢失怎么办? 电脑提示mss32.dll丢失的多种修复方法

《mss32.dll文件丢失怎么办?电脑提示mss32.dll丢失的多种修复方法》最近,很多电脑用户可能遇到了mss32.dll文件丢失的问题,导致一些应用程序无法正常启动,那么,如何修复这个问题呢... 在电脑常年累月的使用过程中,偶尔会遇到一些问题令人头疼。像是某个程序尝试运行时,系统突然弹出一个错误提

电脑提示找不到openal32.dll文件怎么办? openal32.dll丢失完美修复方法

《电脑提示找不到openal32.dll文件怎么办?openal32.dll丢失完美修复方法》openal32.dll是一种重要的系统文件,当它丢失时,会给我们的电脑带来很大的困扰,很多人都曾经遇到... 在使用电脑过程中,我们常常会遇到一些.dll文件丢失的问题,而openal32.dll的丢失是其中比较

电脑win32spl.dll文件丢失咋办? win32spl.dll丢失无法连接打印机修复技巧

《电脑win32spl.dll文件丢失咋办?win32spl.dll丢失无法连接打印机修复技巧》电脑突然提示win32spl.dll文件丢失,打印机死活连不上,今天就来给大家详细讲解一下这个问题的解... 不知道大家在使用电脑的时候是否遇到过关于win32spl.dll文件丢失的问题,win32spl.dl

一文详解SQL Server如何跟踪自动统计信息更新

《一文详解SQLServer如何跟踪自动统计信息更新》SQLServer数据库中,我们都清楚统计信息对于优化器来说非常重要,所以本文就来和大家简单聊一聊SQLServer如何跟踪自动统计信息更新吧... SQL Server数据库中,我们都清楚统计信息对于优化器来说非常重要。一般情况下,我们会开启"自动更新

电脑提示msvcp90.dll缺少怎么办? MSVCP90.dll文件丢失的修复方法

《电脑提示msvcp90.dll缺少怎么办?MSVCP90.dll文件丢失的修复方法》今天我想和大家分享的主题是关于在使用软件时遇到的一个问题——msvcp90.dll丢失,相信很多老师在使用电脑时... 在计算机使用过程中,可能会遇到 MSVCP90.dll 丢失的问题。MSVCP90.dll 是 Mic

电脑报错cxcore100.dll丢失怎么办? 多种免费修复缺失的cxcore100.dll文件的技巧

《电脑报错cxcore100.dll丢失怎么办?多种免费修复缺失的cxcore100.dll文件的技巧》你是否也遇到过“由于找不到cxcore100.dll,无法继续执行代码,重新安装程序可能会解... 当电脑报错“cxcore100.dll未找到”时,这通常意味着系统无法找到或加载这编程个必要的动态链接库

Flask 验证码自动生成的实现示例

《Flask验证码自动生成的实现示例》本文主要介绍了Flask验证码自动生成的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 目录生成图片以及结果处理验证码蓝图html页面展示想必验证码大家都有所了解,但是可以自己定义图片验证码