一、前言
??由于公司Saber前端框架沒有進行ESlint代碼規(guī)范的約束落剪，導(dǎo)致在開發(fā)過程中餐屎，各種代碼風(fēng)格迥異输玷，無法形成規(guī)范，造成以后維護的困難靡馁。為此欲鹏，我司決定用ESlint規(guī)范統(tǒng)一項目風(fēng)格。
二臭墨、代碼風(fēng)格
- 整體風(fēng)格
-
javascript大體上遵循ESlint規(guī)范 -
html赔嚎、wxml大體上遵循prettyhtml規(guī)范
-
-
javascript細節(jié)調(diào)整- 結(jié)尾無分號
- 超過140個字符換行
- 使用單引號
- 無尾隨逗號
- 箭頭函數(shù)單個參數(shù)不加分號
- 函數(shù)聲明時禁止圓括號前有空格
三、前期準備
四尤误、項目添加ESlint
1、在項目.eslintrc.js中添加 函數(shù)聲明時禁止圓括號前有空格 規(guī)則
??解決Prettier格式化時與ESlint規(guī)范沖突報錯结缚。沖突原因可參考prettier 不支持函數(shù)后空格? 看社區(qū)怎么說
// 函數(shù)聲明時禁止圓括號前有空格
'space-before-function-paren': 'off'
函數(shù)聲明時禁止圓括號前有空格
2损晤、項目根目錄添加.prettierrc，規(guī)定Prettier格式化規(guī)則
??解決格式化js文件時红竭，定義的規(guī)則沒有生效尤勋。因為.editorconfig格式化高于編譯器的格式化規(guī)則，導(dǎo)致Prettier定義的格式化沒生效茵宪。沒有生效原因可參考EditorConfig-優(yōu)先級
{
"semi": false,
"printWidth": 140,
"singleQuote": true,
"trailingComma": "none",
"arrowParens": "avoid"
}
Prettier格式化規(guī)則
3最冰、項目添加ESlint
vue add @vue/eslint- 選擇
Standard和Lint on Save
添加ESlint
4、 修改報錯信息
??修改報錯信息有兩種稀火，一種是忽略文件檢查暖哨，隱藏報錯信息；第二種是根據(jù)報錯信息規(guī)則修改憾股。以下提供兩種方式二選其一即可
- 忽略文件檢查鹿蜀，隱藏報錯信息
忽略整個文件檢查，一般寫在文件頭部
/* eslint-disable */
忽略單行檢查
/* eslint-disable-line */
忽略下一行檢驗
/* eslint-disable-next-line */
忽略多行檢查
/* eslint-disable */
// js code
/* eslint-enable */
忽略具體錯誤類型
/* eslint-disable-line [錯誤類型] */
忽略具體錯誤類型
忽略下一行檢驗
- 根據(jù)報錯信息進行修改
- 沒有用駝峰命名
- 沒有用強等
===或強不等!== - 框架代碼本身有誤
解決方式：為了框架能正確運行服球，如果是框架本身的報錯信息茴恰，用忽略文件或單行文件進行修改，自己寫的代碼嚴格遵循ESlint規(guī)范斩熊。
框架代碼本身有誤
