成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React系列---ESlint

yanbingyun1990 / 2202人閱讀

摘要:是一個代碼靜態(tài)檢查工具,可以檢查的語法錯誤,提示潛在的,可以有效提高代碼質(zhì)量。維持前端團隊高度一致的編碼風格。

ESLint是一個JavaScript代碼靜態(tài)檢查工具,可以檢查JavaScript的語法錯誤,提示潛在的bug,可以有效提高代碼質(zhì)量。維持前端團隊高度一致的編碼風格。ESLint不但提供一些默認的規(guī)則,也提供用戶自定義規(guī)則來約束所寫的JavaScript代碼。

詳細的可以參考:ESLint中文

讓項目加上ESLint代碼規(guī)范支持非常容易。

安裝安裝ESLint、ESLint loader

npm install --save-dev [email protected]
npm install --save-dev eslint-loader

逐個配置規(guī)則有點麻煩,ESLint有很多第三方配置好的格式插件,Airbnb開發(fā)配置合集就比較常用:

npm install --save-dev eslint-config-airbnb

Airbnb包括了以下三個插件需要安裝:

npm install --save-dev eslint-plugin-import
npm install --save-dev eslint-plugin-react 
npm install --save-dev eslint-plugin-jsx-a11y

項目根目錄下創(chuàng)建并ESLint配置文件,.eslintrc.js:

module.exports = {
  // 指定校驗的ECMAScript的版本及特性
  "parserOptions": {
    "ecmaVersion": 7, // ECMAScript版本,7為ES7
    "sourceType": "module", //默認script,如果代碼是ECMAScript模塊,設(shè)置為module
    "ecmaFeatures": { // 使用額外的語言特性
        "jsx": true // 啟用JSX
    }
  },
  // 當訪問未定義的變量時,no-undef 規(guī)則將發(fā)出警告
  // 指定腳本的運行環(huán)境。每種環(huán)境都有一組特定的預(yù)定義全局變量
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
  },
  // 當訪問未定義的變量時,no-undef 規(guī)則將發(fā)出警告
  // 腳本在執(zhí)行期間訪問的額外的全局變量
  "globals": {
    "document": true,
    "navigator": true,
    "window":true,
    "node":true
  },
  // 使用第三方airbnb開發(fā)配置合集
  "extends": "airbnb",
  // eslint-config-airbnb包括了以下3個插件
  "plugins": [
    "react",
    "jsx-a11y",
    "import"
  ],
  // 定義自己的規(guī)則
  "rules": {
    "comma-dangle": ["error", "never"], // 要求或禁止末尾逗號:不允許逗號
    "indent": ["error", 4], // JavaScript代碼強制使用一致的縮進:4格縮進
  }
};

可以參照ESLint完整規(guī)則列表,找到并定制自己的規(guī)則。

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/83633.html

相關(guān)文章

  • 前端系列——React開發(fā)必不可少的eslint配置

    摘要:項目需要安裝的插件配置詳情下面的配置涵蓋了開發(fā)者所需要的絕大部分信息,中的值分別表示不開啟檢查警告錯誤。配置文件類型配置文件類型不只有和,其實包括下面這些 項目需要安裝的插件 babel-eslint: ^8.0.3, eslint: ^4.13.1, eslint-plugin-react: ^7.5.1, 配置詳情 下面的配置涵蓋了開發(fā)者所需要的絕大部分信息,rules中的值0、1...

    keithxiaoy 評論0 收藏0
  • Webpack系列——手把手教你使用Webpack搭建簡易的React開發(fā)環(huán)境

    摘要:在這篇文章中我們開始利用我們之前所學(xué)搭建一個簡易的開發(fā)環(huán)境,用以鞏固我們之前學(xué)習的知識。 文章首發(fā)于我的github及個人博客,github請看https://github.com/huruji/blo...,轉(zhuǎn)載請注明出處。 在這篇文章中我們開始利用我們之前所學(xué)搭建一個簡易的React開發(fā)環(huán)境,用以鞏固我們之前學(xué)習的Webpack知識。首先我們需要明確這次開發(fā)環(huán)境需要達到的效果:1、...

    cucumber 評論0 收藏0
  • react-start到co源碼(一)

    摘要:安裝這個預(yù)設(shè)主要包含了如下兩個插件實現(xiàn)熱加載捕獲中的方法并展現(xiàn)在界面上修改上述的文件文件通過上面的幾個步驟我們就大致完成了開發(fā)環(huán)境的基本搭建。應(yīng)該在中進行配置以上就是簡單的環(huán)境搭建后面會推出后續(xù)的文章。 react作為當前十分流行的前端框架,相信很多前端er都有蠢蠢欲動的學(xué)習它的想法。工欲善其事,必先利其器。這篇文章就簡單的給大家介紹一下如何我快速的搭建一個react前端開發(fā)環(huán)境。主要...

    gekylin 評論0 收藏0
  • 前端代碼風格自動化系列(五)之共同出擊

    摘要:我們在前面的四篇中介紹了這些工具,可以完成以最小的代價在提交到遠程倉庫前,格式化為統(tǒng)一風格的代碼,大家都很熟悉這里就不列舉了。下面舉一個配置。這里對于項目里分別做了提交前格式化操作,對于提交規(guī)范做了校驗。 我們在前面的四篇中介紹了husky、commitlint、lint-staged、prettier這些工具,可以完成以最小的代價在Git提交到遠程倉庫前,格式化為統(tǒng)一風格的代碼,es...

    pumpkin9 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<