如何配置 jshint 避免 "Bad line breaking before" 错误？

在前端开发中，我们经常需要使用代码检查工具来确保代码的质量和一致性。其中一个流行的工具是 JSHint，它可以帮助我们找出潜在的问题并提供更好的代码提示。

然而，在使用 JSHint 进行代码检查时，我们可能会遇到一个常见的错误："Bad line breaking before"。这个错误通常发生在我们换行的位置不符合规范时。那么，如何避免这个错误呢？

1. 确认错误位置

首先，我们需要确认错误发生的位置。根据错误提示，我们可以知道错误发生在哪一行，并且能够查看完整的错误信息。例如：

app.js: line 10, col 3, Bad line breaking before '('. (jshint W014)

在这个例子中，错误发生在 app.js 文件的第 10 行，第 3 列，错误类型为 "Bad line breaking before"。

2. 理解错误原因

接下来，我们需要理解这个错误的原因。JSHint 在发现我们换行的位置不符合规范时会报出这个错误。具体来说，它要求我们在以下几个情况下不要换行：

• ","（逗号）后面不要换行。
• ";"（分号）后面不要换行。
• "{"（左括号）后面不要换行。
• "}"（右括号）前面不要换行。

如果我们违反了这些规则，JSHint 就会给出 "Bad line breaking before" 错误。

3. 配置 JSHint

为了避免这个错误，我们需要对 JSHint 进行配置。具体来说，我们需要在 .jshintrc 文件中添加以下规则：

{
  "maxlen": 120, // 设置每行最大字符数
  "latedef": false, // 允许变量在声明之前使用
  "laxcomma": true // 允许 "," 后面换行
}

其中，"maxlen" 规定了每一行的最大字符数，可以根据自己的习惯进行设置。"latedef" 规则允许我们在变量声明之前使用变量，更加灵活。"laxcomma" 规则则允许逗号后面换行，解决了我们的问题。

4. 示例代码

下面是一个示例代码，它包含了逗号后面换行的情况。如果我们使用默认的 JSHint 配置进行检查，就会报出 "Bad line breaking before" 错误。而通过配置 .jshintrc 文件中的 "laxcomma" 规则，我们就可以避免这个错误。

var foo = {
  a: 1,
  b: 2, // 逗号后面换行
  c: 3
};

5. 总结

通过以上步骤，我们可以避免 JSHint 报出 "Bad line breaking before" 错误。同时，这个过程也让我们理解了 JSHint 的一些规则和配置方法，更好地使用它来提高代码质量和效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28197