一个强大、现代的 linter 帮助团队避免规则错误,统一代码风格。和 eslint 类似可以继承开源社区的 config、自定义配置、写个性化的 rules 。
可按照官方引导 user-guide/get-started 进行配置。笔者目前公司项目采用的是 vue + scss + ts 实现的,这里主要会介绍 vue 和 scss 相关的配置。
stylelint 版本和依赖存在兼容性问题,下面依赖版本经过验证
stylelint 插件提供扩展规则,不提供预设配置。(我只提供配置,用不用是你的事)。命名规范为 stylelint-xxxx
我们项目使用到了 scss 预处理器,需要利用 stylelint-config-recommended-scss 做 scss 规则检查。
stylelint-scss 提供了 n 多条规则,stylelint-config-recommended-scss 内开启了部分配置。
面试的时候我们经常会被问到 css 的重排和重绘,坦白讲写代码的时候并没有太多人关心这个。 让 linter 来帮助我们自动修复多香。stylelint-config-recess-order (属性配置 + stylelint-order插件)可以帮我们实现
stylelint 与 eslint 类似,都与 Prettier 规则有冲突,stylelint-config-prettier 可以解决这些冲突,stylelint-prettier 插件优化 Prettier 的执行时机
可以是 .stylelintrc 或 .stylelintrc.js 或 stylelint.config.cjs 配置文件。推荐使用 .js 文件的形式方便自定义。
module.exports = {
/* 继承公共配置 */
"extends":[
"stylelint-config-recommended-scss",
"stylelint-config-recess-order",
"stylelint-prettier/recommended"
],
/* 扩展 stylelint 原生rules 的种类 */
"plugins": ["stylelint-prettier"],
/* 项目个性化的规则 */
rules: {
"selector-pseudo-element-no-unknown": [
true,
{
ignorePseudoElements: ["v-deep"],
}
],
"prettier/prettier": true,
"number-leading-zero": "always",
}
}
之前搞不懂为啥有些工具配置能支持 monorepo 项目组织形式,读官方文档发现 cosmiconfig 库帮忙做到了这件事情。
Stylelint uses cosmiconfig to find and load your configuration object.
项目配置应结合 lint-stage 、git-hooks 对执行时机和范围做优化。本文只讲手动执行。
package.json:
"lint:style": "stylelint 'src/**/*.{vue,htm,html,css,scss}' --fix"
在终端执行 npm run lint:style 看下代码的变化吧。
stylelint 通过使用 PostCSS api 来分析 CSS 的语法,实现样式的检查。
postcss 是 css 的 编译器。它和 babel 的功能设计类似, 有 parse -> transform -> generater 三个关键环节。开发者可以通过 parse 后的 AST 结构实现自定义的 lint 规则。
目前我们现在用的前后端分离模式属于第一阶段,下一阶段可以在前端工程化方面,对技术框架的选择、前端模块化重用方面,可多做考量。也就是要迎来“==前端为主的 MV* 时代==”。
当您必须使用匿名函数,请使用箭头函数表示法,它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。如果你有一个相当复杂的函数,你或许可以把逻辑部分转移到一个声明函数上。
standard是一个开源的JS代码规范库,制定了所谓standard(标准)的JS代码规范,配合编辑器插件可以实时检查代码规范以及语法错误,通过执行命令检查代码规范以及语法错误,自动修复(可以直接修复的)不合规范的代码,使其符合规范
对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。
为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码就相对较少,很多编程语言都采用这种组织代码的方式。在Node环境中,一个.js文件就称之为一个模块(module)
引号的使用,单引号优先(如果不是引号嵌套,不要使用双引号)、空格的使用问题:(关键字后 符号后 排版 函数 赋值符号= )等、不写没有使用过的变量,如果定义了一个变量,后来一直没有参与过运算,那么不应该定义这个变量...
嵌套的节点应该缩进;在属性上,使用双引号,不要使用单引号;属性名全小写,用中划线做分隔符;不要在自动闭合标签结尾处使用斜线(HTML5 规范 指出他们是可选的);不要忽略可选的关闭标签;
CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。module.exports属性表示当前模块对外输出的接口
W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组、社区组、商务组等)。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。
不要使用 @import 与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。CSS有些属性是可以缩写的,比如padding,margin,font等等,这样精简代码同时又能提高用户的阅读体验。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!