美文网首页
eslint和stylelint让你的代码更规范

eslint和stylelint让你的代码更规范

作者: mensionyu | 来源:发表于2018-10-25 23:24 被阅读0次


    stylelint是什么?

    stylelint 是一个基于 Javascript 的代码审查工具,它易于扩展,支持最新的 CSS 语法,也理解类似 CSS 的语法。此外,因为它是基于 JavaScript,所以比起 Ruby 开发的 scss-lint 速度更快。

    stylelint 是一个强大和现代的 CSS 审查工具,有助于开发者推行统一的代码规范,避免样式错误。stylelint 由 PostCSS 提供技术支持,所以它也可以理解 PostCSS 解析的语法,比如 SCSS。

    PostCSS 是一个使用 JS 解析样式的插件集合,它可以用来审查 CSS 代码,也可以增强 CSS 的语法(比如变量和混合宏),还支持未来的 CSS 语法、行内图片等等。正因为PostCSS解析器,因此stylelint支持SCSS,Less以及新SugarSS。如果你想要实现另外一个自定义语法的支持,你可以通过PostLess得以实现!

    PostCSS 的哲学是专注于处理一件事,并做到极致,目前它已经有了 200 多个插件,由于它们都是基于 JavaScript 编写的,所以运行速度非常快。

    一 .对js的检查

    1.yarn global add eslint --全局安装eslint

    2.eslint --init --在本地初始化

    在package.json里script脚本里配置`"lint:js": "eslint *.js"` "test": "lint:*"

    新建一个index.js文件 在终端使用eslint index.js

    有错误的会报错还有 改错继续检查

    3.npm run eslint  检查项目下所有的js文件的规范

    4.eslint index.js--检查单个文件

    二 对样式的检查

    1.yarn global add stylelint--全局安装stylelint

    本地安装 npm install stylelint-config-standard --save-dev
    在项目中添加配置文件"stylelint.config.js"

    新建style.less文件

    2.npm install stylelint-config-standard -D

    3.npm run lint:css--检查项目目录下所有css文件的准确性


    4.stylelint style.less--检查单个文件

    终端使用yarn add npm-run-all串行执行多个脚本的npm包
    npm run test找lint 脚本

    添加"test": "npm-run-all --parallel lint:*" 串行执行的模糊匹配的多个脚本

    5.npm run test 运行所有的eslint和stylelint对应的lint:*脚本

    修改test对应值

    执行结果如图

    相关文章

      网友评论

          本文标题:eslint和stylelint让你的代码更规范

          本文链接:https://www.haomeiwen.com/subject/dmjctqtx.html