首页 Eslint设置及65个Error修复

|

刚开始的时候没有引入Eslint，后面发现手动调整代码格式和排除错误，工作量太大。于是考虑在半道引入Eslint，这可就难了。好家伙一运行代码检查，65个错误，警告更是不计其数。

有这么多bug有这么多bug

好吧！下面就介绍一下我怎么一步一步从零开始，消灭了65个bug的过程，从安装Eslint开始吧。

安装方法参考官网内容，英文比较靠谱。

1
2
3
npm i -g eslint //全局安装eslint
eslint lib/**   //直接进行代码检查 查看lib下的所有文件 如果不能运行接着往下看
eslint --init   //初始化eslint的配置文件 在根目录会生成规则配置文件.eslintrc.js

直接运行eslint的命令，只会检查，不会自动修复代码中存在的问题，比如格式之类的。

运行eslint最好的方式是配置package.json，然后直接执行node 修复命令。方式如下：

1
2
3
4
// 在package.json的scripts中配置如下命令
"scripts": {
    "lint": "eslint --fix --ext .js,.jsx ."
}
1
2
// 然后命令行直接运行如下命令 自动检测问题和修复代码
npm run lint

当然有的问题不能自动修复，就需要手动修改了。比如文章开头提到的65个errors就是eslint不能自动解决的。

  • 「Use array destructuring 」，通过在.eslintrc.js添加如下规则解决。

    1
    'prefer-destructuring': ['error', { object: true, array: false }]
  • 「Assignment to property of function parameter ‘obj’」，错误代码如下

image-20201030111145610image-20201030111145610

  • 「’created_at’ is never reassigned. Use ‘const’ instead 」，通过把let改成const解决。

  • Unexpected tab character 通过修改缩进解决。

  • ‘trans’ is assigned a value but never used 通过注销无用的require解决。

  • ‘res’ is assigned a value but never used 没用的变量不用定义，不用的返回结果就不要定义变量接收了。

  • ‘formateData’ was used before it was defined 方法定义应该在运行代码之前。