使用 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 ? 统 ...
随机推荐
- python相关,各种命令集合
PS: cmd必须管理员身份运行 python版本 2.7 可能会出现编码问题:在 Lib/site-packages 新建文件 sitecustomize.py import sys sys.s ...
- 求平方根算法 Heron’s algorithm
求平方根问题 概述:本文介绍一个古老但是高效的求平方根的算法及其python实现,分析它为什么可以快速求解,并说明它为何就是牛顿迭代法的特例. 问题:求一个正实数的平方根. 给定正实数 \(m\),如 ...
- Django之ORM-model模型关系
模型类关系 1)一对多关系例:图书类-英雄类 models.ForeignKey() 定义在多的类中. 2)多对多关系例:新闻类-新闻类型类 体育新闻 国际新闻models.ManyToManyFie ...
- PySpark SQL 相关知识介绍
title: PySpark SQL 相关知识介绍 summary: 关键词:大数据 Hadoop Hive Pig Kafka Spark PySpark SQL 集群管理器 PostgreSQL ...
- 马蜂窝视频编辑框架设计及在 iOS 端的业务实践
(马蜂窝技术公众号原创内容,ID: mfwtech) 熟悉马蜂窝的朋友一定知道,点击马蜂窝 App 首页的发布按钮,会发现发布的内容已经被简化成「图文」或者「视频」. 长期以来,游记.问答.攻略等图文 ...
- CentOS -- RocketMQ HA & Monitoring
RocketMQ Architecture NameServer Cluster Name Servers provide lightweight service discovery and rout ...
- Javaweb Cookie机制
Javaweb Cookie机制 一.前言 HTTP协议是一种无状态的协议,WEB服务器本身不能识别出哪些请求是同一个浏览器发出的 ,浏览器的每一次请求都是完全孤立的,即使 HTTP1.1 支持持续连 ...
- Kubernetes 入门必备云原生发展简史
作者|张磊 阿里云容器平台高级技术专家,CNCF 官方大使 "未来的软件一定是生长于云上的"这是云原生理念的最核心假设.而所谓"云原生",实际上就是在定义一条能 ...
- 洛谷 P2341 【受欢迎的牛】
题库:洛谷 题号:2341 题目:受欢迎的牛 link:https://www.luogu.org/problemnew/show/P2341 思路:因为奶牛的爱慕关系具有传递性,所以每个环(强连通分 ...
- Photoshop软件破解补丁安装方法
参考: http://jingyan.baidu.com/article/454316ab4b3266f7a6c03a7d.html 1.安装好photoshop之后,解压32位64位破解补丁.zip ...