JavaScript 编码规范

最好的建议可能是**保持与文件中其他代码的一致性**。

我们使用 ESLint 自动分析 JavaScript 文件,无论是从代码编辑器内部还是从命令行。这里有 我们安装和配置它的指南

为了快速参考,这里列出了一些主要的代码风格规则

  • 引用浏览器全局变量(如 windowdocument)的文件需要在文件顶部添加 /* eslint-env browser */

  • 每行最多 90 个字符,

  • 使用 2 个空格缩进(不要使用 Tab 键!),

  • 使用驼峰命名法 (camelCasePlease),

  • 不要在下一行打开大括号,

  • 不要命名函数表达式:let o = { doSomething: function doSomething() {} };

  • 匿名函数前使用空格,但命名函数前不要使用空格

    • 匿名函数:function () {}

    • 命名函数:function foo() {}

    • 匿名生成器函数:function* () {}

    • 命名生成器函数:function* foo() {}

  • 力求函数简短,最多 24 行(ESLint 有一个检查函数复杂度的规则),

  • aArguments aAre the aDevil(请不要使用它们),

  • "use strict"; 每个模块全局使用,

  • 分号; // 使用它们,

  • 不要使用逗号优先,

  • 考虑使用 async/await 来编写易于阅读的异步代码,而不是格式化无尽的 .then 链,

  • 使用 ES6 语法

    • function setBreakpoint({url, line, column}) { ... },

    • (...args) => { } rest 参数很棒,不需要 arguments

    • for..of 循环,

  • 不要使用非标准的 SpiderMonkey 专有语法

    • 不要使用 for each 循环,

    • 不要使用 function () implicitReturnVal

    • getter/setter 需要使用 { },

  • 仅将特定且明确声明的符号导入到您的命名空间

    • const { foo, bar } = require("foo/bar");,

    • const { foo, bar } = ChromeUtils.import("...");,

  • 尽可能使用 Maps、Sets、WeakMaps,

  • 尽可能使用 模板字符串 来避免连接,允许多行字符串和插值。

注释

注释代码很重要,但糟糕的注释也会造成伤害,因此在编写注释时务必牢记以下几点规则

  • 如果可以重写代码使其更易读,那么应该优先于编写解释性注释。

  • 与其编写注释来解释一个糟糕的变量名的含义,不如重命名该变量。

  • 避免使用像 // ****************** another section below ********** 这样的长分隔符注释。它们通常是您应该将文件拆分为多个文件的标志。

  • 行注释位于其注释的代码上方,而不是位于行的末尾。

  • 注释中的句子以大写字母开头,并以句点结尾。

  • 注意拼写错误。

  • 过时的复制粘贴代码会造成伤害,请确保您更新复制粘贴代码块内的注释。

  • 在文件的最顶部添加一个全局注释,解释文件的作用以及它包含的主要类型/类/函数,对于快速浏览代码来说是一个好主意。

  • 如果您被迫在代码中使用某种 hack,并且没有其他方法可以解决,那么请添加一个注释来解释 hack 以及它为什么需要。审查者无论如何都会要求您这样做。

  • 注释中的项目符号应使用与第一个注释对齐的星号来格式化每个项目

// headline comment
// * bullet point 1
// * bullet point 2

异步代码

DevTools 中的许多代码都是异步的,因为其中许多代码依赖于连接到 DevTools 服务器并以异步方式从那里获取信息。

异步代码很容易出错,因此以下几点准则应该有所帮助

  • 优先使用 Promise 而不是回调函数。

  • 使用 new Promise(() => {}) 语法。

  • 不要忘记通过定义拒绝处理程序来捕获拒绝:promise.then(() => console.log("resolved"), () => console.log("rejected"));promise.catch(() => console.log("rejected"));

  • 利用 async 和 await

React & Redux

在 .eslintrc 文件中有一些 React 特定的代码风格规则。

组件

  • 默认情况下,将组件创建为 无状态函数组件

  • 如果您需要本地状态或生命周期方法,请使用 React.createClass 而不是函数。

  • 使用 React.DOM 创建原生元素。将其分配给名为 dom 的变量,并像 dom.div({}, dom.span({})) 一样使用它。您也可以直接解构特定的元素:const { div, ul } = React.DOM

PropTypes

  • 使用 PropTypes 定义组件的预期属性。每个直接访问的属性(或属性的子项)都应该有一个对应的 PropType。

  • 对于任何必需属性,请使用 isRequired

  • 将 propTypes 定义放在组件的顶部。如果使用无状态函数组件,请将其放在函数声明的上方。

  • 在使用 children 属性的地方,请考虑 验证子项