首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

从JSCS迁移 | Migrating from JSCS

2016年4月,我们宣布 JSCS 项目关闭,JSCS 团队将加入 ESLint 团队。本指南旨在帮助那些正在使用 JSCS 的用户迁移其设置和项目以使用 ESLint。我们试图尽可能自动化转换,但需要进行一些手动更改。

术语

在开始迁移到 ESLint 的过程之前,理解 ESLint 使用的一些术语以及它与 JSCS 使用的术语之间的关系很有帮助。

  • 配置文件 -在JSCS,配置文件.jscsrc.jscsrc.json.jscsrc.yaml,或.jscsrs.js。在 ESLint,配置文件可以是.eslintrc.json.eslintrc.yml.eslintrc.yaml,或.eslintrc.js(也有被废弃的.eslintrc文件格式)。
  • 预设 - 在 JSCS 中,有许多预定义的配置直接在 JSCS 中发布。ESLint 只附带一个eslint:recommended没有启用样式规则的预定义配置()。但是,ESLint 确实支持可共享的配置。可共享的配置是独立发布到 npm 的配置,几乎所有的 JSCS 预设都有可共享的配置(请参阅下面的“转换预设”一节)。此外,配置文件中的“预设”选项等同于ESLint“扩展”选项。

使用 Polyjuice 转换配置文件

Polyjuice是一个用于将 JSCS(和JSHint)配置文件自动转换为ESLint 配置文件的实用工具。它理解每个实用程序的等效规则,并自动输出一个 ESLint 配置文件,该文件与您现有的 JSCS 文件很好地近似。

要安装 Polyjuice:

代码语言:javascript
复制
$ npm install -g polyjuice

Polyjuice 使用 JSON 配置文件,因此如果您使用的是 JavaScript 或 YAML JSCS 配置文件,则应先将其转换为 JSON 配置文件。

要转换您的配置文件,请.jscs.json使用以下--jscs标志传入文件的位置:

代码语言:javascript
复制
$ polyjuice --jscs .jscsrc.json > .eslintrc.json

这创建了一个.eslintrc.json与之相当的规则.jscsrc.json

如果您有多个.jscsrc.json文件,您可以将它们全部传递,Polyjuice 将它们合并成一个.eslintrc.json文件:

代码语言:javascript
复制
$ polyjuice --jscs .jscsrc.json ./foo/.jscsrc.json > .eslintrc.json

注意: Polyjuice 在从 JSCS 配置创建合理的 ESLint 配置方面做得很好,但它可能不是100%。您可能仍会看到与您在 JSCS 中看到的不同的警告,因此您在使用 Polyjuice 后可能需要进一步修改您的配置。如果您使用内联注释来启用/禁用 JSCS 中的某些规则(尤其需要手动将其转换为使用 ESLint 样式的注释,请参阅本页后面的“禁用规则内联”)。

从零开始创建一个新的配置

如果您不想直接将 JSCS 配置转换为 ESLint 配置,那么您可以使用ESLint的内置向导来启动。赶紧跑:

代码语言:javascript
复制
$ eslint --init

您将通过一系列问题获得指导,这些问题将帮助您设置基本配置文件以帮助您入门。

转换预设

有大多数 JSCS 预设可用的可共享配置。下表中列出了每个 JSCS预设的等效可共享配置:

JSCS Preset

ESLint Shareable Config

airbnb

eslint-config-airbnb-base

crockford

(not available)

google

eslint-config-google

grunt

eslint-config-grunt

idiomatic

eslint-config-idiomatic

jquery

eslint-config-jquery

mdcs

eslint-config-mdcs

node-style-guide

eslint-config-node-style-guide

wikimedia

eslint-config-wikimedia

wordpress

eslint-config-wordpress

作为一个例子,假设你正在使用airbnb预设,所以你的.jscsrc文件看起来像这样:

代码语言:javascript
复制
{
    "preset": "airbnb"
}

为了在 ESLint 中获得相同的功能,您首先需要安装eslint-config-airbnb可共享配置包:

代码语言:javascript
复制
$ npm install eslint-config-airbnb-base --save-dev

然后你会像这样修改你的配置文件:

代码语言:javascript
复制
{
    "extends": "airbnb-base"
}

ESLint 会看到"airbnb-base"并会寻找eslint-config-airbnb-base(为您节省一些打字费用)。

禁用内联规则

JSCS 和 ESLint 都使用文件中的注释来禁用代码中某些部分的规则。下表列出了 JSCS 内联配置注释及其 ESLint 等效项。

Description

JSCS Comment

ESLint Comment

Disable all rules

// jscs:disable or /* jscs:disable */

/* eslint-disable */

Enable all rules

// jscs:enable or /* jscs:enable */

/* eslint-enable */

Disable one rule

// jscs:disable ruleName or /* jscs:disable ruleName */

/* eslint-disable rule-name */

Enable one rule

// jscs:enable ruleName or /* jscs:enable ruleName */

/* eslint-enable rule-name */

Disable multiple rules

// jscs:disable ruleName1, ruleName2 or /* jscs:disable ruleName1, ruleName2 */

/* eslint-disable rule-name1, rule-name2 */

Enable multiple rules

// jscs:enable ruleName1, ruleName2 or /* jscs:enable ruleName1, ruleName2 */

/* eslint-enable rule-name1, rule-name2 */

Disable one rule on single line

// jscs:ignore ruleName

// eslint-disable-line rule-name

命令行选项

JSCS 和 ESLint 都有与其许多配置选项相对应的命令行参数。以下是 JSCS 命令行选项的 ESLint 等效项。

--fix

JSCS 使用该--fix选项将自动修复应用于代码:

代码语言:javascript
复制
$ jscs --fix file.js

ESLint 有相同的选择:

代码语言:javascript
复制
$ eslint --fix file.js

--auto-configure

JSCS --auto-configure选项根据它在给定文件中找到的内容创建配置:

代码语言:javascript
复制
$ jscs --auto-configure file.js

在 ESLint 中,使用时有类似的选项--init。只需选择“检查您的 JavaScript 文件”:

代码语言:javascript
复制
$ eslint --init
? How would you like to configure ESLint? (Use arrow keys)
> Answer questions about your style
  Use a popular style guide
  Inspect your JavaScript file(s)

--config, -c

JSCS 允许指定一个配置文件使用命令行上使用--config-c,如:

代码语言:javascript
复制
$ jscs --config myconfig.json file.js
$ jscs -c myconfig.json file.js

ESLint 也支持这两种标志:

代码语言:javascript
复制
$ eslint --config myconfig.json file.js
$ eslint -c myconfig.json file.js

将代码配管到 ESLint 中

在 JSCS 中,你可以像这样管道代码:

代码语言:javascript
复制
$ cat file.js | jscs

在 ESLint 中,您也可以使用代码管道,但您需要使用该--stdin标志:

代码语言:javascript
复制
$ cat file.js | eslint --stdin

扫码关注腾讯云开发者

领取腾讯云代金券