eslint的應(yīng)用已經(jīng)深入到每個(gè)前端項(xiàng)目，最成熟的規(guī)范是airbnb/javascript。

vscode配置

vscode需要安裝eslint的插件，在設(shè)置->首選項(xiàng)->設(shè)置，setting.json可以配置eslint.validate，因?yàn)閑slint的插件默認(rèn)只配置js和react的校驗(yàn)，vue文件類型需要額外配置。

{
  "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
    ],
}

配置后，按下快捷鍵command + P，敲fix，提示Fix all autofixable Problem實(shí)現(xiàn)部分不規(guī)范的代碼的修復(fù)。

換行

airbnb的js規(guī)范要求每行在100字符內(nèi)，代碼很容易超出字符長度限制。html或模版需要針對自定義屬性靈活的換行，大大增加可讀性。

<Page :current="item.pageNum" :total="item.totalCount" @on-change="tabPageChange" show-elevator></Page>

改成：

<Page :current="item.pageNum"
      :total="item.totalCount"
      @on-change="tabPageChange"
      show-elevator></Page>

語意化命名

組件名應(yīng)該要和函數(shù)名一樣需要呈現(xiàn)出易懂的語義化規(guī)則。

去除eslint校驗(yàn)

如果某個(gè)文件需要跳過eslint規(guī)則限制

/* eslint-disable */

框架層面的修復(fù)

cli2和cli3都可以實(shí)現(xiàn)eslint的提示以及自動(dòng)修復(fù)。命令都是：

npm run lint

實(shí)際是執(zhí)行eslint模塊的命令，針對指定目錄和指定拓展名，--fix啟動(dòng)自動(dòng)修復(fù)。

eslint --ext .js,.vue src --fix

git提交信息規(guī)范化

feat：新增功能；
fix：修復(fù)bug；
docs：修改文檔；
refactor：代碼重構(gòu)，未新增任何功能和修復(fù)任何bug；
build：改變構(gòu)建流程，新增依賴庫、工具等（例如webpack修改）；
style：僅僅修改了空格、縮進(jìn)等，不改變代碼邏輯；
perf：改善性能和體現(xiàn)的修改；
chore：非src和test的修改；
test：測試用例的修改；
ci：自動(dòng)化流程配置修改；
revert：回滾到上一個(gè)版本；

Last but not the least

關(guān)注這個(gè)專題大前端從入門到跑路，歡迎你們投稿。