ESLint(JavaScript代码校验)

cybozu发表于:2018年08月24日 15:16:39更新于:2019年09月11日 17:23:40

Index

概要

关于JavaScript的代码检测器,2016年5月以来大家一直使用jswatchdog,2018年4月以后,从运维的角度上来说,我们更推荐使用ESLint。

关于ESLint的设置,我们推荐针对kintone自定义开发而推出的@cybozu/eslint-config。

这篇文章,我们将面向初学者来讲解如何安装ESLint的操作方法。

ESLint是什么

ESLint是2013年由Nicholas C. Zakas发布的一个开源JavaScript语法检测工具。

和其他工具不同的是,他的特性在于可以自己编写添加独特的规则。

ESLint可以灵活设置规则,也发布了很多公开的规则集。

其中比较有名的规则集是Google公司发布的面向JavaScript开发的eslint-config-google,并得到普及。

@cybozu/eslint-config是什么

@cybozu/eslint-config是才望子的程序员提供的ESLint规则集。
其中,包含有面向kintone开发的ESLint规则集。

@cybozu/eslint-config的特点如下:

  • 可以确保kintone开发时的代码质量。(和jswatchdog一样。)

  • ESLint原来是命令行工具,但可在其所支持的编辑器里安装扩展功能。
    此时,它可以在编程的同时实时检查代码。

  • 在命令行上使用时,也有自动修正功能。

代码的话在GitHub上有公开。

可支持的编辑器

适用于主流编辑器Sublime Text、Atom等。这次以Visual Studio Code为例来说明。 对应的编辑器可以在ESLint官网里确认

安装ESLint

事前准备

执行ESLint 的话,需要装有Node.js 和 npm 的环境。

  1. 从官网上下载Node.js。这个是官网

  2. 执行下载的安装包,按照提示安装。

安装

安装ESLint和@cybozu/eslint-config。

  1. 准备工作目录。
    例如:将工作目录的名称设置为“Source”时

    > mkdir Source
  2. 转到刚才创建的目录,安装ESLint和@cybozu/eslint-config。

    > cd Source
    > npm install --save-dev eslint @cybozu/eslint-config

    若没有安装TypeScript 和Prettier,会提示警告。
    使用本文章介绍的ESLint设置 @cybozu/eslint-config/presets/kintone-customize-es5时,不需要TypeScript和Prettier。
    若需要TypeScript 和Prettier,用以下命令安装TypeScript 和 Prettier包。

    > npm install --save-dev typescript prettier

    另外,如果工作目录不存在package.json,也会提示警告。
    在此不做详解,请根据实际需要准备。

  3. 确认ESLint和@cybozu/eslint-config已安装完成。

    > npm ls --depth=0
    (安装目录)\npm
    +-- @cybozu/eslint-config@x.x.x
    +-- eslint@x.x.x

    ※ x.x.x : 版本号

  4. 在工作目录内新建“.eslintrc.js”文件。※在文件名的前面加上“.”。
    0015d71cc74f131f6f36ac27eda2885
    如果是Mac,请用以下命令创建文件。

    $ vi eslintrc.js
  5. 会在“.eslintrc.js”文件内写入以下3行。

    module.exports = {
        "extends": "@cybozu/eslint-config/presets/kintone-customize-es5"
    };

    上述例子是使用ES5(ECMAScript5)进行kintone开发的规则。

    有关ES6(ECMAScript2015)或使用Node.js和React进行开发时设置,请参考“使用各种规则集”。

    (参考)在Mac终端的vi编辑器上操作的范例。
    5-1.用“a”切换到vi的输入模式
    5-2. 输入上面3行
    5-3. 用esc键切换到vi的命令模式
    5-4.用“:wq”保存并结束

用命令行执行

输入以下命令执行ESLint,将显示检测结果。

> npx eslint [文件夹名称] or [文件名]

例:要对“test.js”这个文件进行检查时

> npx eslint test.js

▼“test.js”的代码范例

(function() {    
    'use strict'    
    var func1 = function(a, b) {    
        return a+ b;    
    };    
    var result = func1(1, 3);    
})();

※为了确认ESLint是否被正确执行了,我们故意输出一个错误信息。

执行结果

运行以后,出现如图所示的错误信息。

0015d71cc9362d3f741516bda9c17d5

在范例代码里:

  • 漏了一个分号。

  • 运算符前后需要加空格。

  • “result”这个变量没有被使用。

出现了以上这些信息。

※如果运行的是无错误的文件的话,就不会出现任何信息。

如出现错误,请根据错误级别(error/warning)来修改。

  • error
    请务必修复它。该JavaScript会不起作用或者发生不可预期的错误。

  • warning
    希望能尽可能地修复它,但不是必需的。

关于错误详细信息,可以参考ESLint官网的Rules

应用到编辑器

这里介绍的是如何应用到编辑器里的方法。

Visual Studio Code

以下介绍应用到Visual Studio Code(下文简称VSCode)的步骤。

  • 启动VSCode,点击“扩展功能”。

0015d71ccbb3c43a76d0d1601ccbe6e

  • 搜索“ESLint”,点击“安装”。

0015d71cccb05673ace2cd13378413a

  • 安装完成后,重启VSCode。扩展功能需要重启VSCode后才生效。

执行结果

在输入时,会实时检查是否有错误,并在有错误的地方显示红色的波浪线。

错误的详细内容显示在“问题”标签页里。

0015d71cca06764c5d5ffa1be26ce1a

 ESLint的使用技巧

针对已经熟悉ESLint的人员,进一步介绍使用技巧。

自动修复功能的使用

在命令行中执行时,使用“--fix”选项可以自动修改代码并更新文件。
※根据错误的类型,部分无法自动修改。

更改规则的设置

如要更改规则的设置,比如要解除特定的规则等,可以编辑.eslintrc的文件。

  • 例1: 在Garoon自定义开发时,若想要将garoon对象的错误解除
    添加“globals”参数,将“garoon”设置成“readonly”

  • 例2: 如想要去除解除的规则
    添加“rules”参数,将想要解除的选项设置成“off”。

以下是解除例1和例2的.eslintrc范例。

module.exports = {    
    "extends": "@cybozu/eslint-config/presets/kintone-customize-es5",    
    "globals":{    
        "garoon": "readonly"    
    },    
    rules":{    
        "no-underscore-dangle": "off",    
        "no-console": "off"    
    }    
};

使用各种规则集

以上所介绍的设置是针对用ES5(ECMAScript5:JavaScript的版本)进行kintone自定义开发的规则集。
@cybozu/eslint-config中还有用于其他场景的规则。
请根据需要替换“.eslintrc.js”文件。

以下介绍几个比较典型的场景。所有规则请参考GitHub的README

用ES2017进行常规编程

module.exports = {
  extends: "@cybozu"
};

用ES2017进行kintone自定义

module.exports = {
  extends: ["@cybozu", "@cybozu/eslint-config/globals/kintone"]
};

用Node.js进行常规编程 

module.exports = {
  extends: "@cybozu/eslint-config/presets/node"
};

用Node.js 进行kintone自定义

module.exports = {
  extends: ["@cybozu/eslint-config/presets/node", "@cybozu/eslint-config/globals/kintone"]
};

参考网站

更改记录

2018/12/21 所使用的包由“eslint-config-kintone”更改为“@cybozu/eslint-config"

2019/8/30 从ESLint v6.0.0起插件的导入方法发生更改,因此步骤由全局安装更改为本地安装。


    注意:贴代码时请注意格式并使用"代码语言",与本文无关的问题请至“讨论社区”提问。
    您需要登录后才可以回复