devpoint.cn

想要为Ember应用设置一个linter？最近用少数几个存储库设置了ESLint，所以我认为是时候再发表一篇有关如何快速启动和运行的文章了。本文是假设你已经大致了解ESLint和Linting。

ESLint是一个JavaScript代码静态检查工具，可以检查JavaScript的语法错误，提示潜在的bug，可以有效提高代码质量，维持前端团队高度一致的编码风格。ESLint不但提供一些默认的规则，也提供用户自定义规则来约束所写的JavaScript代码。本文将详细介绍ESLint

注意：看起来像一个新的ESLint插件，用于Ember最佳实践，请阅读README。

安装ember-cli-eslint

进入Ember应用程序目录并运行

ember install ember-cli-eslint

在运行上面的ember安装之后，将看到如下消息。默认情况下，Ember应用程序会为您创建那些JSHint配置文件。因此我们这里选择覆盖规则。

无论选择什么选项，都会在目录的根目录中找到一个`.eslintrc.js`文件。此文件是指定linting规则的位置。

创建一个测试规则

现在我们来做一个快速测试，看看是否工作，修改.eslintrc.js文件，像这样:

module.exports= {
  // other stuff
  rules: {
      'no-console': 'error' // error if console statements
  }
};

这条规则定义了，程序中如果有任何控制台语句，它就会提示错误。

确保规则生效

真正好的是，linting规则是在运行ember t时计算的。只需进入JS文件之一，添加一个console.log("hello world");语句并运行ember t。应该会得到一个如下所示的linting错误：

ember-quickstart/app/components/pasta-selector.js
  6:13  error  Unexpected console statement  no-console
✖ 1 problem (1 error, 0 warnings)

添加有利于开发的规则

根据项目是独自工作还是团队合作，可能需要遵循某些规则。可用规则可在ESLint网站上找到。就像在上面添加测试规则一样添加它们。

安装 ember-cli-template-lint

刚才我们讲述的是linting JS文件，hbs模板呢？同样也需要定一个规则。

ember install ember-cli-template-lint

运行上述命令后，将创建一个.template-lintrc.js文件，里面就是模板规则。

创建一个测试模板规则

现在进行一次快速测试，以确保所有设置均已完成，以便对模板进行整理。将以下内容添加到.template-lintrc.js文件中：

module.exports= {
    extends: 'recommended',
    rules: {
        'bare-strings': true // don't allow bare strings
    }
};

确保规则生效

转到一个hbs文件并添加一个以下字符串，如：

然后运行ember t，将看到以下提示：

bare-strings: Non-translated string used (ember-quickstart/templates/components/pasta-selector @ L1:C5):
`Should have template error`
===== 1 Template Linting Error

这些错误显示在控制台输出的顶部，因此，如果使用的是大量错误的大型代码库，则可能会错过它们。

not ok 4 PhantomJS 2.1 - TemplateLint - ember-quickstart/templates/components/pasta-selector.hbs: should pass TemplateLint

添加有利于开发的规则

可用的模板规则可以在ember-template-lint 的[README] 文件中找到。下面是一个简单的例子：

module.exports = {
    extends: 'recommended',
    rules: {
        'bare-strings': true,
        'triple-curlies': false,
        'block-indentation': 4
    }
};

配置编辑器

如果使用VSCode，则此[ESLint扩展]很棒。我最喜欢的部分是安装后即可使用。不需要其他设置（^_^）。该扩展程序还有一个自动修复命令，它将自动解决任何lint错误。这可以通过通过ESLint: Fix all auto-fixable problems命令完成。