制定本身團隊的前端開發規範之 eslint

Eslint 配置文件

爲了你們方便，我將以前長長的 eslint 進行了更換，由於時間緣由和使用方面的緣由，沒將本身的 eslint 上傳成 eslint-config，直接使用騰訊的 eslint-config-alloy。

開始行動吧：

如下是以前寫的前端開發規範配套的 eslint，使用了騰訊的 eslint-config-alloy，加上對某些規則進行了修改，如 2 個空格，能夠直接使用 new Vue()。主要是針對 vue 的 eslint，若是須要配置 JS、TS、react 的，能夠打開 eslint-config-alloy 根聽說明配置。

具體每一條規則什麼意思均可以在騰訊 eslint 文檔中查看，寫的很簡潔明瞭，還有示例。

你們能夠複製一下下面的配置，而後轉到我新寫的手摸手帶你實踐標準的前端規範，直接開搞，把以前的前端規範進行實踐一下。

重點來咯，放大招：

module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
    sourceType: "module"
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
  extends: ["eslint-config-alloy/vue", "prettier"],

  // 能夠添加本身的規則，能夠參考 eslint-config-vue 和 騰訊的 eslint
  // https://github.com/vuejs/eslint-config-vue
  // https://alloyteam.github.io/eslint-config-alloy/
  rules: {
    "vue/mustache-interpolation-spacing": ["error", "always"],
    "vue/singleline-html-element-content-newline": "off",
    "vue/multiline-html-element-content-newline": "off",
    // vue 中 script 的空格
    "vue/script-indent": [
      "error",
      2,
      {
        baseIndent: 0,
        switchCase: 0,
        ignores: []
      }
    ],
    // vue 中 template 的空格
    "vue/html-indent": [
      "error",
      2,
      {
        attribute: 1,
        baseIndent: 1,
        closeBracket: 0,
        alignAttributesVertically: true,
        ignores: []
      }
    ],
    // 縮進使用 tab
    indent: [
      2,
      2,
      {
        SwitchCase: 1,
        VariableDeclarator: 1
      }
    ],
    // 能夠直接只用 new Vue()
    "no-new": 0,
    // 線上禁用debugger
    "no-debugger": process.env.NODE_ENV === "production" ? 2 : 0,
    // parseInt 能夠不傳第二個參數
    radix: 0
  }
};
複製代碼

目前大概就這些，但願小夥伴們在實踐中有以爲不舒服的，能夠給我反饋一下，我再改，規則仍是要經過實踐才以後具體適不適合大部分人，謝謝各位了~

閱讀完後兩部曲

很是感謝各位花時間閱讀完，衷心但願各位小夥伴能夠花少許的時間幫忙作兩件事：

• 動動你的手指，幫忙點個贊吧，你的點贊是對我最大的動力。

• 但願各位關注一下個人公衆號，新的文章第一時間發到公衆號，公衆號主要發一些我的隨筆、讀書筆記、還有一些技術熱點和實時熱點，而且還有很是吸引人的我我的自費抽獎活動哦~