Index

• 概要

• ESLint是什么

• @cybozu/eslint-config是什么

• 可支持的编辑器

• 安装ESLint

  • 事前准备

  • 安装

  • 用命令行执行

  • 应用到编辑器

• ESLint的使用技巧

• 参考网站

• 更改记录

概要

关于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已安装完成（※ x.x.x : 版本号）。

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

   显示以下错误信息时，请指定版本重新安装 eslint。

   错误信息
   

   > npm ls --depth=0
   (安装目录)\npm
   ├── @cybozu/eslint-config@x.x.x
   ├── UNMET PEER DEPENDENCY eslint@x.x.x
   ├── prettier@x.x.x
   └── typescript@x.x.x
   npm ERR! peer dep missing: eslint@^y.y.y, required by @cybozu/eslint-config@x.x.x
   npm ERR! peer dep missing: ... 同此错误信息

   执行命令

   > npm install --save-dev eslint@y.y.y

   ※ y.y.y 为错误信息[npm ERR! peer dep missing: eslint@^y.y.y, required by @cybozu/eslint-config@x.x.x]里的 ESLint的版本号（粗体部分）。
   

4. 在工作目录内新建“.eslintrc.js”文件。※在文件名的前面加上“.”。
   
   如果是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是否被正确执行了，我们故意输出一个错误信息。

执行结果

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

在范例代码里：

• 漏了一个分号。

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

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

出现了以上这些信息。

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

如出现错误，请根据错误级别（error/warning）来修改。

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

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

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

应用到编辑器

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

Visual Studio Code

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

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

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

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

执行结果

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

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

 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"]
};

参考网站

• ESLint:

  • User guide > Integrations

  • User guide > Getting Started with ESLint

  • User guide > Rules

• npm: Getting started > 03 - How to prevent permissions errors　※Mac固有内容

更改记录

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

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