eslint用法

朱雀 2023-02-25 13:22 6阅读 0赞

# [ESLint 使用方法][ESLint] #

一、全局安装

>     npm install -g eslint

二、生成配置文件

在项目根目录执行init，生成.eslintrc文件。在init时，要求根目录存在package.json。当然也可以直接复制个现成的.eslintrc.js文件。

>     eslint --init

三、自定义配置项

根据[规则文档][Link 1]，编辑.eslintrc.js文件内容。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 </td> 
 <td> <code>module.exports = { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"env"</code><code>: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"node"</code><code>:&nbsp;</code><code>true</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"rules"</code><code>: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 强制使用一致的缩进</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"indent"</code><code>: [</code><code>"warn"</code><code>,&nbsp;</code><code>"tab"</code><code>],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 禁止空格和 tab 的混合缩进</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"no-mixed-spaces-and-tabs"</code><code>:1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 禁用 debugger</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"no-debugger"</code><code>: 1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 禁止不必要的布尔转换</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"no-extra-boolean-cast"</code><code>: 1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 强制所有控制语句使用一致的括号风格</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"curly"</code><code>: 1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 禁止使用多个空格</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"no-multi-spaces"</code><code>: 1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 要求在函数标识符和其调用之间有空格</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"func-call-spacing"</code><code>: 1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 强制在函数括号内使用一致的换行</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"function-paren-newline"</code><code>: [</code><code>"warn"</code><code>,&nbsp;</code><code>"never"</code><code>],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 强制隐式返回的箭头函数体的位置</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"implicit-arrow-linebreak"</code><code>: 1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 强制在对象字面量的属性中键和值之间使用一致的间距</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"key-spacing"</code><code>: 1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 强制在关键字前后使用一致的空格</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"keyword-spacing"</code><code>:1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 要求调用无参构造函数时有圆括号</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"new-parens"</code><code>:1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 禁止出现多行空行</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"no-multiple-empty-lines"</code><code>:1,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 要求使用分号代替 ASI</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"semi"</code><code>:[</code><code>"warn"</code><code>,</code><code>"always"</code><code>],</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 要求操作符周围有空格</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"space-infix-ops"</code><code>:1</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>};</code> </td> 
 </tr> 
 </tbody> 
</table>

配置内容也可以写在package.json中，具体规则也是写在rules里。有时用vue-cli生成的项目会在package.json里看到这样的配置：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 </td> 
 <td> <code>"eslintConfig"</code><code>: { </code> <code>&nbsp;&nbsp;</code><code>"root"</code><code>:&nbsp;</code><code>true</code><code>,</code> <code>&nbsp;&nbsp;</code><code>"env"</code><code>: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"node"</code><code>:&nbsp;</code><code>true</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>"extends"</code><code>: [</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"plugin:vue/essential"</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"eslint:recommended"</code> <code>&nbsp;&nbsp;</code><code>],</code> <code>&nbsp;&nbsp;</code><code>"rules"</code><code>: {},</code> <code>&nbsp;&nbsp;</code><code>"parserOptions"</code><code>: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"parser"</code><code>:&nbsp;</code><code>"babel-eslint"</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

四、执行检查并修改

>     eslint * --fix

[ESLint]: https://www.cnblogs.com/yangshifu/p/9585462.html
[Link 1]: http://eslint.cn/docs/rules/