React系列---ESlint

yanbingyun1990 發布于2019-08-20 17:30 / 2194人閱讀

摘要：是一個代碼靜態檢查工具，可以檢查的語法錯誤，提示潛在的，可以有效提高代碼質量。維持前端團隊高度一致的編碼風格。

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

詳細的可以參考：ESLint中文

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

安裝安裝ESLint、ESLint loader

npm install --save-dev eslint@3.19.0
npm install --save-dev eslint-loader

逐個配置規則有點麻煩，ESLint有很多第三方配置好的格式插件，Airbnb開發配置合集就比較常用：

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

項目根目錄下創建并ESLint配置文件，.eslintrc.js：

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

可以參照ESLint完整規則列表，找到并定制自己的規則。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83633.html

前端系列——React開發必不可少的eslint配置

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

keithxiaoy 2019-08-26 11:33 評論0 收藏0
Webpack系列——手把手教你使用Webpack搭建簡易的React開發環境

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

cucumber 2019-08-22 11:06 評論0 收藏0
從react-start到co源碼(一)

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

gekylin 2019-08-20 13:44 評論0 收藏0
前端代碼風格自動化系列（五）之共同出擊

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

pumpkin9 2019-08-23 14:33 評論0 收藏0