ReactNative开发 WebStorm下安装ESLint检测JS代码执行 eslint --init 或者直接自

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

参考资源：blog.csdn.net/Cy_Shay/art…

www.cnblogs.com/feiyue-zh/p…

www.npmjs.com/package/esl…

因为是第一次用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

ReactNative开发 WebStorm下安装ESLint检测JS代码