更多VSCode插件使用请访问:VSCode常用插件汇总


vscode-stylelint这是一个检验CSS/SASS/LESS代码规范的插件。

StyleLint 使用指南

vscode-stylelint官网

vscode-stylelintt这是VS Code stylelint扩展。

首先简单说一下使用流程:

1.安装stylelint库(在项目本地或全局安装,看具体项目需要)

2.创建.stylelint.config.js配置文件(手动创建或者复制其它已有配置文件均可,看具体项目需求)

3.根据文档设置完,保存文件时即可进行eslint修复(MacOS:快捷键是 command + s )

安装

在项目本地或者全局安装stylelint库

npm install -d -save-dev stylelint

安装完stylelint库,还需要安装官方提供的stylelint-config-standard校验校准和一个css便携顺序的插件(先写定位,再写盒模型,再写内容区样式,最后写 CSS3 相关属性)stylelint-config-recess-order(建议安装到项目本地,否则不好引入到配置文件里面,全局安装也行,但是不能自定义rules了,各有千秋)

创建配置文件

手动创建或者从同事复制即可。

编辑器设置

为了防止编辑器内置的linter和此车就冲突,可以设置为:

"css.validate": false,
"less.validate": false,
"scss.validate": false

扩展程序设置

1.stylelint.enable

类型:boolean

默认值:true

控制是否启用此扩展。

2.stylelint.configOverrides

类型:Object

默认值:null

设置stylelint configOverrides选项。

3.stylelint.config

类型:Object

默认值:null

设置stylelint config选项。请注意,启用此选项后,stylelint不会加载配置文件。

4.stylelint.packageManager

类型:"npm" | "yarn" | "pnpm"

默认值:"npm"

控制程序包管理器以用于解析stylelint库。仅当stylelint库全局解析时,这才有影响。有效值为"npm"or "yarn"或"pnpm"。

5.editor.codeActionsOnSave

此设置支持该条目source.fixAll.stylelint。如果设置为true所有可自动修复的stylelint,则错误将在保存时修复。

"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true
}

下面的设置为包括stylelint在内的所有提供程序启用“自动修复”:

  "editor.codeActionsOnSave": {
"source.fixAll": true
}

您还可以通过以下方式有选择地禁用stylelint:

  "editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.stylelint": false
}

您还可以使用VS Code的语言范围设置来有选择地启用和禁用特定语言。要禁用codeActionsOnSaveHTML文件,请使用以下设置:

  "[html]": {
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": false
}
}

另请注意,在保存时运行代码操作的时间预算为750毫秒,这可能不足以容纳大型文件。您可以使用该editor.codeActionsOnSaveTimeout设置来增加时间预算。

指令

该扩展将以下命令添加到“命令”面板中。

  • Fix all auto-fixable problems:将stylelint自动修复解决方案应用于所有可修复的问题。

我的settings.json

{
//主题设置
"workbench.colorTheme": "Monokai",
// 默认编辑器字号
"editor.fontSize": 14,
//是否自动换行
"editor.wordWrap": "on",
// tab几个缩进
"editor.tabSize": 2,
// 文件自动保存
"files.autoSave": "afterDelay",
// 自动格式化粘贴的代码
"editor.formatOnPaste": true,
// 在资源管理器删除内容时候是否进行用户提醒
"explorer.confirmDelete": false,
// 控制在资源管理器内拖放移动文件或文件夹时是否进行确认
"explorer.confirmDragAndDrop": false,
// 在资源管理器拖拽文件是否进行用户提醒
"workbench.statusBar.visible": true,
// 工作区缩放级别
"window.zoomLevel": 0,
// 重命名或移动文件时,启用或禁用自动更新导入路径
"javascript.updateImportsOnFileMove.enabled": "always",
// 启用/禁用导航路径
"breadcrumbs.enabled": true,
// 终端cmd字号
"terminal.integrated.fontSize": 16,
// 不检查缩进,保存后统一按设置项来设置
"editor.detectIndentation": false,
// 编辑器初始界面
"workbench.startupEditor": "newUntitledFile",
// 工作台状态栏是否可见
"workbench.statusBar.feedback.visible":false,
// 添加多个光标时候需要的快捷键
"editor.multiCursorModifier": "ctrlCmd",
// 自定义代码片段显示的位置
"editor.snippetSuggestions": "top",
"window.menuBarVisibility": "toggle",
// 启用后,按下 TAB 键,将展开 Emmet 缩写。
"emmet.triggerExpansionOnTab": true,
// 控制编辑器在空白字符上显示符号的方式
"editor.renderWhitespace": "all",
// 控制编辑器是否应呈现空白字符
"editor.renderControlCharacters": false,
// 在文件和文件夹上显示错误和警告
"problems.decorations.enabled": false,
// html文件格式化程序
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features",
"editor.codeActionsOnSave": {
// 禁止eslint对html进行校验
"source.fixAll.eslint": false,
// 禁止stylelint对html进行校验
"source.fixAll.stylelint": false
}
},
// 编辑器文件保存时的操作(MacOS:快捷键是 command + s ),并不能修复所有问题,多数还是需要手动修复
//
"editor.codeActionsOnSave": {
// 文件保存时开启eslint自动修复程序
"source.fixAll.eslint": true,
// 文件保存时开启stylelint自动修复程序
"source.fixAll.stylelint": true
},
// "[javascript]": {
// "editor.defaultFormatter": "vscode.typescript-language-features"
// }, // vscode-fileheader -----settings begin----- // 文件作者
"fileheader.Author": "JiaoShouf2e",
// 文件最后修改者
"fileheader.LastModifiedBy": "JiaoShouf2e", // vscode-fileheader -----settings end----- //stylelint -----settings begin----- // 防止编辑器内置linter与插件冲突设置
"css.validate": false,
"less.validate": false,
"scss.validate": false,
// 启用stylelint插件
"stylelint.enable": true, //stylelint -----settings end----- // eslint -----settings begin----- // 是否为JavaScript文件开启eslint检测
"eslint.enable": true,
// 保存之后进行lint
"eslint.run": "onSave",
// 是否启用eslint的调试模式
"eslint.debug": true
// eslint -----settings end----- }

