使用ESLint快速设置Ember应用程序

想要为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文件并添加一个以下字符串,如:

Should have template error

然后运行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命令完成。