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

3,881 阅读2分钟

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

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

阅读完后两部曲

非常感谢各位花时间阅读完,衷心希望各位小伙伴可以花少量的时间帮忙做两件事:

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

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