当前位置：Gxlcms > JavaScript > Vue项目中ESlint规范示例代码

Vue项目中ESlint规范示例代码

时间：2021-07-01 10:21:17 帮助过：9人阅读

前言

eslint是一种代码风格管理的工具，可以制定一些代码编写规范，在vue项目中经常用到，本文就给大家分享了开发项目中使用的eslint校验规范，供参考：

示例代码

  1. module.exports = {
  2.  root: true,
  3.  parserOptions: {
  4.  parser: 'babel-eslint',
  5.  sourceType: 'module'
  6.  },
  7.  env: {
  8.  browser: true,
  9.  node: true,
  10.  es6: true,
  11.  },
  12.  extends: ['plugin:vue/essential', 'eslint:recommended'],
  13.  rules: {
  14.  // 等级分为三级： 0-不显示；1-显示警告warning; 2-显示错误error
  15.  ////////////////////
  16.  ///// vue.规范 /////
  17.  ///////////////////
  18.  "vue/max-attributes-per-line": [1, {    //多个特性的元素应该分多行撰写，每个特性一行
  19.   "singleline": 10,
  20.   "multiline": {
  21.   "max": 1,
  22.   "allowFirstLine": false
  23.   }
  24.  }],
  25.  "vue/singleline-html-element-content-newline": 0, // 在单行元素的内容前后需要换行符
  26.  "vue/multiline-html-element-content-newline": 0, // 在多行元素的内容之前和之后需要换行符
  27.  "vue/name-property-casing": [1, "PascalCase"], // JS/JSX中的组件名应该始终是帕斯卡命名法
  28.  "vue/no-v-html": 0,
  29.  "vue/prop-name-casing": [1, "camelCase"],   // 在声明prop的时候，其命名应该始终使用驼峰命名
  30.  "vue/require-v-for-key": 1,      // 给v-for设置键值，与key结合使用，可以高效的更新虚拟DOM
  31.  "vue/no-use-v-if-with-v-for": [2, {
  32.   "allowUsingIterationVar": false
  33.  }],            // 不要把 v-if 和 v-for 用在同一个元素上——因为v-for 比 v-if 具有更高的优先级
  34.  "vue/order-in-components": [0, {     // 组件/实例的选项的顺序
  35.   "order": [
  36.   "el",
  37.   "name",
  38.   "parent",
  39.   "functional",
  40.   ["delimiters", "comments"],
  41.   ["components", "directives", "filters"],
  42.   "extends",
  43.   "mixins",
  44.   "inheritAttrs",
  45.   "model",
  46.   ["props", "propsData"],
  47.   "data",
  48.   "computed",
  49.   "watch",
  50.   "LIFECYCLE_HOOKS",
  51.   "methods",
  52.   ["template", "render"],
  53.   "renderError"
  54.   ]
  55.  }],
  56.  ////////////////////
  57.  ///// js.规范 /////
  58.  ///////////////////
  59.  'accessor-pairs': 2,    // 在对象中强制使用getter/setter
  60.  'arrow-spacing': [2, {   // 在箭头函数之前/之后需要空格
  61.   'before': true,
  62.   'after': true
  63.  }],
  64.  'block-spacing': [2, 'always'], // 在打开块之后和关闭块之前，禁止或强制执行块内部的空格
  65.  'brace-style': [1, '1tbs', {  // 需要大括号样式
  66.   'allowSingleLine': true
  67.  }],
  68.  'camelcase': [0, {    // 需要驼峰命名
  69.   'properties': 'always'
  70.  }],
  71.  'comma-dangle': [2, 'never'],  // 要求或禁止使用尾随逗号；最后一个属性是不需要逗号
  72.  'comma-spacing': [2, {   // 强制逗号旁边的间距： 左右一个空格
  73.   'before': false,
  74.   'after': true
  75.  }],
  76.  'comma-style': [2, 'last'],  // 逗号风格
  77.  'constructor-super': 2,   // 构建方法中使用super方法
  78.  'curly': [2, 'multi-line'],  
  79.  'dot-location': [1, 'property'], // 在dot之前和之后强制换行
  80.  'eol-last': 2,     // 在文件末尾要求或禁止换行
  81.  'eqeqeq': [0, "always", { "null": "ignore" }], // 是否使用全等 
  82.  'generator-star-spacing': [2, { // 在生成器函数中强制执行*周围的间距
  83.   'before': true,
  84.   'after': true
  85.  }],
  86.  'handle-callback-err': [1, '^(err|error)$'], // 强制执行回调错误处理
  87.  'indent': [2, 2, {     // 强制执行一致的缩进
  88.   'SwitchCase': 1
  89.  }],
  90.  'jsx-quotes': [2, 'prefer-single'], // 强制在JSX文件中一致使用单引号
  91.  'key-spacing': [2, {    // 在对象属性中强制键和值之间的一致间距
  92.   'beforeColon': false,
  93.   'afterColon': true
  94.  }],
  95.  'keyword-spacing': [2, {   // 关键字前后强制执行一致的间距
  96.   'before': true,
  97.   'after': true
  98.  }],
  99.  'new-cap': [2, {     // 要求构造函数名称以大写字母开头
  100.   'newIsCap': true,
  101.   'capIsNew': false
  102.  }],
  103.  'new-parens': 2,     // 调用不带参数的函数时需要括号
  104.  'no-array-constructor': 2,   // 禁止阵列构建器
  105.  'no-caller': 2,      // 禁止使用来电者/被叫者
  106.  'no-console': 'off',    // 不允许使用控制台
  107.  'no-class-assign': 2,    // 禁止修改类声明的变量
  108.  'no-cond-assign': 2,    // 在条件语句中禁止赋值运算符
  109.  'no-const-assign': 2,    // 禁止修改使用const声明的变量
  110.  'no-control-regex': 0,    // 禁止正则表达式中的控制字符
  111.  'no-delete-var': 2,     // 禁止删除变量
  112.  'no-dupe-args': 2,     // 在函数定义中禁止重复参数 
  113.  'no-dupe-class-members': 2,   // 禁止在类成员中重复名称
  114.  'no-dupe-keys': 2,     // 禁止对象重复声明属性
  115.  'no-duplicate-case': 2,    // 规则禁止重复案例标签
  116.  'no-empty-character-class': 2,  // 禁止在正则表达式中使用空字符类
  117.  'no-empty-pattern': 2,    // 不允许空的解构模式
  118.  'no-eval': 2,      // 禁止使用eval（）
  119.  'no-ex-assign': 2,     // 禁止在catch子句中重新分配异常
  120.  'no-extend-native': 2,    // 禁止扩展原生对象
  121.  'no-extra-bind': 2,     // 禁止不必要的功能绑定
  122.  'no-extra-boolean-cast': 2,   // 禁止不必要的布尔类型转换
  123.  'no-extra-parens': [2, 'functions'], // 禁止不必要的括号
  124.  'no-fallthrough': 2,     // 禁止太多陈述描述
  125.  'no-floating-decimal': 2,   // 禁止浮动小数
  126.  'no-func-assign': 2,     // 禁止重新分配函数声明 
  127.  'no-implied-eval': 2,    
  128.  'no-inner-declarations': [2, 'functions'], // 禁止嵌套块中的变量或函数声明
  129.  'no-invalid-regexp': 2,    // 禁止在RegExp中使用无效的正则表达式字符串
  130.  'no-irregular-whitespace': 2,  // 不允许不规则的空白
  131.  'no-iterator': 2,     // 禁止迭代器
  132.  'no-label-var': 2,     // 禁止变量名称的标签
  133.  'no-labels': [2, {     
  134.   'allowLoop': false,
  135.   'allowSwitch': false
  136.  }],
  137.  'no-lone-blocks': 2,     // 禁止不必要的嵌套块
  138.  'no-mixed-spaces-and-tabs': 2,  // 禁止使用混合空格和制表符进行缩进
  139.  'no-multi-spaces': 2,    // 禁止多个空格
  140.  'no-multi-str': 2,     // 禁止多行字符串
  141.  'no-multiple-empty-lines': [2, {  // 禁止多个空行
  142.   'max': 1
  143.  }],
  144.  'no-native-reassign': 2,    
  145.  'no-negated-in-lhs': 2,
  146.  'no-new-object': 2,
  147.  'no-new-require': 2,
  148.  'no-new-symbol': 2,
  149.  'no-new-wrappers': 2,
  150.  'no-obj-calls': 2,
  151.  'no-octal': 2,
  152.  'no-octal-escape': 2,
  153.  'no-path-concat': 2,
  154.  'no-proto': 2,
  155.  'no-redeclare': 2,
  156.  'no-regex-spaces': 2,
  157.  'no-return-assign': [2, 'except-parens'],
  158.  'no-self-assign': 2,
  159.  'no-self-compare': 2,
  160.  'no-sequences': 2,
  161.  'no-shadow-restricted-names': 2,
  162.  'no-spaced-func': 2,
  163.  'no-sparse-arrays': 2,
  164.  'no-this-before-super': 2,
  165.  'no-throw-literal': 2,
  166.  'no-trailing-spaces': 2,
  167.  'no-undef': 0,
  168.  'no-undef-init': 2,
  169.  'no-unexpected-multiline': 2,
  170.  'no-unmodified-loop-condition': 2, // 禁止未修改的循环条件
  171.  'no-unneeded-ternary': [2, {   // 当存在更简单的替代方案时，不允许三元运算符
  172.   'defaultAssignment': false
  173.  }],
  174.  'no-unreachable': 2,     // 返回，抛出，继续和中断语句后禁止无法访问的代码
  175.  'no-unsafe-finally': 2,    // 禁止finally块中的控制流语句
  176.  'no-unused-vars': [1, {    // 禁止使用未声明的变量
  177.   'vars': 'all',
  178.   'args': 'none'
  179.  }],
  180.  'no-useless-call': 2,     // 禁止不必要的call()和apply()方法
  181.  'no-useless-computed-key': 2,   // 禁止在对象上使用不必要的计算属性键
  182.  'no-useless-constructor': 2,   // 禁止不必要的构造方法
  183.  'no-useless-escape': 0,    // 禁止不必要的转义用法
  184.  'no-whitespace-before-property': 2, // 在属性之前禁止空格
  185.  'no-with': 2,
  186.  'one-var': [2, {
  187.   'initialized': 'never'
  188.  }],
  189.  'operator-linebreak': [2, 'after', { // 为维护强制执行一致的换行方式
  190.   'overrides': {
  191.   '?': 'before',
  192.   ':': 'before'
  193.   }
  194.  }],
  195.  'padded-blocks': [2, 'never'],   // 在块内要求或禁止填充
  196.  'quotes': [2, 'single', {
  197.   'avoidEscape': true,
  198.   'allowTemplateLiterals': true
  199.  }],
  200.  'semi': [2, 'never'],
  201.  'semi-spacing': [2, {
  202.   'before': false,
  203.   'after': true
  204.  }],
  205.  'space-before-blocks': [2, 'always'], // 不要存在多余的块空间
  206.  'space-before-function-paren': [2, 'never'],
  207.  'space-in-parens': [2, 'never'],
  208.  'space-infix-ops': 2,
  209.  'space-unary-ops': [2, {
  210.   'words': true,
  211.   'nonwords': false
  212.  }],
  213.  'spaced-comment': [2, 'always', {
  214.   'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
  215.  }],
  216.  'template-curly-spacing': [2, 'never'],
  217.  'use-isnan': 2,
  218.  'valid-typeof': 2,
  219.  'wrap-iife': [2, 'any'],
  220.  'yield-star-spacing': [2, 'both'],
  221.  'yoda': [2, 'never'],
  222.  'prefer-const': 1,
  223.  'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
  224.  'object-curly-spacing': [2, 'always', {
  225.   objectsInObjects: false
  226.  }],
  227.  'array-bracket-spacing': [2, 'never']
  228.  }
  229. }

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！