VSCode常用插件之vscode-stylelint使用的更多相关文章

  1. VSCode常用插件之ESLint使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 ESLint这是VS Code ESLint扩展,将ESLint JavaScript集成到VS Code中. 首先简单说一下使用流程: 1. ...

  2. VSCode常用插件汇总

    vscode常用插件汇总: 点击插件名字,查看使用文档 vscode-fileheader : 添加注释到文件头,并支持自动更新文件修改时间. EditorConfig for vs code :   ...

  3. VSCode常用插件之EditorConfig for vs code 使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 当大家在公司工作时,不可能永远是一个人维护一个项目,当多个人参与一个项目,每个人使用的编辑器不一样,代码风格自然也不一样,那么如何让使用不同编 ...

  4. VSCode常用插件之Simple New File使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 Simple New File这是一个从命令面板简单创建新文件.文件夹.通过侧边栏创建新文件可能会很繁琐.该扩展旨在通过命令面板使创建文件或目 ...

  5. VSCode常用插件之open in browser使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 open in browser安装完这个插件就可以在编辑器菜单右键html,在默认浏览器打开了,高级使用暂未了解,请自行其它文章学习

  6. VSCode常用插件之vscode-fileheader使用

    更多VSCode插件使用请访问:VSCode常用插件汇总 vscode-fileheader这是一个给js文件(html.css也可以使用,但是没意义!!!)生成头部注释的插件,每次修改js文件之后会 ...

  7. VsCode 常用插件清单

    插件离线安装说明 在一些内网开发环境中,无法做到在线安装,这个时候就需要对插件进行离线安装 了 打开 VSCode 插件市场网址 Extensions for the Visual Studio fa ...

  8. vscode常用插件快捷键

    俗话说,工欲善其事必先利其器,我们码农的器是什么尼?没错,就是我们亲爱的IDE,前端开发者最爱的编辑器应该是vscode了吧.但是我们要怎么去锋利它尼?不外乎就是熟悉它的使用方法.快捷键以及第三方的插 ...

  9. vscode常用插件

    vscode写JS/html/css是比较适合的,因为轻量级. 只是需要一些插件来完善VSCODE功能,感觉VSCODE就是要靠插件的,不然的话,只是一个高级的代码编辑器.可能比editplus&qu ...

随机推荐

  1. JVM源码分析之警惕存在内存泄漏风险的FinalReference(增强版)

    概述 JAVA对象引用体系除了强引用之外,出于对性能.可扩展性等方面考虑还特地实现了四种其他引用:SoftReference.WeakReference.PhantomReference.FinalR ...

  2. 12、PPP和HDLC

    PPP主要包括三个部分1.    在串行链路上封装上层数据报文的方法2.    LCP(link control protocals): 链路控制协议来配置和测试数据通信链路,协商PPP协议的配置参数 ...

  3. WTL使用双缓冲避免重绘闪烁

    1.继承自CDoubleBufferImpl template <class T> class CDoubleBufferImpl { public: // Overrideables v ...

  4. void * 和 void 在函数返回值中的区别

    一个很容易糊涂的问题. 在函数的返回值中, void 是没有任何返回值, 而 void * 是返回任意类型的值的指针. 还是看代码吧: #include <stdlib.h> #inclu ...

  5. Jenkins report 打开样式失败解决方案

    1.临时解决方案(重启Jenkins失效):在系统管理->脚本命令行: 执行: System.setProperty("hudson.model.DirectoryBrowserSup ...

  6. css 浏览兼容问题及解决办法 (2)

    1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. ...

  7. C++ 日期 & 时间(转)

    C++ 标准库没有提供所谓的日期类型.C++ 继承了 C 语言用于日期和时间操作的结构和函数. 为了使用日期和时间相关的函数和结构,需要在 C++ 程序中引用 头文件.有四个与时间相关的类型:cloc ...

  8. 01-Maven

    今日知识 1. Maven 2. 依赖管理 2. 项目构建 Maven 1. Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 2. Ma ...

  9. win10CPU版TensorFlow安装详细流程(踩N个坑之后的总结)

    版本说明: 多次实验后,python3.5+TensorFlow1.2+numpy1.16.4比较成功,不会报奇奇怪怪的错.(安装流程中会说到,不需要提前下载) 准备工作: 找到电脑:C:\Users ...

  10. 代码质量:SonarQube

    SonarQube SonarQube的安装 jenkins(十四):Jenkins和sonarqube集成 https://www.cnblogs.com/sunyllove/p/9895373.h ...