日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
寫一個(gè)Eslint插件：VueTemplate中Class順序的檢查和自動修復(fù)

有小伙伴問我如何修復(fù) vue template 中的 class 名的順序、屬性名順序，還有 options 中的屬性順序的問題，用 eslint 可以做到么。

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),烏魯木齊網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:烏魯木齊等地區(qū)。烏魯木齊做網(wǎng)站價(jià)格咨詢:18982081108

答案是能，但是需要寫 eslint 插件來檢查和修復(fù)。

考慮到他可能沒有寫過 eslint 插件，所以我先把相對簡單的校驗(yàn)和修復(fù) class 名的順序的插件摘出來實(shí)現(xiàn)了一下。

思路分析

首先，eslint 是否能 parse vue 的模版呢?

是可以的，因?yàn)?eslint 的 parser 支持切換，而 vue 實(shí)現(xiàn)了對應(yīng)的 parser，所以可以在 eslint 中使用 vue-eslint-parser 來解析模版。

我們可以使用 astexplorer.net 來看一下 parse 生成的 AST。

我們要處理的是 class 屬性，也就是 VAttribute 的 value 部分

可以支持傳入比較器來自定義順序，排序完之后設(shè)置回去。

當(dāng)然，vue 的模版支持 {} 來引用 data，這種我們不處理，可以過濾掉。

思路比較簡單，下面我們寫代碼來實(shí)現(xiàn)一下。

代碼實(shí)現(xiàn)

我們可以給插件起名為 vue-class-order。

首先，我們引入 eslint，設(shè)置 useEslintrc 為 false 也就是不使用配置文件，然后在 overrideConfig 屬性設(shè)置各種配置，rules 里填入這個(gè)插件。

 
 
 
 
    
  
  
  
  
  1. const { ESLint } = require("eslint"); 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. const engine = new ESLint({ 
    4. 
  
  
  
  
  4.     fix: false, 
    5. 
  
  
  
  
  5.     overrideConfig: { 
    6. 
  
  
  
  
  6.         parser: 'vue-eslint-parser', 
    7. 
  
  
  
  
  7.         parserOptions: { 
    8. 
  
  
  
  
  8.             sourceType: 'module' 
    9. 
  
  
  
  
  9.         }, 
    10. 
  
  
  
  
  10.         rules: { 
    11. 
  
  
  
  
  11.             "vue-class-order": [ "error" ] 
    12. 
  
  
  
  
  12.         } 
    13. 
  
  
  
  
  13.     }, 
    14. 
  
  
  
  
  14.     rulePaths: ['./'], 
    15. 
  
  
  
  
  15.     useEslintrc: false 
    16. 
  
  
  
  
  16. }); 
    17.

這里的 parser 要使用 vue-eslint-parser 才可以，并且 rulePaths 也就是查找 rule 的路徑也要設(shè)置下。fix 設(shè)置為 false 代表不自動修復(fù)。

之后，調(diào)用它的 lintText 方法來對代碼進(jìn)行 lint。

 
 
 
 
    
  
  
  
  
  1. (async function main() { 
    2. 
  
  
  
  
  2.   const results = await engine.lintText(` 
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6. `); 
    7. 
  
  
  
  
  7.  
    8. 
  
  
  
  
  8.   console.log(results[0].output); 
    9. 
  
  
  
  
  9.  
    10. 
  
  
  
  
  10.   const formatter = await engine.loadFormatter("stylish"); 
    11. 
  
  
  
  
  11.   const resultText = formatter.format(results); 
    12. 
  
  
  
  
  12.   console.log(resultText); 
    13. 
  
  
  
  
  13. })(); 
    14.

之后在插件里面取出來：

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2. 
  
  
  
  
  2.      meta: { 
    3. 
  
  
  
  
  3.          fixable: true 
    4. 
  
  
  
  
  4.      }, 
    5. 
  
  
  
  
  5.      create(context) { 
    6. 
  
  
  
  
  6.          const comparator = context.options[0]; 
    7. 
  
  
  
  
  7.           
    8. 
  
  
  
  
  8.      } 
    9. 
  
  
  
  
  9.  }; 
    10. 
  
  
  
  
  10.   
    11.

這里的 comparator 就是從 context 中取出的參數(shù)。

插件的結(jié)構(gòu)是 meta，create 兩部分，meta 是各種描述插件本身的元信息，create 部分是插件的主要邏輯。

create 部分返回一個(gè) visitor，聲明對什么節(jié)點(diǎn)進(jìn)行什么操作。但是因?yàn)槲覀冇玫?parser 是 vue 自定義的(vue-eslint-parser)，所以這里 visitor 也要用它提供的，也就是：

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2. 
  
  
  
  
  2.      meta: { 
    3. 
  
  
  
  
  3.          fixable: true 
    4. 
  
  
  
  
  4.      }, 
    5. 
  
  
  
  
  5.      create(context) { 
    6. 
  
  
  
  
  6.          const comparator = context.options[0]; 
    7. 
  
  
  
  
  7.          return context.parserServices.defineTemplateBodyVisitor({ 
    8. 
  
  
  
  
  8.             "VAttribute[key.name=class]"(node) {   
    9. 
  
  
  
  
  9.                  
    10. 
  
  
  
  
  10.             } 
    11. 
  
  
  
  
  11.          }); 
    12. 
  
  
  
  
  12.      } 
    13. 
  
  
  
  
  13.  }; 
    14.

