Vue项目中ESlint规范示例代码


Posted in Javascript onJuly 04, 2019

前言

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

示例代码

module.exports = {
 root: true,
 parserOptions: {
 parser: 'babel-eslint',
 sourceType: 'module'
 },
 env: {
 browser: true,
 node: true,
 es6: true,
 },
 extends: ['plugin:vue/essential', 'eslint:recommended'],
 rules: {
 // 等级分为三级: 0-不显示;1-显示警告warning; 2-显示错误error

 ////////////////////
 ///// vue.规范 /////
 ///////////////////
 "vue/max-attributes-per-line": [1, {    //多个特性的元素应该分多行撰写,每个特性一行
  "singleline": 10,
  "multiline": {
  "max": 1,
  "allowFirstLine": false
  }
 }],
 "vue/singleline-html-element-content-newline": 0, // 在单行元素的内容前后需要换行符
 "vue/multiline-html-element-content-newline": 0, // 在多行元素的内容之前和之后需要换行符
 "vue/name-property-casing": [1, "PascalCase"], // JS/JSX中的组件名应该始终是帕斯卡命名法
 "vue/no-v-html": 0,
 "vue/prop-name-casing": [1, "camelCase"],   // 在声明prop的时候,其命名应该始终使用驼峰命名
 "vue/require-v-for-key": 1,      // 给v-for设置键值,与key结合使用,可以高效的更新虚拟DOM
 "vue/no-use-v-if-with-v-for": [2, {
  "allowUsingIterationVar": false
 }],            // 不要把 v-if 和 v-for 用在同一个元素上——因为v-for 比 v-if 具有更高的优先级
 "vue/order-in-components": [0, {     // 组件/实例的选项的顺序
  "order": [
  "el",
  "name",
  "parent",
  "functional",
  ["delimiters", "comments"],
  ["components", "directives", "filters"],
  "extends",
  "mixins",
  "inheritAttrs",
  "model",
  ["props", "propsData"],
  "data",
  "computed",
  "watch",
  "LIFECYCLE_HOOKS",
  "methods",
  ["template", "render"],
  "renderError"
  ]
 }],

 ////////////////////
 ///// js.规范 /////
 ///////////////////
 'accessor-pairs': 2,    // 在对象中强制使用getter/setter
 'arrow-spacing': [2, {   // 在箭头函数之前/之后需要空格
  'before': true,
  'after': true
 }],
 'block-spacing': [2, 'always'], // 在打开块之后和关闭块之前,禁止或强制执行块内部的空格
 'brace-style': [1, '1tbs', {  // 需要大括号样式
  'allowSingleLine': true
 }],
 'camelcase': [0, {    // 需要驼峰命名
  'properties': 'always'
 }],
 'comma-dangle': [2, 'never'],  // 要求或禁止使用尾随逗号;最后一个属性是不需要逗号
 'comma-spacing': [2, {   // 强制逗号旁边的间距: 左右一个空格
  'before': false,
  'after': true
 }],
 'comma-style': [2, 'last'],  // 逗号风格
 'constructor-super': 2,   // 构建方法中使用super方法
 'curly': [2, 'multi-line'],  
 'dot-location': [1, 'property'], // 在dot之前和之后强制换行
 'eol-last': 2,     // 在文件末尾要求或禁止换行
 'eqeqeq': [0, "always", { "null": "ignore" }], // 是否使用全等 
 'generator-star-spacing': [2, { // 在生成器函数中强制执行*周围的间距
  'before': true,
  'after': true
 }],
 'handle-callback-err': [1, '^(err|error)$'], // 强制执行回调错误处理
 'indent': [2, 2, {     // 强制执行一致的缩进
  'SwitchCase': 1
 }],
 'jsx-quotes': [2, 'prefer-single'], // 强制在JSX文件中一致使用单引号
 'key-spacing': [2, {    // 在对象属性中强制键和值之间的一致间距
  'beforeColon': false,
  'afterColon': true
 }],
 'keyword-spacing': [2, {   // 关键字前后强制执行一致的间距
  'before': true,
  'after': true
 }],
 'new-cap': [2, {     // 要求构造函数名称以大写字母开头
  'newIsCap': true,
  'capIsNew': false
 }],
 'new-parens': 2,     // 调用不带参数的函数时需要括号
 'no-array-constructor': 2,   // 禁止阵列构建器
 'no-caller': 2,      // 禁止使用来电者/被叫者
 'no-console': 'off',    // 不允许使用控制台
 'no-class-assign': 2,    // 禁止修改类声明的变量
 'no-cond-assign': 2,    // 在条件语句中禁止赋值运算符
 'no-const-assign': 2,    // 禁止修改使用const声明的变量
 'no-control-regex': 0,    // 禁止正则表达式中的控制字符
 'no-delete-var': 2,     // 禁止删除变量
 'no-dupe-args': 2,     // 在函数定义中禁止重复参数 
 'no-dupe-class-members': 2,   // 禁止在类成员中重复名称
 'no-dupe-keys': 2,     // 禁止对象重复声明属性
 'no-duplicate-case': 2,    // 规则禁止重复案例标签
 'no-empty-character-class': 2,  // 禁止在正则表达式中使用空字符类
 'no-empty-pattern': 2,    // 不允许空的解构模式
 'no-eval': 2,      // 禁止使用eval()
 'no-ex-assign': 2,     // 禁止在catch子句中重新分配异常
 'no-extend-native': 2,    // 禁止扩展原生对象
 'no-extra-bind': 2,     // 禁止不必要的功能绑定
 'no-extra-boolean-cast': 2,   // 禁止不必要的布尔类型转换
 'no-extra-parens': [2, 'functions'], // 禁止不必要的括号
 'no-fallthrough': 2,     // 禁止太多陈述描述
 'no-floating-decimal': 2,   // 禁止浮动小数
 'no-func-assign': 2,     // 禁止重新分配函数声明 
 'no-implied-eval': 2,    
 'no-inner-declarations': [2, 'functions'], // 禁止嵌套块中的变量或函数声明
 'no-invalid-regexp': 2,    // 禁止在RegExp中使用无效的正则表达式字符串
 'no-irregular-whitespace': 2,  // 不允许不规则的空白
 'no-iterator': 2,     // 禁止迭代器
 'no-label-var': 2,     // 禁止变量名称的标签
 'no-labels': [2, {     
  'allowLoop': false,
  'allowSwitch': false
 }],
 'no-lone-blocks': 2,     // 禁止不必要的嵌套块
 'no-mixed-spaces-and-tabs': 2,  // 禁止使用混合空格和制表符进行缩进
 'no-multi-spaces': 2,    // 禁止多个空格
 'no-multi-str': 2,     // 禁止多行字符串
 'no-multiple-empty-lines': [2, {  // 禁止多个空行
  'max': 1
 }],
 'no-native-reassign': 2,    
 'no-negated-in-lhs': 2,
 'no-new-object': 2,
 'no-new-require': 2,
 'no-new-symbol': 2,
 'no-new-wrappers': 2,
 'no-obj-calls': 2,
 'no-octal': 2,
 'no-octal-escape': 2,
 'no-path-concat': 2,
 'no-proto': 2,
 'no-redeclare': 2,
 'no-regex-spaces': 2,
 'no-return-assign': [2, 'except-parens'],
 'no-self-assign': 2,
 'no-self-compare': 2,
 'no-sequences': 2,
 'no-shadow-restricted-names': 2,
 'no-spaced-func': 2,
 'no-sparse-arrays': 2,
 'no-this-before-super': 2,
 'no-throw-literal': 2,
 'no-trailing-spaces': 2,
 'no-undef': 0,
 'no-undef-init': 2,
 'no-unexpected-multiline': 2,
 'no-unmodified-loop-condition': 2, // 禁止未修改的循环条件
 'no-unneeded-ternary': [2, {   // 当存在更简单的替代方案时,不允许三元运算符
  'defaultAssignment': false
 }],
 'no-unreachable': 2,     // 返回,抛出,继续和中断语句后禁止无法访问的代码
 'no-unsafe-finally': 2,    // 禁止finally块中的控制流语句
 'no-unused-vars': [1, {    // 禁止使用未声明的变量
  'vars': 'all',
  'args': 'none'
 }],
 'no-useless-call': 2,     // 禁止不必要的call()和apply()方法
 'no-useless-computed-key': 2,   // 禁止在对象上使用不必要的计算属性键
 'no-useless-constructor': 2,   // 禁止不必要的构造方法
 'no-useless-escape': 0,    // 禁止不必要的转义用法
 'no-whitespace-before-property': 2, // 在属性之前禁止空格
 'no-with': 2,
 'one-var': [2, {
  'initialized': 'never'
 }],
 'operator-linebreak': [2, 'after', { // 为维护强制执行一致的换行方式
  'overrides': {
  '?': 'before',
  ':': 'before'
  }
 }],
 'padded-blocks': [2, 'never'],   // 在块内要求或禁止填充
 'quotes': [2, 'single', {
  'avoidEscape': true,
  'allowTemplateLiterals': true
 }],
 'semi': [2, 'never'],
 'semi-spacing': [2, {
  'before': false,
  'after': true
 }],
 'space-before-blocks': [2, 'always'], // 不要存在多余的块空间
 'space-before-function-paren': [2, 'never'],
 'space-in-parens': [2, 'never'],
 'space-infix-ops': 2,
 'space-unary-ops': [2, {
  'words': true,
  'nonwords': false
 }],
 'spaced-comment': [2, 'always', {
  'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
 }],
 'template-curly-spacing': [2, 'never'],
 'use-isnan': 2,
 'valid-typeof': 2,
 'wrap-iife': [2, 'any'],
 'yield-star-spacing': [2, 'both'],
 'yoda': [2, 'never'],
 'prefer-const': 1,
 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
 'object-curly-spacing': [2, 'always', {
  objectsInObjects: false
 }],
 'array-bracket-spacing': [2, 'never']
 }
}

