ESLint 是在 ECMAScript/JavaScript 代碼中識別和報告模式匹配的工具，它的目標是保證代碼的一致性和避免錯誤。

在本文開始前， 我們假設您已經有一個webpack + react 的 初始項目。

初始化

首先， 現在 項目中 安裝 eslint 和 eslint-loader

yarn add eslint eslint-loader -D 復制代碼

在webpack中，通過 .eslintrc 文件 對 eslint 進行配置。在根目錄下 執行 touch .eslintrc 在根目錄下生成 .eslintrc 配置文件

eslint-loader

在 webpack.config.js 中 配置 eslint-loader.

module: {// ...rules: [// ...{test: /\.(js|jsx)$/,enforce: 'pre',loader: 'eslint-loader',include: path.resolve(__dirname, './src/**/*.js'),exclude: /node_modules/},] } 復制代碼

我們的項目中之前已經使用了 babel-loader對我們的代碼進行轉譯， 我們可以把 eslint-loader 和他一起使用。

module: {// ...rules: [// ...{test: /\.(js|jsx)$/,loader: ['babel-loader', 'eslint-loader'],include: path.resolve(__dirname, './src/**/*.js'),exclude: /node_modules/},] } 復制代碼

babel-eslint

我們的項目中使用了 es6 的語法， 可以通過 babel-eslint 進行檢測。

yarn add babel-eslint -D 復制代碼

.eslintrc

{parser: "babel-eslint","rules": {} } 復制代碼

然后， 便可以添加 rules 來檢測我們代碼，更多規則可參考官方文檔

{"parser": "babel-eslint","rules": {"indent": ["error", 4, {"SwitchCase": 1}],"no-extra-boolean-cast": "error","no-cond-assign": "error","no-magic-numbers": ["off", {"ignoreArrayIndexes": true,"ignore": [0, 1],"enforceConst": true}],"max-params": ["error", 6],"no-var": "error","no-console": "off","no-alert": "off","no-debugger": "off",// ...} } 復制代碼

eslint-plugin-react

我們可以使用eslint-plugin-react 來檢測 react 的一些語法規則

yarn add eslint-plugin-react -D 復制代碼

.eslintrc

{// ..."plugins": ["react",],"rules": {"react/jsx-uses-react": "error","react/prop-types": "error",// ...} }復制代碼

Environments 指定腳本的運行環境。

env: 指定腳本的運行環境。每種環境都有一組特定的預定義全局變量。

browser - 瀏覽器環境中的全局變量。 node - Node.js 全局變量和 Node.js 作用域。 commonjs - CommonJS 全局變量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在瀏覽器中運行的代碼)。 shared-node-browser - Node.js 和 Browser 通用全局變量。 es6 - 啟用除了 modules 以外的所有 ECMAScript 6 特性（該選項會自動設置 ecmaVersion 解析器選項為 6）。 worker - Web Workers 全局變量。 amd - 將 require() 和 define() 定義為像 amd 一樣的全局變量。 復制代碼

更多環境變量請參考 官方文檔

.eslintrc

{// ..."env": {"browser": true,"node": true,"es6": true,"amd": true}, } 復制代碼

Globals - 腳本在執行期間訪問的額外的全局變量。

在配置文件里配置全局變量時，使用 globals 指出你要使用的全局變量。將變量設置為 true 將允許變量被重寫，或 false 將不允許被重寫。

.eslintrc

{// ..."globals": {"var1": true,"var2": false,} } 復制代碼

eslint-config-airbnb

我們在使用 eslint 的時候 可以使用別人配置好的 配置， 我們可以選用 Airbnb 標準。

使用 Airbnb標準，還需要 兩個 必須的 插件。

yarn add eslint-config-airbnb eslint-plugin-jsx-a11y eslint-plugin-import -D

.eslintrc

{// ..."extends": "airbnb", } 復制代碼

pre-commit

我們的項目使用了git, 可以通過設置pre-commit 來對我們的代碼 每次提交時 進行檢測，如果檢測到 代碼 不符合 eslint規范，則不允許 提交， 這樣可以很大程度上保證我們的代碼質量。

yarn add pre-commit -D 復制代碼

然后我們在 package.json 中 添加pre-commit配置

// ... "scripts": {// ..."eslint": "eslint --ext .js src" }, "pre-commit": ["eslint" ] 復制代碼

轉載于:https://juejin.im/post/5b988084e51d450e6e038a3e

總結

以上是生活随笔為你收集整理的webpack + react 使用 eslint的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。