VSCode如何配置styleLint

最新推荐文章于 2024-06-28 14:21:27 发布
最新推荐文章于 2024-06-28 14:21:27 发布
阅读量4.4k 收藏 1
点赞数
分类专栏： css&css3 VSCode 文章标签： stylelint scss css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huangpin815/article/details/101382919
版权
  • 在VSCode中安装插件ESLint
  • 在项目的根目录创建一个规则文件
    新建.stylelintrc如下
{
    "extends": "stylelint-config-recommended"
}

这是一个最简单的配置文件，你可以根据需求自行添加需求

  • 安装相关的npm包
npm install --save-dev stylelint-config-recommended
  • 重启VSCode即可
    VSCode中，只要是styleLint支持的文件都会被检查范式。
    在这里插入图片描述
    以上。
阿超就是我
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vscode-stylelint:官方的Visual Studio Code扩展，使用stylelint对lint CSSSCSSLess
05-12
vscode-stylelint 一个扩展皮棉 / /与 该扩展使用安装在打开的工作区文件夹中的stylelint库。 如果工作空间文件夹未提供stylelint，则扩展名将查找全局安装的stylelint。 如果不在全局安装的stylelint中，则扩展将...
微信小程序wxss文件stylelint配置stylelint-config-wxss-master.zip
09-25
`stylelint-config-wxss-master.zip`就是一套专门为微信小程序wxss文件定制的stylelint配置。 stylelint是一款强大的CSS静态检查工具，它可以检测出CSS语法错误、潜在的性能问题以及不符合编码规范的代码。`...
vscode+stylelint的入门
川端小树的博客
10-02 3700
前言 关于stylelint，就是个规范css的插件。点进来的人应该都只是想看怎么使用，简介就不写详细了。 1.配置使用 （1）先通过npm安装好stylelint及其用到的插件 npm i stylelint stylelint-config-standard stylelint-order stylelint-config-rational-order stylelint-scss -D 这里用到的插件有： stylelint stylelint-config-standard：st
关于vscode配置vue项目的eslint配置（整理中）
态度决定一切
09-25 2982
1.vsocde配置： 1.1安装eslint插件 2.2配置 { "workbench.colorTheme": "Default Light+", "window.menuBarVisibility": "default", "workbench.statusBar.visible": true, "workbench.activityBar.visible"...
stylelint 配置
weixin_45636198的博客
06-28 417
扩展 stylelint-config-recommended 共享配置并为 SCSS 配置其规则。扩展 stylelint-config-recommended 共享配置并为 Vue 配置其规则。共享 HTML (类似 HTML) 配置，捆绑 postcss-html 并对其进行配置。stylelint-config-recommended-scss 文档。stylelint-config-recommended-vue 文档。stylelint-config-html 文档。提供优化样式顺序的配置。
vscode+git+eslint+stylelint
最新发布
sinat_38992528的博客
06-28 56
完善了自己的工作流后，得益于自动格式修复，开发速度有显著提升，代码质量也上去了，更重要的是书写有了容错率，可以提前发现很多语法错误，真正的bug也可以通过git的版本控制来减少污染，通过比对找到bug根源作者：ssevenk链接：https://juejin.cn/post/6844903969492303879来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
VSCode 代码风格统一设置eslint + stylelint
张营的技术博客
06-10 1069
安装依赖 "babel-eslint": "^10.0.1", "eslint": "^5.16.0", "eslint-plugin-vue": "^5.0.0", "stylelint": "^13.13.1", "stylelint-config-standard": "^22.0.0" 配置 eslint配置 以下主要是考虑到代码格式化及可自动修复的常用配置，具体配置可查看官网配置： module.exports = { root: true, env: { browser: tr
vue项目使用eslint styleint 的vscode配置
xinbear的博客
07-02 431
1. 下载vscode插件 2. 打开设置 点击右上角按钮打开settings.json 添加如下设置 // 关闭VSCode在Save时候自动格式化，因为VSCode自带的格式化和ESlint规范并不兼容 "editor.formatOnSave": false, // 代码保存时，自动执行ESlint Stylelint格式化代码 "editor.codeActionsOnSave": { "source.fixAll.eslint": true, "source.fixAll.
vscode-lint:VSCode代码棉绒工具
05-09
vscode-lint是一个集成Stylelint和Eslint的VSCode配置工具，提供css/sass/scss/less、js/ts、react和vue的代码校验功能 vscode-lint用于规范团队代码风格和校验团队代码语法，增加整个项目的可维护性和接入性，减少...
awesome-stylelint：很棒的stylelint插件，配置等的列表
02-01
`awesome-stylelint` 是一个集合了众多优质Stylelint插件、配置示例和资源的列表，旨在提升你的CSS编码体验。 **一、Stylelint基础知识** 1. **基本用法**：Stylelint可以通过命令行工具或集成到构建流程中使用，...
cdliudefu#document#vscode中常用插件之stylelint使用1
07-25
1.安装stylelint库(在项目本地或全局安装，看具体项目需要) 2.创建.stylelint.config.js配置文件(手动创建或者复制其它已有配置文件
vscode ros开发环境setup
hoppss
03-12 1018
经常设置开发Google代码风格 preference/setting/ “搜索format” c/c++ 插件中，Clang_format_fallback_Style 填入Google 如何使用clang-format # 安装clang-format sudo apt-get install -y clang-format-3.9 whereis clang-format-3.9 #/usr/bin/clang-format-3.9 # Clang-format_path 填入上面路..
ESLint 在vscode编辑器中 搭建
AzerothYang的博客
04-17 5947
ESLint 在vscode编辑器中 搭建 先在vscode中安装ESlint 安装完成后打开终端控制台输入一下命令 npm i eslint -g //先全局安装eslint cd yourDocumentPath //进入你的文件目录 eslint --init //初始化eslint即可使用， 可以去eslint官网根据具体情况配置对.eslintrc
项目中配置 stylelint
junjiehou的博客
04-11 608
负责样式文件代码质量检查，规则列表详见官网。
2022 Stylelint 配置详细步骤（css、less、sass、vue适用）
热门推荐
m0_60273757的博客
07-13 1万+
Stylelint 2022 配置，能够较好兼容vue、less、css等。
这个神器牛逼了！点击页面元素 VSCode 居然跳转到了组件？
画漫画的程序员∙苏南
12-15 3838
点击上方“蓝色字体”，选择“设为星标”做积极向上的前端人！前言在大型项目开发中，经常会遇到这样一个场景，QA 丢给你一个出问题的链接，但是你完全不知道这个页面 & 组件对应的文件位...
vscode+CRA+TypeScript+eslint+prettier+stylelint+husky+lint-staged完整版配置
Eyno的博客
07-25 676
最近在做一个react项目，需要统一和规范代码风格，并且实现git管理，规范提交。所以基于CRA脚手架搭建项目整体框架，并自定义配置相关需求。
ESlint + Stylelint + VSCode自动格式化代码(2023)
分享我的编程经验和学习心得
11-28 5798
本文用 Vue 项目做示范。 利用 Vue CLI 创建项目时要将 ESlint 选上，下载完依赖后，用 VSCode 打开项目。 安装插件 ESLint，然后 File -> Preference -> Settings（如果装了中文插件包应该是 文件 -> 选项 -> 用户）， 搜索 eslint，点击 Edit in setting.json 将以下选项添加到配置.........
在vscode工具中，使用eslint，stylelint，htmlhint对vue项目代码格式的检查
DLGDark的博客
01-09 4650
1. 对js代码格式的检查： 首先全局安装以下插件： “eslint” “vue-eslint-parser” “babel-eslint” “eslint-config-alloy” “eslint-plugin-html” “eslint-plugin-import” “eslint-plugin-node” “eslint-plugin-promise” 在项目根目录添加 .eslint...
vscode 配置stylelint
05-10
要在 VS Code 中配置 Stylelint，您需要按照以下步骤操作： 1. 安装 VS Code 插件： 在 VS Code 中搜索并安装 `stylelint` 插件。 2. 安装 Stylelint： 可以使用 npm 在全局或项目中安装 Stylelint。打开终端并运行以下命令： ``` npm install -g stylelint ``` 3. 创建 Stylelint 配置文件： 在项目根目录中创建 `.stylelintrc` 或 `.stylelintrc.json` 文件，并添加您的配置。例如： ``` { "extends": "stylelint-config-standard", "rules": { "indentation": 4, "color-hex-case": "upper", "selector-pseudo-element-colon-notation": "single", "declaration-block-trailing-semicolon": "always", "block-no-empty": true } } ``` 4. 配置 VS Code： 在 VS Code 中打开设置（`Ctrl + ,`），并添加以下配置： ``` "stylelint.enable": true, "stylelint.config": { "extends": "stylelint-config-standard", "rules": { "indentation": 4, "color-hex-case": "upper", "selector-pseudo-element-colon-notation": "single", "declaration-block-trailing-semicolon": "always", "block-no-empty": true } } ``` 这将启用 Stylelint 并将其配置为使用您的 `.stylelintrc` 文件中的规则。 5. 检查样式： 在您的 `.css` 或 `.scss` 文件中开始编写样式，并且您应该会在编辑器中看到 Stylelint 的错误和警告。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值