# Lint
[TOC]
## 介紹
使用 lint 的好處
具備基本工程素養的同學都會注重編碼規范,而代碼風格檢查(Code Linting,簡稱 Lint)是保障代碼規范一致性的重要手段。
遵循相應的代碼規范有以下好處
* 較少 bug 錯誤率
* 高效的開發效率
* 更高的可讀性
項目內集成了以下幾種代碼校驗方式
1. eslint 用于校驗代碼格式規范
2. commitlint 用于校驗 git 提交信息規范
3. stylelint 用于校驗 css/less 規范
4. prettier 代碼格式化
WARNING
lint 不是必須的,但是很有必要,一個項目做大了以后或者參與人員過多后,就會出現各種風格迥異的代碼,對后續的維護造成了一定的麻煩
## ESLint
ESLint 是一個代碼規范和錯誤檢查工具,有以下幾個特性
* 所有東西都是可以插拔的。你可以調用任意的 rule api 或者 formatter api 去打包或者定義 rule or formatter。
* 任意的 rule 都是獨立的
* 沒有特定的 coding style,你可以自己配置
### 手動校驗代碼
~~~
# 執行下面代碼.能修復的會自動修復,不能修復的需要手動修改
yarn run lint:eslint
~~~
### 配置項
項目的 eslint 配置位于根目錄下**.eslintrc.js**內,可以根據團隊自行修改代碼規范
### 編輯器配合
推薦使用 vscode 進行開發,vscode 自帶 eslint 插件,可以自動修改一些錯誤。
同時項目內也自帶了 vscode eslint 配置,具體在`.vscode/setting.json`文件夾內部。只要使用 vscode 開發不用任何設置即可使用
## CommitLint
在一個團隊中,每個人的 git 的 commit 信息都不一樣,五花八門,沒有一個機制很難保證規范化,如何才能規范化呢?可能你想到的是 git 的 hook 機制,去寫 shell 腳本去實現。這當然可以,其實 JavaScript 有一個很好的工具可以實現這個模板,它就是 commitlint(用于校驗 git 提交信息規范)。
### 配置
commit-lint 的配置位于項目根目錄下**commitlint.config.js**
### Git 提交規范
* 參考 [vue](https://github.com/vuejs/vue/blob/dev/.github/COMMIT_CONVENTION.md) 規范 ([Angular](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-angular))
* `feat`增加新功能
* `fix`修復問題/BUG
* `style`代碼風格相關無影響運行結果的
* `perf`優化/性能提升
* `refactor`重構
* `revert`撤銷修改
* `test`測試相關
* `docs`文檔/注釋
* `chore`依賴更新/腳手架配置修改等
* `workflow`工作流改進
* `ci`持續集成
* `mod`不確定分類的修改
* `wip`開發中
* `types`類型修改
### 如何關閉
在`.husky/commit-msg`內注釋以下代碼即可
~~~
# npx --no-install commitlint --edit "$1"
~~~
### 示例
~~~
git commit -m 'feat(home): add home page'
~~~
## Stylelint
stylelint 用于校驗項目內部 css 的風格,加上編輯器的自動修復,可以很好的統一項目內部 css 風格
### 配置
stylelint 配置位于根目錄下**stylelint.config.js**
### 編輯器配合
如果您使用的是 vscode 編輯器的話,只需要安裝下面插件,即可在保存的時候自動格式化文件內部 css 樣式
**插件**
[StyleLint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
## Prettier
prettier 可以用于統一項目代碼風格,統一的縮進,單雙引號,尾逗號等等風格
### 配置
prettier 配置文件位于項目根目錄下**prettier.config.js**
### 編輯器配合
如果您使用的是 vscode 編輯器的話,只需要安裝下面插件,即可在保存的時候自動格式化文件內部 js 格式
**插件**
[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
## Git Hook
git hook 一般結合各種 lint,在 git 提交代碼的時候進行代碼風格校驗,如果校驗沒通過,則不會進行提交。需要開發者自行修改后再次進行提交
### husky
有一個問題就是校驗會校驗全部代碼,但是我們只想校驗我們自己提交的代碼,這個時候就可以使用 husky。
最有效的解決方案就是將 Lint 校驗放到本地,常見做法是使用 husky 或者 pre-commit 在本地提交之前先做一次 Lint 校驗。
項目在`.husky`內部定義了相應的 hooks
### 如何關閉
~~~
# 刪除husky依賴即可
yarn remove huksy
~~~
### 如何跳過某一個檢查
~~~
# 加上 --no-verify即可跳過git hook校驗(--no-verify 簡寫為 -n)
git commit -m "xxx" --no-verify
~~~
### lint-staged
用于自動修復提交文件風格問題
**lint-staged**配置位于項目`.husky`目錄下**lintstagedrc.js**
~~~
module.exports = {
// 對指定格式文件 在提交的時候執行相應的修復命令
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
'package.json': ['prettier --write'],
'*.vue': ['eslint --fix', 'stylelint --fix', 'prettier --write', 'git add .'],
'*.{scss,less,styl,css,html}': ['stylelint --fix', 'prettier --write', 'git add .'],
'*.md': ['prettier --write'],
};
~~~
- 項目介紹
- 常見問題
- 開發環境準備
- 環境準備
- 啟動項目
- 切換Vue3路由
- 項目配置詳細說明
- 上線部署
- 快速構建&部署
- Docker鏡像啟動
- 項目配置
- 菜單配置
- 菜單緩存
- 積木報表菜單配置
- 首頁配置
- 國際化
- 菜單國際化
- 組件注冊
- 項目規范
- 跨域處理
- 樣式庫
- 圖標生成
- package依賴介紹
- 菜單TAB風格
- 備份文檔
- 詳細構建和配置
- 構建部署1.0
- 切換Mock接口
- 原生路由(作廢)
- 原生菜單(作廢)
- 頁面開啟緩存(作廢)
- 環境準備1.0
- 數據 mock&聯調
- UI組件
- Form 表單組件
- Table 表格
- Modal 彈窗
- Drawer 抽屜組件
- Icon 圖標組件
- Button 按鈕
- 更多基礎組件
- JSelectUser選擇用戶 ?
- JSelectPosition崗位選擇 ?
- JSelectDept部門選擇 ?
- JCheckbox ?
- JImportModal 列表導入彈窗組件
- JInput特殊查詢組件 ?
- JPopup彈窗選擇組件 ?
- JTreeSelect樹形下拉框 (異步加載) ?
- JAreaSelect 省市縣級聯組件
- JDictSelectTag 字典標簽 ?
- JEllipsis 超長截取顯示組件 ?
- JUpload 上傳組件 ?
- JEasyCron 定時表達式選擇組件 ?
- JInputPopup 多行輸入窗口組件 ?
- JSwitch 開關選擇組件 ?
- JTreeDict 分類字典樹形下拉組件 ?
- JSelectInput 可輸入下拉框 ?
- JEditor 富文本編輯器 ?
- JMarkdownEditor Markdown編輯器 ?
- JSearchSelect 字典表的搜索組件 ?
- JSelectUserByDept 根據部門選擇用戶 ?
- JVxeTable
- 組件配置文檔
- 自定義組件
- 封裝自定義組件
- 自定義組件增強
- 多級聯動配置
- 使用示例
- 常見問題解答
- JAreaLinkage 省市縣聯動組件 ?
- JCategorySelect 分類字典樹 ?
- JImageUpload 圖片上傳 ?
- JSelectMultiple 下拉多選 ?
- JSelectRole 選擇角色 ?
- JFormContainer 表單組件禁用 ?
- SuperQuery 高級查詢
- UserSelect 高級用戶選擇組件
- Basic
- Page
- Authority
- PopConfirmButton
- CollapseContainer
- ScrollContainer
- LazyContainer
- CodeEditor
- JsonPreview
- CountDown
- ClickOutSide
- CountTo
- Cropper
- Description
- FlowChart
- Upload
- Tree
- Excel
- Qrcode
- Markdown
- Loading
- Tinymce
- Time
- StrengthMeter
- Verify
- Transition
- VirtualScroll
- ContextMenu
- Preview
- Loading
- 前端權限
- 表單權限
- 顯隱控制 ?
- 禁用控制 ?
- 列表權限
- 按鈕權限控制
- 列字段顯隱控制
- 行編輯組件權限
- 顯隱控制
- 禁用控制
- 代碼生成
- Online在線代碼生成
- GUI代碼生成
- 代碼生成模板介紹
- vue3和vue3Native詳細說明
- 深入開發
- 定義Form新組件
- 自定義列表查詢
- 自定義表單布局
- 開發筆記
- 組件權限控制
- 使用Antd Vue原生Form
- 自定義圖表組件
- 自定義渲染函數
- 如何編寫mock接口
- 緩存用法
- 精簡版代碼制作
- 微前端(qiankun)集成
- 前端小技巧
- 表單整體禁用
- 彈框內下拉框錯位
- 界面如何設置響應式
- 抽屜(Drawer)寬度自適應
- 生成菜單腳本
- Online表單
- Online常見問題
- Online表單配置
- 配置參數說明
- 系統標準字段
- 表單類型-主子表|樹表
- 自定義查詢配置
- Online表單風格
- Online表單刪除說明
- Online聯合查詢配置
- online表單視圖功能說明
- Online表單開啟評論
- Online表單控件介紹
- 常用基礎控件
- 高級關聯記錄
- Online表單控件配置
- 基本配置
- 控件擴展配置
- 默認值表達式
- 自定義查詢配置
- 字段href
- 默認值(填值規則)
- 導入導出自定義規則
- Online表單權限配置
- 字段權限配置與授權
- 按鈕權限配置與授權
- 數據權限配置與授權
- 聯合查詢數據權限規則說明
- 在線增強
- 自定義按鈕
- SQL增強
- JS增強
- 按鈕觸發JS增強
- 列表Api
- 列表操作列前置事件
- 表單Api
- beforeSubmit事件
- loaded事件
- 表單值改變事件【單表/主表】
- 表單值改變事件【從表】
- 表單值改變事件【從改主】
- 控制字段顯示與隱藏
- js增強實現下拉聯動
- js增強控制下拉樹數據
- JS增強 觸發彈窗
- JS增強 http請求
- JS增強 方法定義
- 對接表單設計器后需注意
- JAVA增強
- 快速開始
- Online java增強 導入
- Online java增強 導出
- Online java增強 查詢
- Online Java增強 http-api
- 表單類
- 列表類
- 其他功能示例
- 導入數據庫表支持排除表
- 通過字段Href實現三級聯動
- excel數據導入支持校驗
- Online報表
- Online報表配置
- 配置成菜單
- 其他功能
- 推送消息
- ISO 8601書寫格式
- 系統消息跳轉至詳情表單
- 菜單【批量申請(自定義)】功能說明
- Online自動化測試
- online AI自動化測試數據制作
- Online AI自動化測試數據制作
- Online AI模型測試用例功能詳情
- JAVA后臺功能
- saas多租戶切換
- 新功能實現saas租戶隔離
- 第三方集成
- 敲敲云集成釘釘