制定本身团队的前端开发规范之 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
  }
};
复制代码

目前大概就这些，但愿小伙伴们在实践中有以为不舒服的，能够给我反馈一下，我再改，规则仍是要经过实践才以后具体适不适合大部分人，谢谢各位了~

阅读完后两部曲

很是感谢各位花时间阅读完，衷心但愿各位小伙伴能够花少许的时间帮忙作两件事：

• 动动你的手指，帮忙点个赞吧，你的点赞是对我最大的动力。

• 但愿各位关注一下个人公众号，新的文章第一时间发到公众号，公众号主要发一些我的随笔、读书笔记、还有一些技术热点和实时热点，而且还有很是吸引人的我我的自费抽奖活动哦~