制定自己团队的前端开发规范之 eslint

石燕平

发布于 2019-12-03 14:47:28

1.6K0

发布于 2019-12-03 14:47:28

文章被收录于专栏：小石不识月_Leo 小石不识月_Leo小石不识月_Leo

每个工具都可以点击查看打开链接，因为微信内部不能查看外链，所以大家可以点击查看原文打开外链后进行查看

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
  }
};

目前大概就这些，希望小伙伴们在实践中有觉得不舒服的，可以给我反馈一下，我再改，规则还是要通过实践才之后具体适不适合大部分人，谢谢各位了~

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-08-14，如有侵权请联系 cloudcommunity@tencent.com 删除

eslint