ESLint對a標籤href屬性警告解決方法

上帝是程式設計師發表於2019-04-10
EsLint

一、問題解決方法

1、環境介紹：

通過React的官方教程 Create-React-App使用腳手架工具搭建的工程，然後新增了路由元件React-Router，樣式元件Antd Design（簡稱antd）。

在antd的的Table元件中是這樣新增行操作的

<a href="javascript:;">{text}</a>
複製程式碼

2、警告描述：

The href attribute is required for an anchor to be keyboard accessible.
Provide a valid, navigable address as the href value.
If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. 
Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md  jsx-a11y/anchor-is-valid
複製程式碼

3、解決方法：

3.1、執行 npm run eject

然後根據提示安裝缺少的元件。

3.2、新增配置

在package.json檔案中新增如下程式碼

"eslintConfig": {
    "extends": "react-app",
    "rules":{
      "jsx-a11y/anchor-is-valid":"off"
    }
  }
複製程式碼

然後修改程式碼為

<a href="">{text}</a>

複製程式碼

然後就可以消除警告，問題解決！

二、解決過程

1、閱讀控制檯提示資訊

首先開啟警告提示中的連結地址 裡面解釋為什麼會出現這個問題，以及關於各種用法的處理方法，但是不夠通用。尋求配置方法

2、尋找官方資料

開啟ESLint官網，找到使用者指南下的配置教程，閱讀之後收穫如下：

2.1、配置方式

  1. Configuration Comments ： 使用 JavaScript 註釋把配置資訊直接嵌入到一個程式碼原始檔中。
  2. Configuration Files ： 使用 JavaScript、JSON 或者 YAML 檔案為整個目錄（處理你的主目錄）和它的子目錄指定配置資訊。可以配置一個獨立的 .eslintrc.* 檔案，或者直接在 package.json 檔案裡的 eslintConfig 欄位指定配置，ESLint 會查詢和自動讀取它們，再者，你可以在命令列執行時指定一個任意的配置檔案。

2.2、檔案配置方式優先順序

ESLint 支援幾種格式的配置檔案：

  • JavaScript - 使用 .eslintrc.js 然後輸出一個配置物件。
  • YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定義配置的結構。
  • JSON - 使用 .eslintrc.json 去定義配置的結構，ESLint 的 JSON 檔案允許 JavaScript 風格的註釋。
  • (棄用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
  • package.json - 在 package.json 裡建立一個 eslintConfig屬性，在那裡定義你的配置。

如果同一個目錄下有多個配置檔案，ESLint 只會使用一個。優先順序順序如下：

  1. .eslintrc.js
  2. .eslintrc.yaml
  3. .eslintrc.yml
  4. .eslintrc.json
  5. .eslintrc
  6. package.json

2.3、啟用停用規則

配置規則關鍵字如下

  • "off" 或 0 - 關閉規則
  • "warn" 或 1 - 開啟規則，使用警告級別的錯誤：warn (不會導致程式退出)
  • "error" 或 2 - 開啟規則，使用錯誤級別的錯誤：error (當被觸發的時候，程式會退出)

2.4 執行 npm run eject

然後根據提示安裝缺少的元件。 執行該命令允許自定義配置，參考連結。

2.5 配置規則

根據控制檯提示連線中的 Rule details 章節知道關於href屬性校驗的規則名稱叫jsx-a11y/anchor-is-valid ,配置package.json檔案如下即可解決問題

"eslintConfig": {
    "extends": "react-app",
    "rules":{
      "jsx-a11y/anchor-is-valid":"off"
    }
  }
複製程式碼

2.5 然後修改程式碼為

<a href="">{text}</a>

複製程式碼

相關文章