使用 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 ? 统 ...
随机推荐
- Linux use apktool problem包体变大GLIBC2.14等问题
Linux服务器在线打包遇到的问题 转载请标明出处: https://dujinyang.blog.csdn.net/article/details/80110942 本文出自:[奥特曼超人的博客] ...
- 【转】Python实现智能五子棋
前言 棋需要一步一步下,人生需要一步一步走.千里之行,始于足下,九层之台,起于累土. 用Python五子棋小游戏. 基本环境配置 版本:Python3 相关模块: 本文所做工作如下: (1) 五子棋界 ...
- rabbit - producer的confirm和consumer的ack模式
本篇和大家分享的是关于rabbit的生产和消费方的一些实用的操作:正如文章标题,主要内容如producer的confirm和consumer的ack,这两者使用的模式都是用来保证数据完整性,防止数据丢 ...
- 安装yarn集群
安装yarn集群 # mapreduce运行平台YARN mapreduce程序应该是在很多机器上并行启动,而且先执行map task,当众多的maptask都处理完自己的数据 后,还需要启动众多的r ...
- C#开发BIMFACE系列1 BIMFACE 简介
系列目录 [已更新最新开发文章,点击查看详细] BIMFACE 是什么 BIMFACE = 国内领先的BIM轻量化引擎 BIMFACE 是广联达公司旗下的一款具有完全自主知识产权的BIM轻量化 ...
- CodeForces 689 D Friends and Subsequences
Friends and Subsequences 题解: 如果左端点来说, 那么对于a[i]来说是向上的一条折线, b[i]来说是向下的一条折线, 那么如果这2个折线求交点个数的话, 我们可以二分去求 ...
- Gym 100851 题解
A: Adjustment Office 题意:在一个n*n的矩阵,每个格子的的价值为 (x+y), 现在有操作取一行的值,或者一列的值之后输出这个和, 并且把这些格子上的值归0. 题解:模拟, 分成 ...
- CF1005C Summarize to the Power of Two 暴力 map
Summarize to the Power of Two time limit per test 3 seconds memory limit per test 256 megabytes inpu ...
- 超实用!K8s 开发者必须知道的 6 个开源工具
文章来源:云原生实验室,点击查看原文. 导读:Kubernetes 作为云原生时代的"操作系统",熟悉和使用它是每名用户(User)的必备技能.如果你正在 Kubernetes 上 ...
- mybatis foreach批量处理
---恢复内容开始--- http://blog.csdn.net/jiesa/article/details/52185617 foreach属性 属性 描述 item 循环体中的具体对象.支持属性 ...