Eslint代码检查

最近一段时间在做React开发,由于初次接触React前端框架,很多东西都不了解,所以沿用了公司React的开发模板。

完成项目架构搭建之后,上传代码到git上的时候,却一直是上传失败。

Webstorm里的 Event Log 窗口给出错误:

Push failed: Failed with error: fatal: unable to access ...

由于看不到相关的错误详情,于是在command中输入git指令:

git push

这时可以看到很多错误,原来上传git失败的问题是由于代码检查导致的。

在项目开发中代码检查的配置是十分重要的。随着项目的开发、代码的增多,很小的错误都可能导致页面/功能异常,而调试解决问题却可能耗费我们大量的时间。

然而这次git代码上传失败的经历也说明了一个问题,即,有一个趁手好用的代码工具该多好?
既可以检查语法字符的问题,又不会太严格导致出现上传的问题?

在这里花费了一些时间整理了一下调整Eslint的过程。参考链接: https://github.com/yannickcr/eslint-plugin-react

打开package.json,代码审查部分已经配置好了,

"devDependencies": {
"eslint": "^3.15.0",
"babel-eslint": "^8.0.1",
"eslint-plugin-react": "^6.10.0"
}

npm scripts配置:

"scripts": {
  ...
  "lint:js": "eslint app",
  "prepush": "npm run lint:js"
  ...
}

在控制台执行 git push, 可以看到下面的错误信息:

C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\modules\network\network-reducers.js
3:1  error  Parsing error: The keyword 'export' is reserved
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\modules\requestList\components\requestList.js
1:1  error  Parsing error: The keyword 'import' is reserved

这是因为没有配置parserOptions来指定语言的相关配置信息。指定ES版本ecmaVersion为7,也就是ES2016, 指定模块类型sourceType为module,此外配置一些ES Features,添加ES特性支持,使之能够识别ES6语法。如此便支持export和import来导出并引用文件。

"parserOptions": {
   "ecmaVersion": 7,
   "sourceType": "module"
   "ecmaFeatures": {
  "experimentalObjectRestSpread": true,
    "jsx": true,
    "arrowFunctions": true,
    "classes": true,
    "modules": true,
    "defaultParams": true
  }
}

再次运行git push,控制台输出的最后信息如下:

   6:5   error  Useless constructor                                       no-useless-constructor

看到这条错误信息,于是便尝试在rules添加一行代码:

"no-unused-vars": 0

对于rules规则的值,可以是”off”(或0), “warn”(或 1), “error”(或2)。

再次git push, 控制台提示下面的错误信息

6:5   error  Useless constructor                                       no-useless-constructor
  38:21  error  Expected indentation of 18 space characters but found 20                                                            react/jsx-indent
  38:73  error  A space is required before closing bracket                                                                          react/jsx-tag
-spacing
  38:73  error  A space is required before closing bracket                                                                          react/jsx-space-before-closing
  39:21  error  Expected indentation of 18 space characters but found 20                                                            react/jsx-indent
  47:5   error  Expected indentation of 2 spaces but found 4                                                                        indent
  48:5   error  Expected indentation of 2 spaces but found 4                                                                        indent
  49:5   error  Expected indentation of 2 spaces but found 4                                                                        indent

同样的,参考文章开始的链接,在rules里添加代码:

"react/jsx-space-before-closing": 0,
"react/jsx-indent": 0,

这时,错误信息便减少到了这几行:

C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\index.js
  19:5   error  'document' is not defined   no-undef
  24:10  error  'PropTypes' is not defined  no-undef
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\sagas.js
  9:28  error  Empty block statement  no-empty
C:\Users\wangc\WebstormProjects\MW_DHA_OvertimeRequest\app\store\configure-store.js
  16:30  error  'window' is not defined  no-undef
  29:7   error  'module' is not defined  no-undef
  31:5   error  'module' is not defined  no-undef

再次添加rules:

"no-empty": 0,
"no-undef": 0

最后运行git push, 代码可以成功上传

在此贴出项目中.eslintrc文件的完整配置代码:

{
  "extends": "eslint:recommended",
  "env": {
    "es6": true 
  },
  "installedESLint": true,
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true,
      "arrowFunctions": true,
      "classes": true,
      "modules": true,
      "defaultParams": true
    }
  },
  "parser": "babel-eslint",
  "rules": {
    "linebreak-style": "off",
    "arrow-body-style": "off",
    "no-bitwise": ["error", { "allow": ["~"] }],
    "no-continue": "off",
    "max-len": ["error", 100],
    "no-unused-vars": 0,
    "react/jsx-space-before-closing": 0,
    "react/jsx-indent": 0,
    "no-empty": 0,
    "no-undef": 0
  }
}

这样,一个方便好用的Eslint代码检查配置就完成了!

记录不详之处欢迎大家留言补充,不吝赐教:)

参考链接: https://juejin.im/entry/599e5ad4f265da2488089ad3

你可能感兴趣的:(Eslint,前端)