eslint
注:这里不讲eslint的知识,仅仅讲使用
一、安装(以下是全局的,同时安装到项目中–save-dev)
- npm install eslint -g
- npm install eslint-plugin-import -g
- npm install eslint-plugin-react -g
- npm install babel-eslint -g
二、配置
首先在项目中与package.json平级的目录下创建.eslintrc文件,该文件目前内容如下:(以后会做修改,暂且如此,根据项目的需求可做局部修改)
{ “extends”: [“eslint:recommended”, “plugin:import/errors”, “plugin:import/warnings”, “plugin:react/recommended”], // 环境定义了预定义的全局变量。 “env”: { //环境定义了预定义的全局变量。更多在官网查看 “browser”:true, “node”:true, “commonjs”:true, “amd”:true, “es6”:true, “mocha”:true }, “parser”: “babel-eslint”, // JavaScript 语言选项 “parserOptions”: { // ECMAScript 版本 “ecmaVersion”:6, “sourceType”:”module”,//module // 想使用的额外的语言特性: “ecmaFeatures”: { // 允许在全局作用域下使用 return 语句 “globalReturn”:true, // impliedStric “impliedStrict”:true, // 启用 JSX “jsx”:true } }, // 全局变量 “globals”: { “FayUc”: true }, “plugins”: [ “react”, “import” ], /**
- ”off” 或 0 - 关闭规则
- “warn” 或 1 - 开启规则,使用警告级别的错误:warn (不会导致程序退出),
- “error” 或 2 - 开启规则,使用错误级别的错误:error (当被触发的时候,程序会退出)
*/
“rules”: {
- 这里只简单说下webstorm的配置,如下两个截图:
### 设置后便可以自动检测,不过需要有点耐心,在eslint强大之余检测速度不如jslint和jshint快 - 说完工具的自动检测,再说下与webpack的配置,同样是截图来的直观点:
接下来就可以用命令npm run eslint
,如果没有报错,则通过。如果报了一堆错误,则说明代码出现质量问题,然后使用命令npm run eslint-fix
,这个命令只能修改一些简单的,其他的都需要自己手动根据错误提示修改。