使用 Eslint & standard 规范前端代码
前言
Eslint 是什么?
ESLint 的安装与配置
vue add @vue/eslint
npm install eslint --save-dev // 安装并保存到项目开发依赖
./node_modules/.bin/eslint -- --init // 初始化命令
"lint": "vue-cli-service lint" //基于vue-cli3
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" // 非vue-cli3
编码规范 Standard 的安装与使用
在 vue 中的使用方式:
在 vue 中通常需要和 ESLint 一起使用,上面讲到 ESLint 时候有注意到么,ESLint 初始化指令中有一个选择开源编码规范的指令,系统默认是有 standard 的选项的,直接选择就可以了。
常见问题
"files.associations": {
"*.vue": "vue"
},
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},"html","vue"
]
总结
本文介绍了用于前端编码规范、代码质量管理的几个开源方案,搭建了基于 vue 的 ESLint + standard 方案,及对实际使用当中可能遇到的问题,进行了记录。
参考链接
使用 Eslint & standard 规范前端代码的更多相关文章
- 规范的web前端代码
web前端的代码规范主要针对的是HTML,CSS和javaScript代码. 前端代码规范在不同场合会有差异,但是规范的前端代码应该具有以下特征: 1.符合标准 所谓的标准是指W3C指定的web标准, ...
- eslint+prettier+husky+lint-staged 统一前端代码规范
eslint+prettier+husky+lint-staged 统一前端代码规范 遵循编码规范和使用语法检测,可以很好的提高代码的可读性,可维护性,并有效的减少一些编码错误. 1.终极目标 团队中 ...
- vscode保存代码,自动按照eslint规范格式化代码设置
# vscode保存代码,自动按照eslint规范格式化代码设置 编辑器代码风格一致,是前端代码规范的一部分.同一个项目,或者同一个小组,保持代码风格一致很必要.就拿vue项目来说,之前做的几个项目, ...
- 使用ESLint+Prettier来统一前端代码风格
Prettier 简单使用 ESLint 与 Prettier配合使用 首先肯定是需要安装 prettier ,并且你的项目中已经使用了 ESLint ,有 eslintrc.js 配置文件. npm ...
- web前端代码规范 - HTML代码规范
Bootstrap HTML编码规范 本文转载自w3cschool. 由于bootstrap得到了世界的认可,因此,此规范用于规范html代码有一定的说服力. 交流qq群:164858883.欢迎各位 ...
- Web 前端代码规范
Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前 ...
- 按照eslint 规范写代码 [eslint] 'flag' is assigned to itself. (no-self-assign)
按照eslint 规范写代码 [eslint] 'flag' is assigned to itself. (no-self-assign)
- 我和我的广告前端代码(四):后台系统中,初尝vue、vue-cli
有一段都在重构之前文章<我和我的广告前端代码(三):一次重来的机会,必要的技术选型>中提到的广告前台展示项目,原有的基于页面的请求,改成了单广告位请求在这个过程中经历了好几次架构变更以及项 ...
- react 使用 eslint 的三种代码检查方案总结,多了解点--让代码更完美....
1.介绍 ESLint 是一个可扩展,每条规则独立,被设计为完全可配置的lint工具. 可以用来检测代码,避免低级错误 可以用来规范代码的开发风格,统一代码习惯. 2.为什么使用 ESLint ? 统 ...
随机推荐
- RabbitMQ的各个参数
简介 原文:https://blog.csdn.net/vbirdbest/article/details/78670550 本节主要讨论队列声明的各个参数 queueDeclare(String q ...
- springboot中oracle的依赖添加失败的解决
由于Oracle授权问题,Maven3不提供oracle JDBC driver 步骤一:在pom中添加如下: <!--Oracle 驱动 --> <dependency> ...
- com.sun.jersey.api.client.ClientHandlerException: java.net.ConnectException: Connection refused: connect
com.sun.jersey.api.client.ClientHandlerException: java.net.ConnectException: Connection refused: con ...
- Vuex模块化
上图是vuex的结构图vuex即 store, 包含State,Action,Mutations, 每一个vue项目都需要使用vuex做组件之间的数据共享 使用场景: 数据最终存放在store的Sta ...
- python 29 Socket - 套接字
目录 Socket - 套接字 Socket - 套接字 应用层与TCP/IP协议族通信层(或传输层)之间的抽象层,是一组接口()接收数据:当接口接收数据之后,交由操作系统: 如果数据与操作系统直接交 ...
- java日志框架笔记-log4j-springboot整合
# 日志框架slf4j log4j logback之间的关系 简答的讲就是slf4j是一系列的日志接口,而log4j logback是具体实现了的日志框架. ```java SLF4J获得logger ...
- 解决org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.xyfer.dao.UserDao.findById
在使用Spring整合MyBatis的时候遇到控制台报错:org.apache.ibatis.binding.BindingException: Invalid bound statement (no ...
- 一行js代码实现时间戳转时间格式
javascript时间戳转换,支持自定义格式,可以显示年,月,周,日,时,分,秒多种形式的日期和时间. 推荐一个JavaScript常用函数库 jutils jutils - JavaScript常 ...
- 2018宁夏邀请赛I题 bubble sort(思维题
https://vjudge.net/problem/Gym-102222I 居然补到个防ak,刚开始不知道啥是循环左移右移(只能移一次),不好想.. 题意:以冒泡排序为背景 给你n,k 问在1~n的 ...
- hihocoder 1523 数组重排2+思维
参考:http://blog.csdn.net/howardemily/article/details/74991367 题意:每次可以移动数组中的一个数到数组的最左边,问最少操作数,使得数列升序: ...