[ES6-重点纪录] 开发环境建置(下) - ESLint 侦错工具

在上一篇 开发环境建置(上) - Babel 编译工具 讲解 Babel 后，这篇将来介绍 ESLint ，使用 ESLint 侦错工具来检查 JavaScript 静态程式码的语法和风格，让我们在编译前可以减少错误产生，还能改善程式码的品质与统一程式码风格。

在使用前可以先建置环境目录，有需求的请参考上一篇的第一段内容。

使用 ESLint 侦错工具

为了让 Babel 编译器能顺利执行，避免错误的产生，也让我们有更好的程式码品质，减少后续维护的成本，ESLint 就是个非常适合的侦错工具使用在 JavaScript 语言上，它也支援 ES6 最新的标準，不过ESLint 的配置规範就比较複杂一些，最好搭配主流的规範套件会比较轻鬆。

工具说明

eslint 工具

ESLint 本身的工具，内建就可以执行命令行了需要安装在全域环境下才能使用 eslint 命令基本用法如下

# 初始化建立 .eslintrc 配置档eslint --init # 侦测目标档案是否有违反规範 (需先建立配置档)eslint example.js# 侦测完若有错误，将会自动修复不符规範的地方babel example.js --fix

.eslintrc 配置档

ESLint 的规範内容都会在这里设置，可自行设定规範需求主要都是使用 JSON 格式，规範内容可参考 浅入浅出 eslint 与实作-Configuration of ESLint基本格式如下

{  "parser": "",         // 预设解析器  "parserOptions": {},  // 预设解析器的设定  "extends": [],        // 可引入其他完整的配置档  "plugins": [],        // 可引入第三方套件  "env": {},            // 设定环境，会有不同的全域变数，像是 browser、node  "globals": {},        // 可自订加入全域变数  "rules": {}           // 可自订加入规範内容}

开始实际建置

1. 为了方便使用，在本地端与全域环境中都安装 eslint 工具

$ npm install eslint -g$ npm install eslint --save-dev

2. 在根目录下初始化，建立.eslintrc配置档

$ eslint --init

3. 这里会先问你要怎么建立规範档案呢? 如下 :

Answer questions about your styleUse a popular style guideInspect your JavaScript file(s)

通常只会选择前两种方式。如果选择第一项，将会一连串问你基本的规範内容，选择 JSON 格式，就会直接建立.eslintrc.json配置档。

不过，最常用的还是使用第二项，引入主流的规範配置，顺便会再问你想要哪一种主流规範，这里会使用 "Airbnb" 为居多，也很适合团队的规範，点选完后会帮你下载它的专属配置套件，再帮你建立.eslintrc.json配置档，ESLint 会把这个主流规範自动引入配置档中。(这里不选择把 react 加入)

4. .eslintrc.json档案内容如下

{  "extends": "airbnb-base"}

而在 npm 的packing.json配置档中你会看到多了刚刚下载的套件，代表安装成功了，如下 :

"devDependencies": {
"eslint": "^4.15.0",
"eslint-config-airbnb-base": "^12.1.0",
"eslint-plugin-import": "^2.8.0"
}

5. 接下来就可以加入自订的规範内容，改写.eslintrc.json配置档

这里举例: 缩排使用4个空格、允许使用 console.log()、加入环境设定 browser.eslintrc.json以举例来说，内容改写成如下

{  "extends": "airbnb-base",  "env": {    "browser": true  },  "rules":{    "indent": ["error", 4],    "no-console": "off"  }}

6. 最后就能侦错档案了，终端机执行命令如下

$ eslint src/index.js

然后运行后的结果，将会帮你列出不符合规範的地方，若有错误，结果类似下图 :

以上就是 ESLint 的基本使用，当然自己手动侦错是很笨的方式，一样这也可以搭配第三方套件来帮你自动侦错。

7. 搭配自动化模组工具或程式编辑器的插件

自动化模组工具可以使用 Webpack最好还是使用程式编辑器的插件来辅助会比较方便，这里以 VSCode 编辑器为例安装 ESLint 插件如下图使用 npm 安装全域环境eslint，再依照步骤建立好.eslintrc.json规範后就可以使用啦！

只要搭配好的工具就能让你轻鬆侦错，快速建立环开发境，改善你的 coding style，尤其是在团队里更应该要有好的规範习惯。

后记

这篇做的有点久阿，原因网路上许多教学都很简略就带过了，我想做个完整地操作步骤，至少要知道这些工具是如何被使用，再来搭配其他套件工具也是很重要的。

原本 "ES6 开发环境建置" 是打算只用一篇发出，但写到最后改了很多次，又加深说明，导致内容不知不觉暴增...所以就分为两篇文章介绍了，希望可以达到最完整的纪录，清楚知道这些工具在使用上是很方便的啦~