Visual Studio Code 使用 ESLint 增强代码风格检查
前言
在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范。很多语言都提供了Lint
工具来实现这样的功能,JavaScript也有类似的工具:ESLint
。除了可以集成到构建工具中(如:Gulp)在构建过程中检查代码风格以外;还可以通过将ESLint
和代码编辑器相结合以提供代码风格的实时校验。这里将介绍如何在Visual Studio Code
使用ESLint
来提供代码风格的实时校验。
安装 Visual Studio Code ESLint 插件
打开 Visual Studio Code ,首先使用快捷键 Ctrl
+ Shift
+ P
调出VsCode的控制台,然后输入下面的命令安装ESLint
插件:
ext install ESLint
使用 NPM 安装 ESLint
为了方便我们通过ESLint命令行工具
来帮助我们生成ESLint
相关的配置,我们需要进行全局安装:
npm install eslint -g
安装完成后我们使用命令行工具进入到需要引入ESLint
的项目的目录中,然后输入下面的命令进行ESLint
的初始化操作:
eslint --init
执行命令后,我们选择相应的代码风格,也可以自定义,在这里我使用standard
风格的规则,如下所示:
配置ESLint的项目中需要设置好该项目的
package.json
文件,如果没有的话可以使用npm init
来设置。
安装完成后我们可以看到除了ESLint命令行工具
为我们生成的ESLint
依赖包,还有一个特殊的.eslintrc.json
文件,该文件是ESLint
的配置文件,如下所示:
{
"extends": "standard",
"installedESLint": true,
"plugins": [
"standard"
]
}
配置文件中除了声明我们所使用的代码风格以外,我们还可以定制自己的规则,比如:声明全局变量或者规定字符串引号的风格,以及其他任何ESLint
支持的规则都是可以配置的,下面是一个简单的示例:
{
"extends": "standard",
"installedESLint": true,
"plugins": [
"standard"
],
"rules": {
//关闭额外的分号检查
//0:关闭,1:警告,2:异常
"semi": 0,
//字符串必须使用单引号
"quotes": [
"error",
"single"
]
}
}
更多配置相关可以参考官方文档:http://eslint.org/docs/user-guide/configuring
使用ESLint校验代码风格
安装完成后我们使用 Visual Studio Code 打开项目,可以看到ESLint
插件在运行了,不过给了我们一个错误提示:
这时候我们需要在当面目录下输入下面的命令安装相应的开发依赖包:
npm install eslint-plugin-promise --save-dev
下面我们来测试一些看ESLint是否配置成功了,如下所示,我们编写一段不符合我们设定代码风格的典型的IIFE
代码,可以看到ESLint
插件为我们提供了准确方便且实时的提示信息:
可以看到通过ESLint为我们提供的代码风格检查,可以帮助我们可以写出更规范,更优雅的Javascript代码了~
参考资料&进一步阅读
http://eslint.org/
http://eslint.org/docs/user-guide/configuring
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
https://csspod.com/getting-started-with-eslint/
原文: http://www.gyzhao.me/2016/05/12/VsCodeESLint/ 作者: gyzhao
Visual Studio Code 使用 ESLint 增强代码风格检查的更多相关文章
- 微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器
微软良心之作——Visual Studio Code 开源免费跨平台代码编辑器 在 Build 2015 大会上,微软除了发布了 Microsoft Edge 浏览器和新的 Windows 10 预览 ...
- Visual Studio Code - 调试 Node.js 代码
官方的文档写的太好了!大家还是看参考资料吧. 参考资料: Debugging in Visual Studio Code Debug Node.js Apps using Visual Studio ...
- Visual Studio Code 格式化ESlint 的方法
既然要格式化ESlint,就不得不先介绍一下什么是ESlint.后面再介绍格式化的方法 1.ESlint ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具 ...
- Visual Studio Code编写C/C++代码常见问题
我会把一些常见问题以及自己编写代码过程中遇到的问题以及解决方案放在这里,各位若是遇到的问题也可以在评论区留言. 一.头文件Error 不会影响编译运行,但会报Warm,如下图 解决方案是安装Inclu ...
- Visual Studio Code 使用Chrome Debug 代码
一.添加插件 Debugger for Chrome,点击安装,安装完成之后,启动 二.配置启动参数 1.按 F5,出现界面如图,选择 Chrome 2.然后会打开配置文件 launch.json 3 ...
- Visual Studio Code 之 运行java代码
1.安装扩展. 2.安装成功后,会在右键菜单中多出一个选项: 更改vscode“用户设置”文件:添加java.home(jdk目录)以及runcode显示在终端(解决中文乱码问题) code runn ...
- Visual Studio Code同时debug多种代码的方式
今天看了一下,猜应该是configurations里面多写一个就行,试了下,真的可以同时debug Python和Go代码. 可以打断点.单步执行Python和Go代码. launch.json 如下 ...
- Visual studio code离线安装插件
Visual studio code离线安装插件 公司研发区不能连接公网,使用Visual studio code(vsc)写Golang代码需要安装Go插件,下面介绍下,vsc离线安装插件的步骤.以 ...
- Visual Studio Code 安装美化合集
这是一个关于VSCode编辑器的各种配置. 你可以在这里找到VSCode 的各种操作,如果这里找不到,请移步官方文档C++ programming with Visual Studio Code以及各 ...
随机推荐
- java中string内存的相关知识点
(一):区别java内存中堆和栈: 1.栈:数据可以共享,存放基本数据类型和对象的引用,其中对象存放在堆中,对象的引用存放在栈中: 当在一段代码块定义一个变量时,就在栈中 为这个变量分配内存空间,当该 ...
- pycharm运行脚本为何不生成测试报告?
今日使用python+selenium编写自动化测试脚本并执行过程中,使用pycharm运行结果后发现脚本运行无报错,脚本中的操作也正常被执行,但就是没有生成测试报告. 为什么呢,为什么呢,生成测试报 ...
- 快速入门系列--TSQL-01基础概念
作为一名程序员,对于SQL的使用算是基础中的基础,虽然也写了很多年的SQL,但常常还是记不清一些常见的命令,故而通过一篇博文巩固相关的记忆,并把T-SQL本身的一些新特性再进行一次学习. 首先回顾基础 ...
- 【WP开发】认清“不透明度”与“可见性”的区别
这两种情况,许多朋友平时都没有注意到: 1.设置Opacity属性的值为0: 2.将Visibility属性设置为Collapsed. 不少人会简单地认为这两种情况是一样的,都是让UI元素看不见. 我 ...
- select语句for update---转载
作用: Select…For Update语句的语法与select语句相同,只是在select语句的后面加FOR UPDATE [NOWAIT]子句. 该语句用来锁定特定的行(如果有where子句,就 ...
- Linux驱动开发——__stringify
在Linux内核中有一个宏__stringify,在include/linux/stringify.h定义如下: #ifndef __LINUX_STRINGIFY_H #define __LINUX ...
- [Node.js] 使用node-forge保障Javascript应用的传输安全
原文地址:http://www.moye.me/2015/12/19/protect_jsapp_tsl_by_using_node-forge/ 引子 半年前的最后一次更新(惭愧 ),提到了对称与 ...
- AngularJS in Action读书笔记3——走近Services
试着想想这些问题:如果一个controller只关心自己所控制的view页面,那么对于整个application来说,你如何调用想要的function:如果controller从来都不会和其他cont ...
- 谈谈Android 6.0运行时权限理解
前言 谷歌在2015年8月份时候,发布了Android 6.0版本,代号叫做“棉花糖”(Marshmallow ),其中的很大的一部分变化,是在用户权限授权上,或许是感觉之前默认授权的不合理,现在6. ...
- Linux安装配置tomcat
1.首先配置好jdk 查看java版本:java -verson 1.官网下载jdk 2.tar -zxvf xxxx.tar.gz 解压 3.配置环境变量 <1># vi /etc/ ...