語法校驗
一個校驗工具可以幫助我們在編寫代碼時避免一些愚蠢的錯誤。
一個好的校驗工具可以在我們浪費時間找BUG之前告訴我們存在的問題。
一個好的校驗工具可以確保一個項目遵循編碼規範。
HBuilderX 包含4款語法校驗插件,htmlhint, stylelint, eslint-plugin-vue, eslint-js。主要用於校驗html,css/less/sass/scss,vue, javascript
語法校驗插件
HBuilderX,代碼語法校驗,需要安裝相應插件。
其中,json已內置校驗功能,無需下載任何插件。
語言 | 插件名稱 | 插件地址 | 插件文檔 |
---|---|---|---|
html | validate-html | 下載地址 | 文檔教程 |
css/less/sass/scss | validate-stylelint | 下載地址 | 文檔教程 |
js | eslint-js | 下載地址 | 文檔教程 |
vue | eslint-vue | 下載地址 | 文檔教程 |
注意:
- scss文件,如果代碼使用
@-rules
指令,stylelint校驗提示at-rule-no-unknown
,請配置@
相關的規則。stylelint@規則參考
使用方法
如下圖所示,在對應的文件上,右鍵菜單,點擊【驗證本文檔語法】,如未出現此菜單,請先安裝相關插件。
校驗概要結果會顯示在狀態欄
比如有2個錯誤(如下圖),可以按F4
切換到不同的錯誤處,畫有紅波浪線(如下圖),鼠標移到紅波浪線上會顯示具體的錯誤信息。(如下圖示例)