ESLint与WebStorm、VSCode的集成

[masterkong]

ESLint与WebStorm、VSCode的集成

ESLint属于一种QA工具，是一个ECMAScript/JavaScript语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

ESLint旨在完全可配置，它的目标是提供一个插件化的javascript代码检测工具。详细配置去官网

ESLint可以和多种IDE进行集成，下面只介绍常用WebStorm和VSCode。支持的集成列表

准备条件

不管跟哪种IDE集成，第一步都是要先安装ESLint，可以本地或全局安装。
npm install eslint --save-dev 或 npm install eslint -g

eslint --init用来生成规则文件。

WebStorm

WebStorm有两种方式来配置ESLint，一种是自带的ESLint，一种是ESLint插件。下面只说自带的ESLint配置，插件配置可以看参考文献，写的比较好。

启用ESLint

WebStrom -> Preferences -> Languages and Frameworks -> JavaScript -> Code Quality Tools -> ESLint

在弹出的对话框中勾选Enable，可以看到要填写 Node Interpreter 和 ESLint Package 两项，分别是Node.js和ESLint的可执行文件路径，这也是前面要先安装ESLint的原因。

在编辑器激活ESLint

我想要的效果是在编辑器编码的时候就进行代码检查，而前面一步只是启用了ESLint，还需要在编辑器激活ESLint。WebStrom -> Preferences -> Editor -> Inspections

在弹出的对话框继续JavaScript -> Code quality tools -> ESLint，勾选后Apply生效。

规则文件

ESLint的检查策略依赖于规则文件。

With Automatic search, WebStorm looks for a .eslintrc file or tries to detect a configuration defined under eslintConfig in a package.json. WebStorm first looks for a .eslintrc or package.json in the folder with the file to be linted, then in its parent folder, and so on up to the project root.

Choose Configuration File to use a custom file and specify the file location in the Path field.

经过上面配置之后ESLint就可以正常使用了。

VSCode

VSCode的集成完全依靠ESLint扩展，ESLint Extension。

参考

• Eslint 超简单入门教程
• 深入浅出eslint——关于我学习eslint的心得
• webstorm中配置Eslint的两种方式及差异比较
• ESLint
• Using JavaScript Code Quality Tools