vue-cli3项目配置项目配置eslint代码规范的完整步骤代码规范的完整步骤
主要给大家介绍了关于vue-cli3项目配置eslint代码规范的完整步骤，文中通过示例代码介绍的非常详细，对大家
的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言前言
最近接手了一个项目，由于之前为了快速开发，没有做代码检查。为了使得代码更加规范以及更易读，所以就要eslint上场
了。
安装依赖安装依赖
安装依赖有两种方法：
1. 在cmd中打上把相应的依赖加到devDependencies下，再npm install对应依赖。
2. 在package.json文件加上相应依赖：
"eslint-plugin-html": "^6.0.3",
"@vue/cli-plugin-eslint": "^3.3.0",
"@vue/eslint-config-standard": "^4.0.0",
"eslint": "5.0.0",
"eslint-friendly-formatter": "4.0.1",
"eslint-loader": "2.0.0",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-vue": "4.7.1",
eslint配置方法配置方法
eslint的规则有三个选项：
"off"或者0，不启用这个规则
"warn"或者1，出现问题会有警告
"error"或者2，出现问题会报错
在根目录创建.eslintrc.js，代码如下：
module.exports = {
// 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
root: true,
parserOptions: {
// 对Babel解析器的包装使其与 ESLint 兼容。
parser: 'babel-eslint',
// 代码是 ECMAScript 模块
sourceType: 'module'
},
env: {
// 预定义的全局变量，这里是浏览器环境
browser: true,
node: true,
es6: true,
},
// 扩展风格
extends: ['plugin:vue/recommended', 'eslint:recommended'],
// 规则的细节请到ESLint官方网站查看http://eslint.org/docs/rules/
rules: {
"vue/max-attributes-per-line": [2, {
"singleline": 10,
"multiline": {
"max": 1,
"allowFirstLine": false
}
}],
"vue/name-property-casing": ["error", "PascalCase"],
// 定义对象的set存取器属性时，强制定义get
'accessor-pairs': 2,
'arrow-spacing': [2, {
'before': true,
'after': true
}],
// 禁止或强制在单行代码块中使用空格
'block-spacing': [2, 'always'],
// 强制使用一致的缩进 第二个参数为 "tab" 时，会使用tab
'brace-style': [2, '1tbs', {
'allowSingleLine': true
}],
// 双峰驼命名格式
weixin_38551938
- 粉丝: 5
- 资源: 914
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论1