vscode+vue3+stylelint+stylus配置

vue中使用stylus作为css编译器,先安装依赖:

yarn add stylelint stylelint-plugin-stylus -D

根据stylelint-plugin-stylus的文档进行配置,项目根目录建立stylelint.config.js,内容如下:

module.exports = {
  extends: [
    // add more generic rulesets here, such as:
    // "stylelint-config-standard",
    'stylelint-plugin-stylus/standard',
  ],
  rules: {
    // override/add rules settings here, such as:
    // "stylus/declaration-colon": "never"
  },
}

然后配置vscode编辑器,先安装扩展:stylelint

在扩展管理搜索安装

然后在vscode setting.json中添加配置:

  "stylelint.snippet": ["css", "less", "postcss", "scss", "stylus"],
  "stylelint.validate": [
    "css",
    "html",
    "javascript",
    "javascriptreact",
    "less",
    "markdown",
    "postcss",
    "sass",
    "scss",
    "source.css.styled",
    "source.markdown.math",
    "styled-css",
    "sugarss",
    "svelte",
    "typescript",
    "typescriptreact",
    "vue",
    "vue-html",
    "vue-postcss",
    "xml",
    "xsl",
    "stylus" // 重要
  ],
  "stylelint.customSyntax": "stylelint-plugin-stylus/custom-syntax" // 重要, 否则会提示 Unknown word CssSyntaxError 未知词 css句法错误

最后要做的是,开启文件保存自动修复,还是vscode setting.json中加入

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint": true // 这个很重要
  },

完成。

参考:
https://juejin.cn/post/6854573221916868616 【解决了Unknown word CssSyntaxError】
https://www.cnblogs.com/jiaoshou/p/12220999.html 【解决了保存文件自动修复】

http://cssor.com/vscodevue3stylelintstylus%e9%85%8d%e7%bd%ae.html

参与评论

邮箱地址不会被公开。 必填项已用*标注

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(58)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(55)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(33)移动开发(4)自然(26)