国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

webpack4系列教程（八）：使用Eslint審查代碼

Chiclaim / 3227人閱讀

摘要：使用配置完成，如何使用呢在文件中添加一條代表需要解析的文件格式，最后接上文件路徑，由于我們的主要代碼都在目錄下，這里就配置文件夾。

前言：

本章內(nèi)容，我們?cè)陧?xiàng)目中加入eslint配置，來審查校驗(yàn)代碼，這樣能夠避免一些比較低級(jí)的錯(cuò)誤。并且在團(tuán)隊(duì)協(xié)作的時(shí)候，保持同一種風(fēng)格和規(guī)范能提高代碼的可讀性，進(jìn)而提高我們的工作效率。

安裝：

eslint-config-standard 是一種較為成熟通用的代碼審查規(guī)則，這樣就不用我們自己去定義規(guī)則了，使用起來非常方便，記住還需要安裝一些依賴插件：

npm install --save-dev eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node
配置：

在項(xiàng)目根目錄下創(chuàng)建 .eslintrc 文件：

{
  "extends": "standard",
  "rules": {
    "no-new": "off"
  }
}

在vue項(xiàng)目中，.vue文件中的 script標(biāo)簽內(nèi)的代碼，eslint 是無法識(shí)別的，這時(shí)就需要使用插件： eslint-plugin-html

npm i eslint-plugin-html -D

然后在 .eslintrc 中配置該插件：

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "rules": {
    "no-new": "off"
  }
}

這樣就能解析 .vue文件中的JS代碼了，官方也是如此推薦。

使用：

配置完成，如何使用呢？
在 package.json 文件中添加一條 script：

"scripts": {
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.config.js --progress --inline --colors",
    "lint": "eslint --ext .js --ext .vue src/"
  }

- -ext 代表需要解析的文件格式，最后接上文件路徑，由于我們的主要代碼都在src 目錄下，這里就配置 src 文件夾。

npm run lint

可見控制臺(tái)給出了很多錯(cuò)誤：

在項(xiàng)目前期沒有加入eslint的情況下，后期加入必然會(huì)審查出許多錯(cuò)誤。出現(xiàn)這么多錯(cuò)誤之后，如果我們逐條手動(dòng)去解決會(huì)非常耗時(shí)，此時(shí)可以借助eslint自動(dòng)修復(fù)，方法也很簡(jiǎn)單。
只需要添加一條命令即可：

"scripts": {
  "build": "cross-env NODE_ENV=production webpack --config config/webpack.config.js --progress --inline --colors",
  "lint": "eslint --ext .js --ext .vue src/",
  "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
}

然后執(zhí)行

npm run lint-fix

我們希望在開發(fā)過程中能夠?qū)崟r(shí)進(jìn)行eslint代碼審查，需要安裝兩個(gè)依賴：

npm i eslint-loader babel-eslint -D

修改 .eslintrc：

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "rules": {
    "no-new": "off"
  },
  "parserOptions":{
    "parser": "babel-eslint"
  }
}

由于我們的項(xiàng)目使用了webpack并且代碼都是經(jīng)過Babel編譯的，但是Babel處理過的代碼有些語法可能對(duì)于eslint支持性不好，所以需要指定一個(gè) parser。
下一步，在webpack.config.js中添加loader：

{
        test: /.(vue|js)$/,
        loader: "eslint-loader",
        exclude: /node_modules/,
        enforce: "pre"
 }

enforce: "pre" 表示預(yù)處理，因?yàn)槲覀冎皇窍Ｍ鹐slint來審查我們的代碼，并不是去改變它，在真正的loader(比如：vue-loader)發(fā)揮作用前用eslint去檢查代碼。

記得在你的IDE中安裝并開啟eslint插件功能，這樣就會(huì)有錯(cuò)誤提示了。

比如：

圖中的錯(cuò)誤是未使用的變量。

# editorconfig:
editorconfig是用來規(guī)范我們的IDE配置的，在根目錄創(chuàng)建 .editorconfig文件：

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

這樣就能在各種IDE使用相同的配置了。

同樣需要在IDE中安裝editorconfig插件

以上就是eslint的配置方法了。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/101057.html

相關(guān)文章

  • webpack4系列教程（十）：總結(jié)

    摘要：傳送門系列教程一初識(shí)系列教程二創(chuàng)建項(xiàng)目，打包第一個(gè)文件系列教程三自動(dòng)生成項(xiàng)目中的文件系列教程四處理項(xiàng)目中的資源文件一系列教程五處理項(xiàng)目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發(fā)環(huán)境和生產(chǎn)環(huán)境 在前端開發(fā)日益復(fù)雜的今天，我們需要一個(gè)工具來幫助我們管理項(xiàng)目資源，打包、編譯、預(yù)處理、后處理等等。webpack的出現(xiàn)無疑是前端開發(fā)者的福音，我的博文只...

    hqman 評(píng)論0 收藏0

  • webpack多頁應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼

    摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。如果你使用了，或類似的，那么，通過編譯前后的代碼相差就很大了，這會(huì)造成兩個(gè)問題以為例把你的代碼轉(zhuǎn)成什么樣你自己是無法控制的，這往往導(dǎo)致無法通過的審查。 本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000007030775如果您...

    dingding199389 評(píng)論0 收藏0

  • webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

    摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...

    LMou 評(píng)論0 收藏0

  • webpack4 系列教程(九): CSS Tree Shaking

    摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請(qǐng)查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步 原文地址 有空就來看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...

    趙連江 評(píng)論0 收藏0

  • webpack4 系列教程(九): CSS Tree Shaking

    摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請(qǐng)查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉庫圖片，網(wǎng)速過慢的朋友請(qǐng)移步 原文地址 有空就來看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...

    superw 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<