前端代码规范实践与现状

现状

因为前端资源紧缺，需要跨小组进行开发支援，那么就得去适应其他项目的“条条框框”。效率上常常会有所下降，更有甚者，在多个项目之间来回切换，常常会把人弄得很疲惫。

而造成这些“条条框框”的原因之一就是没有统一的代码规范。可能只是在编辑器里对文件做一下保存操作，代码就“大变样”了。

涉及内容

• eslint
• stylelint
• prettier

调查

• 是否对 eslint 有所了解

  • 是否在项目中用过
  • 是否在开发工具中安装过 eslint 插件
  • 遇到 eslint 报错，是否知道如何查文档

  • 是否配置过 eslint

    • 启用或禁用某规则
    • 修改过某规则的配置项
    • 配置过 extends、plugins
  • 是否写过 eslint plugins 或 extends
  • 用过哪些 eslint 配置方案

• 是否对 stylelint 有所了解

  • 是否在项目中用过
  • 是否在开发工具中安装过 stylelint 插件
  • 遇到 stylelint 报错，是否知道如何查文档

  • 是否配置过 stylelint

    • 启用或禁用某规则
    • 修改过某规则的配置项
    • 配置过 extends、plugins
  • 是否写过 stylelint plugins 或 extends
  • 用过哪些 stylelint 配置方案

• 是否对 prettier 有所了解

  • 是否在项目中用过
  • 是否在开发工具中安装过 prettier 插件
  • 是否配置过 prettier

配置的制定逻辑

优先提高效率，保证一定的灵活性

• 适合项目的（最重要的）

• 使用更通用的

  • 默认配置的，精简好维护
  • 官方的、社区成熟稳定的，减少维护成本
• 尽量开启更多的校验规则，覆盖更多的场景

推荐配置

eslint

已有的社区方案

todo

配置组成

• airbnb javascript 风格指南
• vue 风格指南
• prettier 风格指南

stylelint

已有的社区方案

todo

配置组成

todo

prettier

为什么需要 prettier

因为它有一套现成的、看上去还不错的格式化体系。

prettier 的缺点就是有一份独立于 eslint 之外的配置，因为它不只服务于 js。

现有配置差异

eslint

todo

差异化适配

提供一份基础配置，根据实际情况，在项目中增加或覆盖基础配置。特别是需要重构的项目，对不能自动修复的规则，如果需要手动修复的范围较大，可以对这些规则进行关闭处理，后续逐条规则进行开启并修复。