ReactNative开发 WebStorm下安装ESLint检测JS代码-白红宇

WebStorm创建第一个项目出现了一个ESLint提示，主要写给自己以后用。

参考资源：

因为是第一次用WebStorm 直接使用Airbnb的ESLint

问题：如图ESLint检查报错

1.使用Webstorm快捷键Alt + F12，进入Terminal窗口，如下图

2.执行以下两条指令：

npm install -g install-peerdeps复制代码

install-peerdeps --dev eslint-config-airbnb复制代码

此命令会在package.json文件下的devDependencies中生成以下5个包：

"eslint": "^4.8.0","eslint-config-airbnb": "^16.0.0","eslint-plugin-import": "^2.7.0","eslint-plugin-jsx-a11y": "^6.0.2","eslint-plugin-react": "^7.4.0",复制代码

安装babel-eslint：

如果用到了es6的新语法, 需要安装babel-eslint,不然会把箭头函数识别成错误

npm i --save-dev babel-eslint复制代码

3.生成.eslintrc.js文件

执行 eslint --init 或者直接自己创建该文件.eslintrc.js。下面的选项可以直接一直按回车来进行初始配置

eslint --init复制代码

初始化eslint配置文件,每一步根据自己需要选择YES or NO，

C:\Users\XXXXXXX\WebstormProjects\es6tutorial>eslint --init? How would you like to configure ESLint? Answer questions about your style? Are you using ECMAScript 6 features? Yes? Are you using ES6 modules? Yes? Where will your code run? Browser? Do you use CommonJS? No? Do you use JSX? No? What style of indentation do you use? Tabs? What quotes do you use for strings? Single? What line endings do you use? Unix? Do you require semicolons? Yes? What format do you want your config file to be in? JavaScript复制代码

最后将会生成一份.eslintrc.js 文件。文件放在根目录下，位置如下：

4.配置.eslintrc.js文件

在项目的根目录下创建文件.eslintrc，内容如下，可根据需求修改：

{  "extends": "airbnb",  "env": {    "browser": true,    "node": true,    "jest": true  },  "parser": "babel-eslint",  "ecmaFeatures": {    "forOf": true,    "jsx": true,    "es6": true  },  "rules": {    "no-undef": 0,    "no-console": 0,    "no-alert": 0,    "comma-dangle": 0,    "react/prop-types": 0,    "no-use-before-define": 0,    "radix": 0,    "no-param-reassign": 0,    "react/jsx-filename-extension": 0,    "no-mixed-operators": 0,    "import/prefer-default-export": 0,    "import/no-extraneous-dependencies": 0,    "no-plusplus": 0,    "react/prefer-stateless-function": 0,    "class-methods-use-this": 0,    "react/require-default-props": 0  },  "plugins": [    "react", "import"  ],  "settings": {    "import/parser": "babel-eslint",    "import/resolve": {      "moduleDirectory": ["node_modules", "src"]    }  },  "globals": {    "__DEV__": true  }}复制代码

以上解决了我遇到的ESLint问题，还有ESLint错误时，可以右击鼠标，选择Fix

如果还是不行，并且不急着使用ESLint：可以先不用ESLint，file->settings->Languages & frameworks->javaScript->code quality tools->eslint 去掉enable