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

相关文章

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍:✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师,一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生,希望您们都共创辉煌!✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机

Python3 BeautifulSoup爬虫 POJ自动提交

POJ 提交代码采用Base64加密方式 import http.cookiejarimport loggingimport urllib.parseimport urllib.requestimport base64from bs4 import BeautifulSoupfrom submitcode import SubmitCodeclass SubmitPoj():de

【经验交流】修复系统事件查看器启动不能时出现的4201错误

方法1,取得『%SystemRoot%\LogFiles』文件夹和『%SystemRoot%\System32\wbem』文件夹的权限(包括这两个文件夹的所有子文件夹的权限),简单点说,就是使你当前的帐户拥有这两个文件夹以及它们的子文件夹的绝对控制权限。这是最简单的方法,不少老外说,这样一弄,倒是解决了问题。不过对我的系统,没用; 方法2,以不带网络的安全模式启动,运行命令行,输入“ne

Shell脚本实现自动登录服务器

1.登录脚本 login_server.sh #!/bin/bash# ReferenceLink:https://yq.aliyun.com/articles/516347#show all host infos of serverList.txtif [[ -f ./serverList.txt ]]thenhostNum=`cat ./serverList.txt | wc -l`e

Jenkins 通过 Version Number Plugin 自动生成和管理构建的版本号

步骤 1:安装 Version Number Plugin 登录 Jenkins 的管理界面。进入 “Manage Jenkins” -> “Manage Plugins”。在 “Available” 选项卡中搜索 “Version Number Plugin”。选中并安装插件,完成后可能需要重启 Jenkins。 步骤 2:配置版本号生成 打开项目配置页面。在下方找到 “Build Env

以后写代码都是AI自动写了,Cursor+Claude-3.5-Sonnet,Karpathy 点赞的 AI 代码神器。如何使用详细教程

Cursor 情况简介 AI 大神 Andrej Karpathy 都被震惊了!他最近在试用 VS Code Cursor +Claude Sonnet 3.5,结果发现这玩意儿比 GitHub Copilot 还好用! Cursor 在短短时间内迅速成为程序员群体的顶流神器,其背后的原因在于其默认使用 OpenAI 投资的 Claude-3.5-Sonnet 模型,这一举动不仅改变了代码生成

在 Qt Creator 中,输入 /** 并按下Enter可以自动生成 Doxygen 风格的注释

在 Qt Creator 中,当你输入 /** 时,确实会自动补全标准的 Doxygen 风格注释。这是因为 Qt Creator 支持 Doxygen 以及类似的文档注释风格,并且提供了代码自动补全功能。 以下是如何在 Qt Creator 中使用和显示这些注释标记的步骤: 1. 自动补全 Doxygen 风格注释 在 Qt Creator 中,你可以这样操作: 在你的代码中,将光标放在

Jenkins自动构建部署项目

1. 楔子 在实际开发中,经常需要编译、静态代码检查、自动化测试、打包、部署、启动等一连串重复机械的动作,浪费时间、而且容易出错,而Jenkins就是专门Continuous integration(CI)/ Continuous Deploy(CD)开源工具,本文简单介绍Jenkins的使用。 在线无安装免费试用Jenkins:http://www.jenkins.org.cn/test

【Spring Boot】 SpringBoot自动装配-Condition

目录 一、前言二、 定义2.1 @Conditional2.2 Condition2.2.1 ConditionContext 三、 使用说明3.1 创建项目3.1.1 导入依赖3.1.2 添加配置信息3.1.3 创建User类3.1.4 创建条件实现类3.1.5 修改启动类 3.2 测试3.2.1 当user.enable=false3.2.2 当user.enable=true 3.3

最新版 | 深入剖析SpringBoot3源码——分析自动装配原理(面试常考)

文章目录 一、自动配置概念二、半自动配置(误~🙏🙏)三、源码分析1、验证DispatcherServlet的自动配置2、源码分析入口@SpringBootApplication3、@SpringBootConfiguration的@Configuration4、@EnableAutoConfiguration的@AutoConfigurationPackage和@Import5、Auto