一、前言
??由于公司Saber前端框架沒有進行ESlint代碼規范的約束，導致在開發過程中，各種代碼風格迥異，無法形成規范，造成以后維護的困難。為此，我司決定用ESlint規范統一項目風格。
二、代碼風格
- 整體風格
-
javascript大體上遵循ESlint規范 -
html、wxml大體上遵循prettyhtml規范
-
-
javascript細節調整- 結尾無分號
- 超過140個字符換行
- 使用單引號
- 無尾隨逗號
- 箭頭函數單個參數不加分號
- 函數聲明時禁止圓括號前有空格
三、前期準備
四、項目添加ESlint
1、在項目.eslintrc.js中添加 函數聲明時禁止圓括號前有空格 規則
??解決Prettier格式化時與ESlint規范沖突報錯。沖突原因可參考prettier 不支持函數后空格? 看社區怎么說
// 函數聲明時禁止圓括號前有空格
'space-before-function-paren': 'off'
函數聲明時禁止圓括號前有空格
2、項目根目錄添加.prettierrc，規定Prettier格式化規則
??解決格式化js文件時，定義的規則沒有生效。因為.editorconfig格式化高于編譯器的格式化規則，導致Prettier定義的格式化沒生效。沒有生效原因可參考EditorConfig-優先級
{
"semi": false,
"printWidth": 140,
"singleQuote": true,
"trailingComma": "none",
"arrowParens": "avoid"
}
Prettier格式化規則
3、項目添加ESlint
vue add @vue/eslint- 選擇
Standard和Lint on Save
添加ESlint
4、 修改報錯信息
??修改報錯信息有兩種，一種是忽略文件檢查，隱藏報錯信息；第二種是根據報錯信息規則修改。以下提供兩種方式二選其一即可
- 忽略文件檢查，隱藏報錯信息
忽略整個文件檢查，一般寫在文件頭部
/* eslint-disable */
忽略單行檢查
/* eslint-disable-line */
忽略下一行檢驗
/* eslint-disable-next-line */
忽略多行檢查
/* eslint-disable */
// js code
/* eslint-enable */
忽略具體錯誤類型
/* eslint-disable-line [錯誤類型] */
忽略具體錯誤類型
忽略下一行檢驗
- 根據報錯信息進行修改
- 沒有用駝峰命名
- 沒有用強等
===或強不等!== - 框架代碼本身有誤
解決方式：為了框架能正確運行，如果是框架本身的報錯信息，用忽略文件或單行文件進行修改，自己寫的代碼嚴格遵循ESlint規范。
框架代碼本身有誤
