vue eslint 規范配置

為了代碼格式統一，避免一些低級或者不合理的錯誤，現強行使用eslint的 standard規范

項目配置

目前都是使用 vue 提供的腳手架進行開發的，雖然 vue-cli 3.0,但是公司因為配置了OAuth的緣故，暫時還是只能使用vue-cli 2.0,
因而當前配置會結合兩個版本進行闡述

目的

可以通過編輯器（vscode）進行提示同時可以修復，如此便是最好的

vue-cli 2.0

• 新建項目時選擇 standard格式
  

• 測試eslint （隨便選個地方，打幾個空格）
  

• 保存時可以自動修復 （或者代碼格式化時修復）

  由於vetur使用的格式化是 prettier的方式，並不是我們想要的standard，目前兩種操作方式
  

  • 方案1： 若是能將prettier改為我們想要的，這是最好的
  • 方案2： 不改變 prettier，而是在保存時再按照 standard的形式保存也不賴的

  針對上面描述，當前才用的是第二種方案（第一種方式還沒找到解決辦法）

  • 采用方案2,操作流程

    • 安裝插件 ESLint

    • vscode setting.json添加配置

        // 開啟
        "eslint.enable": true,
        // 保存
        "eslint.autoFixOnSave": true,
        "eslint.run": "onType",
        "eslint.options": {
            "extensions": [".js",".vue"]
        },
        "eslint.validate": [
            // 此處保存時，自動修復
            { "language": "vue", "autoFix": true },
            "javascript",
            "html",
            "vue-html"
        ]
      

    • 效果

    

vue-cli 3.0操作相同（細微區別先不描述）

eslint簡單描述

eslint目前有兩個大的分支

• standard
• airbnb

airbnb 比 standard 規則要求更加嚴格，這也是為何選擇 standard的緣故，由於規則並不是百分百符合每個公司，因而都會在此基礎上，進行私人定制 eslint-config-vue 具體規則描述見 eslint官網

關閉某個特定eslint校驗 網友

總結

• 若是能在代碼格式化時就可以進行修復，這才是最好的
• 如何定制自己的規則，這個有些難（眾口難調）
• 后續再進行補充吧（點之間還是有些散）