总结

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

Javascript 相关文章推荐
在Javascript中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
js substr、substring和slice使用说明小记
Sep 15 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
详解jQuery Mobile自定义标签
Jan 06 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
javascript弹出带文字信息的提示框效果
Jul 19 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
你或许不知道的一些npm实用技巧
Jul 04 #Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 #Javascript
angular6开发steps步骤条组件
Jul 04 #Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 #Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 #Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 #Javascript
Vue.js递归组件实现组织架构树和选人功能案例分析
Jul 03 #Javascript
You might like
繁体中文转换为简体中文的PHP函数
2006/10/09 PHP
Php Image Resize图片大小调整的函数代码
2011/01/17 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
PHP实现阳历到农历转换的类实例
2015/03/07 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
禁止F5等快捷键的JS代码
2007/03/06 Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
2011/10/31 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
2017/09/27 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
NodeJS如何实现同步的方法示例
2018/08/24 NodeJs
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
vue 根据选择条件显示指定参数的例子
2019/11/09 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
python3+PyQt5实现文档打印功能
2018/04/24 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
使用python爬取抖音视频列表信息
2019/07/15 Python
python字典的常用方法总结
2019/07/31 Python
python读取tif图片时保留其16bit的编码格式实例
2020/01/13 Python
Python使用Pandas库常见操作详解
2020/01/16 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
施工人员岗位职责
2013/12/12 职场文书
大学生入党思想汇报
2014/01/01 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
暂住证证明
2015/06/19 职场文书
房屋质量投诉书
2015/07/02 职场文书
MySQL 常见存储引擎的优劣
2021/06/02 MySQL
关于EntityWrapper的in用法
2022/03/22 Java/Android
Win11快速关闭所有广告推荐
2022/04/19 数码科技