ESLint 是在 ECMAScript/JavaScript 代碼中識別和報(bào)告模式匹配的工具，它的目標(biāo)是保證代碼的一致性和避免錯(cuò)誤。

在本文開始前， 我們假設(shè)您已經(jīng)有一個(gè)webpack + react 的 初始項(xiàng)目。

初始化

首先， 現(xiàn)在 項(xiàng)目中 安裝 eslint 和 eslint-loader

yarn add eslint eslint-loader -D 復(fù)制代碼

在webpack中，通過 .eslintrc 文件 對 eslint 進(jìn)行配置。在根目錄下 執(zhí)行 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/},] } 復(fù)制代碼

我們的項(xiàng)目中之前已經(jīng)使用了 babel-loader對我們的代碼進(jìn)行轉(zhuǎn)譯， 我們可以把 eslint-loader 和他一起使用。

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

babel-eslint

我們的項(xiàng)目中使用了 es6 的語法， 可以通過 babel-eslint 進(jìn)行檢測。

yarn add babel-eslint -D 復(fù)制代碼

.eslintrc

{parser: "babel-eslint","rules": {} } 復(fù)制代碼

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

{"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",// ...} } 復(fù)制代碼

eslint-plugin-react

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

yarn add eslint-plugin-react -D 復(fù)制代碼

.eslintrc

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

Environments 指定腳本的運(yùn)行環(huán)境。

env: 指定腳本的運(yùn)行環(huán)境。每種環(huán)境都有一組特定的預(yù)定義全局變量。

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

更多環(huán)境變量請參考 官方文檔

.eslintrc

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

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

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

.eslintrc

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

eslint-config-airbnb

我們在使用 eslint 的時(shí)候 可以使用別人配置好的 配置， 我們可以選用 Airbnb 標(biāo)準(zhǔn)。

使用 Airbnb標(biāo)準(zhǔn)，還需要 兩個(gè) 必須的 插件。

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

.eslintrc

{// ..."extends": "airbnb", } 復(fù)制代碼

pre-commit

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

yarn add pre-commit -D 復(fù)制代碼

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

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

轉(zhuǎn)載于:https://juejin.im/post/5b988084e51d450e6e038a3e

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。