VSCode常用插件之vscode-stylelint使用

01/21 11:01
阅读数 317

更多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-----
    
}
展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部