在 context.parserServices.defineTemplateBodyVisitor 方法中傳入具體的 visitor，比如我們需要對 VAttribute 節(jié)點(diǎn)做處理。

eslint 支持esqury 的寫法，也就是可以通過選擇器的方式來指定要處理的節(jié)點(diǎn)，這里我們指定 key.name 為 class 的 VAttribute 節(jié)點(diǎn)

之后要拿到節(jié)點(diǎn)的值，排序一下，看看是否是對的，不對就報(bào)錯。

 
 
 
 
    
  
  
  
  
  1. "VAttribute[key.name=class]"(node) {   
    2. 
  
  
  
  
  2.     const classStr = node.value.value; 
    3. 
  
  
  
  
  3.     if (!classStr.includes('{')) { //過濾掉有插值表達(dá)式的 class 
    4. 
  
  
  
  
  4.         const curOrder = classStr.split(/\s/); 
    5. 
  
  
  
  
  5.         const shouldOrder = [...curOrder].sort(comparator); 
    6. 
  
  
  
  
  6.         if (curOrder.some((item, index) => curOrder[index] !== shouldOrder[index])) { 
    7. 
  
  
  
  
  7.             context.report({ 
    8. 
  
  
  
  
  8.                 node, 
    9. 
  
  
  
  
  9.                 message: 'className 順序不對：' + classStr, 
    10. 
  
  
  
  
  10.                 loc: node.value.loc 
    11. 
  
  
  
  
  11.             }); 
    12. 
  
  
  
  
  12.         } 
    13. 
  
  
  
  
  13.     } 
    14. 
  
  
  
  
  14. } 
    15.

這樣，我們就實(shí)現(xiàn)了對 vue 模版中 class 的順序的 lint。

我們試一下效果：

我們實(shí)現(xiàn)了對 className 順序的 lint!

當(dāng)然，只報(bào)錯不修復(fù)比較耍流氓，我們還得實(shí)現(xiàn)下自動修復(fù)。

修復(fù)的話就是把 value 的部分替換掉，也就是拿到 value 的 range(開始和結(jié)束的下標(biāo))，把該 range 的文本使用 fixer 的 api 替換掉。(這里要考慮引號)

 
 
 
 
    
  
  
  
  
  1. context.report({ 
    2. 
  
  
  
  
  2.     node, 
    3. 
  
  
  
  
  3.     message: 'className 順序不對：' + classStr, 
    4. 
  
  
  
  
  4.     loc: node.value.loc, 
    5. 
  
  
  
  
  5.     *fix(fixer) { 
    6. 
  
  
  
  
  6.         const [ start, end ] = node.value.range; 
    7. 
  
  
  
  
  7.         yield fixer.replaceTextRange([start + 1, end - 1], shouldOrder.join(' ')) 
    8. 
  
  
  
  
  8.     } 
    9. 
  
  
  
  
  9. }); 
    10.

我們把 fixer 設(shè)置為 true，再跑一下：

做了自動的修復(fù)，沒有報(bào)錯了!

我們實(shí)現(xiàn)了對 vue 模版中 class 的順序的檢查和自動修復(fù)!

總結(jié)

Eslint 可以基于 AST 做代碼格式的檢查和修復(fù)。

基于 AST 那就得有對應(yīng)的 parser， eslint 支持 parser 的擴(kuò)展，所以有很多 eslint parser 可用，要 parse vue 模版就可以用 vue-eslint-parser?？梢杂?astexplorer.net可視化的查看。

我們要實(shí)現(xiàn)對 vue 模版中 class 的順序的檢查，分析之后就是要取出 key 為 class 的 VAttribute 節(jié)點(diǎn)的 value，然后根據(jù)傳入的比較器進(jìn)行排序，如果順序不一致，就報(bào)錯。并且還可以通過 fixer 的 api 進(jìn)行自動修復(fù)，也就是對該段 range 的文本進(jìn)行替換。

這里我們通過 api 來調(diào)用的 eslint，通過 cli 也一樣。

這篇文章實(shí)現(xiàn)了一個(gè)相對簡單的 eslint 插件，對 vue template 中的代碼格式做了檢查和修復(fù)，希望能夠幫助大家理清 eslint 插件開發(fā)的思路。


網(wǎng)站題目：寫一個(gè)Eslint插件：VueTemplate中Class順序的檢查和自動修復(fù)
網(wǎng)站地址：http://www.dlmjj.cn/article/dhsiisg.html