Vim 中使用 eslint 代码风格

yusihai719 2017-03-22

展开全文

eslint 是一款可配置的插件式架构的代码风格检查工具。可配置不足为奇，但插件式的架构却能带来很多方便。例如在单元测试代码中，引入 mocha 插件便可自动引入一系列额外的语法规则。

打造前端开发的 Vim 环境一文中提到了使用 Syntastic 对代码进行代码风格检查。但同时我们需要按照同样一份规则（就是下文的 eslintrc）来进行代码格式化。本文详细介绍如何在 Vim 中引入 eslint，以及用 eslint 规则来格式化代码。

syntastic 与 vim-autoformat

工欲善其事必先利其器，首先介绍两个 Vim 插件。如果你不了解如何安装这些托管在 Github 上的 Vim 插件，请移步 https://github.com/VundleVim/Vundle.vim。继续完成下文的配置之前，需要你安装这两个插件：

Plugin 'scrooloose/syntastic'Plugin 'Chiel92/vim-autoformat'

其中 syntastic 可以调用外部命令行工具来进行代码风格检查，vim-autoformat 则可以调用外部命令行工具来格式化代码。下文要介绍的就是让两者都调用 eslint，并使用同一份 eslintrc。

eslint 安装与配置

eslint 可直接通过 npm 安装：

sudo npm install -g eslint

eslint 使用配置文件来指定代码风格检查规则。可以创建一个简单的配置文件.eslintrc.json（你也可以使用 eslint --init 来生成一份自定义的配置文件）：

{ 'extends': 'standard', 'plugins': [ 'standard', 'promise' ]}

上述配置声明了使用 ES6 标准模式来进行检查，并引入了 promise 插件和 standard 插件。该配置文件的作用范围包括配置文件所在目录，以及所有的子目录。安装配置文件中指定的那些依赖项：

sudo npm install -g eslint-plugin-standardsudo npm install -g eslint-plugin-promisesudo npm install -g eslint-config-standard

生成配置文件后可创建一个简单的 JavaScript 文件来测试 eslint 是否可以运行：

> cat a.jsfunction a  (){}> eslint a.js/Users/harttle/tmp/a.js  1:10  error  'a' is defined but never used       no-unused-vars  1:13  error  Multiple spaces found before '('    no-multi-spaces  1:15  error  Missing space before opening brace  space-before-blocks? 3 problems (3 errors, 0 warnings)

配置 syntastic

本小节的目的是让 Syntastic 用 eslint 来检查 JavaScript 语法风格。需要在~/.vimrc中将 JavaScript checker 设置为eslint：

let g:syntastic_javascript_checkers = ['eslint']

此后在 Vim 中保存（:w） JavaScript 时就会触发风格检查，你也可以使用 :SyntasticCheck 来手动触发。如果需要 location list （:help lnext）来导航错误列表，需要设置 Syntastic 填充 location list：

let g:syntastic_always_populate_loc_list = 1

更多 syntastic 配置可参考：https://github.com/vim-syntastic/syntastic

配置 vim-autoformat

既然可以检查语法风格，那么我需要用同样的规则进行代码格式化。恰好 eslint --fix 参数提供了格式化代码的特性，我们只需要让 vim-autoformat 也调用 eslint 的命令行接口。

在 ~/.vimrc 中定义一个 formatter，并设置到 JavaScript 文件类型：

let g:formatdef_eslint = ''SRC=eslint-temp-${RANDOM}.js; cat - >$SRC; eslint --fix $SRC >/dev/null 2>&1; cat $SRC | perl -pe \'chomp if eof\'; rm -f $SRC''let g:formatters_javascript = ['eslint']

上面定义的 formatter 做了这些事情：