ReactNative開發 WebStorm下安裝ESLint檢測JS程式碼

• 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