- 综合排序
- 最热优先
- 最新优先
- 来自专栏友人a的笔记丶
Stylelint该如何配置？Stylelint使用以及相关配置说明
官方网站：https://stylelint.io/ StyleLint 1.安装 stylelin本体：https://www.npmjs.com/package/stylelint stylelint-config-standard 拓展配置：https://www.npmjs.com/package/stylelint-config-standard npm install --save-dev stylelint stylelint-config-standard 2.配置 stylelint按如下顺序寻找配置文件： package.json .stylelintrc|.json|.yaml|js stylelint.config.js stylelint.config.cjs ://stylelint.io/user-guide/usage/postcss-plugin 命令行使用：https://stylelint.io/user-guide/usage/cli（stylelint /html", "stylelint-config-html/xml", "stylelint-config-html/vue", "stylelint-config-html/
4.7K20编辑于 2023-02-17 Stylelint——Unexpected unknown pseudo-class selector :deep
前言新项目制定规范接入了stylelint，并通过husky在git提交时去触发检测修复，stylelint版本信息如下： "stylelint": "^16.8.1", "stylelint-config-standard ": "^36.0.1", "stylelint-less": "^3.0.1", "stylelint-order": "^6.0.4",内容在stylelint.config.js中加入相应的 rules进行配置；module.exports = { defaultSeverity: 'error', extends: ['stylelint-config-standard'], plugins : ['stylelint-less'], overrides: [ { files: ['**/*.html', '**/*.vue'], customSyntax: 'postcss-html
53810编辑于 2024-08-27- 来自专栏编程技术分享
ESlint + stylelint + VSCode自动格式化代码(2020)
stylelint 格式化 css 代码 下载依赖 npm install --save-dev stylelint stylelint-config-standard 在项目根目录下新建一个 .stylelintrc.json 文件并输入以下内容： { "extends": "stylelint-config-standard" } VSCode 添加 stylelint 插件 [在这里插入图片描述] 然后就可以看到效果了 例如我想要用 4 个空格作为缩进，可以这样配置： { "extends": "stylelint-config-standard", "rules": { "indentation
2.7K50发布于 2020-09-28 - 来自专栏大宇笔记
Unknown rule function-calc-no-invalid.Stylelint(function-calc-no-invalid)
项目场景： React 项目 Umi框架 Mac系统 VScode ---- 问题描述 安装StyleLint 检查css，出现问题。 styleint 配置： { "extends": ["stylelint-config-standard", "stylelint-config-rational-order", "stylelint-prettier ", "stylelint-prettier"], "rules": { "prettier/prettier": true, "no-descending-specificity" (function-calc-no-invalid) 解决方案： stylelint-config-standard. 官网issue： https://github.com/stylelint/stylelint/issues/5653
1.9K10编辑于 2022-05-06 Stylelint—— Expected class selector .nut-popup--top to be kebab-case selector
前言新项目制定规范接入了stylelint，并通过husky在git提交时去触发检测修复，stylelint版本信息如下： "stylelint": "^16.8.1", "stylelint-config-standard ": "^36.0.1", "stylelint-less": "^3.0.1", "stylelint-order": "^6.0.4",内容因为使用的是NutUi，所以无法直接调整组件对应的类名称 ，只好在stylelint.config.js中加入相应的rules进行配置；module.exports = { defaultSeverity: 'error', extends: ['stylelint-config-standard '], plugins: ['stylelint-less'], overrides: [ { files: ['**/*.html', '**/*.vue'], customSyntax
31410编辑于 2024-08-27- 来自专栏前端小叙
2020最新编辑器集成eslint、prettier、stylelint，git提交预检查代码配置
webstorm 编辑器自动格式化配置： plugin webstorm设置搜eslintr、eslint、stylelint，如果没有，搜plugin，安装prettier、eslint、stylelint "editor.codeActionsOnSave": { // eslint开启 "source.fixAll.eslint": true, // stylelint 开启 "source.fixAll.stylelint": true }, // prettier:保存时自动格式化所有支持文件：javascript/javascriptreact :fix": "npx stylelint \"**/*.css,.less,.scss\" --fix" }, "husky": { "hooks": { "pre-commit": "npx {css,less,scss}": "npm run stylelint:fix" } 3、切记，先 git add ，提交到暂存， git commit 提交，就会执行lint-staged下配置的校验命令
3.2K10发布于 2020-09-24 - 来自专栏前端小叙
eslint+prettier学习
npm install stylelint --save-dev stylelint-config-prettier npm install --save-dev stylelint-config-prettier "stylelint-config-prettier" ] } stylelint-config-recommended 所有样式问题都会暴露 npm install stylelint-config-recommended --save-dev stylelint-config-standard stylelint-config-standard是stylelint的推荐配置 stylelint-order是 css 属性排序插件 npm install stylelint-config-standard --save-dev stylelint-order npm install stylelint-order --save-dev : [ 'stylelint-order', 'stylelint-scss' ], rules: { "order/order": [
2.7K20发布于 2020-09-24 - 来自专栏前端二次元
利用 Lint 工具链来保证代码风格和质量
样式规范工具: Stylelint接下来我们进入Stylelint的部分，先来看看官方的定义:Stylelint，一个强大的现代化样式 Lint 工具，用来帮助你避免语法错误和统一代码风格。 首先让我们来安装 Stylelint 以及相应的工具套件：pnpm i stylelint stylelint-prettier stylelint-config-prettier stylelint-config-recess-order stylelint-config-standard stylelint-config-standard-scss -D然后，我们在 Stylelint 的配置文件.stylelintrc.js中一一使用这些工具套件 :// .stylelintrc.jsmodule.exports = { // 注册 stylelint 的 prettier 插件 plugins: ['stylelint-prettier'] 当然，你也可以在 VSCode 中安装Stylelint插件，这样能够在开发阶段即时感知到代码格式问题，提前进行修复。当然，我们也可以直接在 Vite 中集成 Stylelint。
1.6K20编辑于 2023-11-24 - 来自专栏云原生之路
聊聊如何保障前端代码质量和代码风格
插件安装/配置一次即可，插件详情可自行baidu ”eslint“: javascript代码检测工具 ”eslint-plugin-vue“：针对vue的eslint插件 "stylelint ": css检测工具 "stylelint-config-standard": stylelint的推荐配置 "stylelint-order": css属性排序插件，合理的排序加快页面渲染 "stylelint-scss": 增加支持scss语法 第一关，保存时：vscode插件eslint+stylelint 解决痛点：ide保存时自动格式化代码，省时省力高效 编辑器安装插件后能够读取 eslint/stylelint配置文件并对不符合规范的地方出现红色的波浪线提示；可配置ctrl+s 保存时自动格式化当前文件js和css部分，但是错误无法自动修复，如定义一个变量并未使用。 ":true }, //自动格式化粘贴的代码 "files.autoSave": "afterDelay" } 第二关，提交时： husky+lint-staged+ eslint/stylelint
1.3K20发布于 2021-03-05 - 来自专栏Nuxt.js 实战系列
Nuxt3 实战 (二)：配置 Eslint、Prettierrc、Husky等项目提交规范
Stylelint：一个用于检测 CSS 代码中潜在问题和风格错误的工具。它可以帮助我们规避 CSS 上的一些错误和风格的统一。 配置 Stylelint 1、 执行安装命令 pnpm add stylelint @nuxtjs/stylelint-module stylelint-config-standard stylelint-order /stylelint-module', // With options ['@nuxtjs/stylelint-module', { /* module options */ }] ] 3、 新增 .stylelintrc.cjs 文件，具体配置请参考Stylelint 配置： module.exports = { extends: ['stylelint-config-standard ','stylelint-config-recommended-vue'], // 这里保证 stylelint-config-recommended-vue 放在最后，不然 vue 文件会报错 plugins
1.3K10编辑于 2025-08-13 - 来自专栏前端有的玩
我在项目中是这样配置Vue的
stylelint-config-recess-order stylelint-config-standard stylelint-prettier stylelint-scss 同时还需要给vscode 以下插件 eslint stylelint Prettier - Code formatter 配置vscode 在vscode的setting文件里面添加以下代码 "eslint.enable":true ","stylelint-config-recess-order"], "plugins": [ "stylelint-scss" ], rules: { // 校验规则略 } } .stylelintignore文件内容与.eslintignore文件内容一致 配置完之后，在package.json的script里面添加 "stylelint": "stylelint eslint与stylelint进行代码校验，校验失败无法提交 结语 不要吹灭你的灵感和你的想象力; 不要成为你的模型的奴隶。
1.3K30发布于 2021-07-27 - 来自专栏前端全栈分享
实战案例：初探工程配置 & 图标组件热身
StyleLint 接着我们把负责样式风格和质量的 StyleLint[3] 也配置一下，这里顺手安装了几个 config，包括 StyleLint 的标准配置以及应用到 SCSS-like 文件 和 yarn add -DW stylelint stylelint-config-standard stylelint-config-standard-scss stylelint-config-standard-vue [ // 引入 stylelint-config-prettier 'stylelint-config-prettier' ], 此时，我们会发现随意修改 vue 文件后，对于一些低级的代码风格问题 类似地，我们把stylelint-prettier也安装一下。 yarn add -DW stylelint-prettier 修改配置： // stylelint.config.js { "plugins": ["stylelint-prettier"],
95820编辑于 2023-03-02 - 来自专栏JowayYoung谈前端
一键格式化代码带来的快感 | 你还在为每个项目配置Stylelint和Eslint吗
前言 大部分前端项目都配置Stylelint、Eslint、Tslint和Prettier四大前端代码校验工具。 以下提及的「Stylelint」和「Eslint」均为VSCode插件 以下提及的「stylelint」和「eslint」均为NPM依赖 步骤 前方高能，两大步骤就能为VSCode部署「一键格式化代码」 安装依赖 为了搞清楚两个插件集成哪些NPM依赖，以下区分安装stylelint和eslint及其相关依赖(「看看即可，不要安装，重点在后头」)。 # Stylelint npm i -D stylelint stylelint-config-standard stylelint-order # Eslint npm i -D eslint babel-eslint ": "path/vscode-lint", "stylelint.configOverrides": { "extends": "stylelint-config-standard
2.1K10发布于 2021-03-04 - 来自专栏从零开始写一套广告组件
【二】项目规范和项目管理
配置Stylelint 在配置之前，我们同样需要安装一些插件，插件列表如下： stylelint：https://stylelint.io/ stylelint：https://www.npmjs.com /package/stylelint stylelint-config-standard：https://www.npmjs.com/package/stylelint-config-standard ": "stylelint src/**/*. {html,vue,sass,less}", "stylelint:fix": "stylelint --fix src/**/*. stylelint /Users/wangyang/Documents/eaui > stylelint src/**/*.
59910编辑于 2024-09-24 - 来自专栏前端小叙
15分钟快速配置eslint,prettier,lint-staged,husky,commitizen实现前端项目代码规范化
stylelint：css样式格式校验 2.代码提交规范相关 lint-staged：一个在git暂存文件上运行linters的工具，检查本次修改更新的代码，并自动修复并且可以添加到暂存区 husky: stylelint-config-prettier stylelint-config-standard husky lint-staged commitizen commitlint-config-cz ": "^14.5.0", "stylelint-config-prettier": "^9.0.3", "stylelint-config-standard": "^25.0.0 /node_modules/cz-conventional-changelog" } } } 配置eslint、prettier、stylelint eslint 是主要还是负责代码规则校验 / module.exports = { extends: ['stylelint-config-standard', 'stylelint-config-prettier'], plugins
6.1K31编辑于 2022-05-09 - 来自专栏前端迷
软技能提升：转转中后台规范落地实践
规范 stylelint 有一百多条的校验规则，并且还在逐步增加...尽管如此，但是他们都是默认关闭的我们是基于 stylelint-config-standard。 ](https://github.com/umijs/fabric/blob/master/src/stylelint.ts "@umijs/fabric stylelint") [stylelint 更多中文解释](http://stylelint.cn/user-guide/rules/ "stylelint 更多中文解释") [stylelint-config-standard](https ://github.com/stylelint/stylelint-config-standard "stylelint-config-standard") [stylelint-config-css-modules [stylelint-config-prettier](https://github.com/prettier/stylelint-config-prettier#readme "stylelint-config-prettier
1.2K31发布于 2020-10-26 - 来自专栏小鑫の随笔
前端工程化之 commitlint + husky 实现 git 提交规范化
配置 stylelint-config-standard 是 stylelint 的推荐配置 stylelint-order css 属性排序插件(先写定位，再写盒模型，再写内容区样式，最后写 CSS3 相关属性) stylelint-config-recess-order stylelint-order 插件的第三方配置 安装依赖 npm i stylelint stylelint-config-standard stylelint-order stylelint-config-recess-order -D 根目录新建一个 .stylelintrc.js 文件 module.exports = { processors : [], plugins: [], extends: ['stylelint-config-standard', 'stylelint-config-recess-order'], rules ": "^13.13.1", "stylelint-config-recess-order": "^2.4.0", "stylelint-config-standard": "^22,
4.1K31编辑于 2022-05-11 - 来自专栏一个会写诗的程序员的博客
react-app-rewired 修改 react 项目默认端口号
eject": "react-scripts eject", "eslint": "eslint src/ --ext .ts,.tsx,.js,.jsx --fix --cache", "stylelint ": "stylelint 'src/**/*.less' 'src/**/*.css' --fix --cache", "pre-commit": "pretty-quick --staged && npm run eslint && npm run stylelint", "prepare": "husky install && husky add .husky/pre-commit
1K20编辑于 2022-05-13 - 来自专栏前端儿
前端代码乱糟糟？是时候引入代码质量检查工具了
中提供了 stylelint-processor-arbitrary-tags 插件，不过新版似乎内置了支持。 新增一个构建任务，可命名为，StyleLint-Fix.sublime-build 以支持自动修复检查的错误 ? 打开插件配置，在User部分填入以下内容并保存即可 stylelint配置中的executable全局路径需要设置好 ? \\Roaming\\npm\\stylelint.cmd" "executable": "/usr/local/bin/stylelint" } } } 使用 StyleLint-Fix 进行自动修复CSS 这个需要调出构建任务列表层，或者使用快捷键 Ctrl+Shift+B，选择我们的fix任务执行即可 ?
3.3K10发布于 2018-09-03 - 来自专栏Vue开发社区
从 0 搭建 Vite 3 + Vue 3 前端工程化项目
安装依赖 `Stylelint`[36] - Stylelint 本体 `stylelint-config-prettier`[37] - 关闭 Stylelint 中与 Prettier 中会发生冲突的规则 `stylelint-config-standard`[38] - Stylelint 官方推荐规则 `stylelint-config-recommended-vue`[39] - 检验 vue 文件中的样式 `stylelint-order`[40] - CSS 属性顺序规则插件 npm i stylelint stylelint-config-prettier stylelint-config-standard stylelint-config-recommended-vue stylelint-order -D 复制代码 安装插件 Visual Studio Code 编辑器使用 Stylelint 配置需要下载插件 Stylelint 。
4.7K10编辑于 2023-02-27
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号