Visual Studio Code 使用 ESLint 增强代码风格检查 - gyzhao - 博客园
前言
在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范。很多语言都提供了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 增强代码风格检查 - gyzhao - 博客园相关推荐
- 博客园页面定制html代码,你要的博客园主题都有!!!
基于最近很多小伙伴加我微信想要我的博客园主题,那我就把博客园主题整理一下,送给喜欢的小伙伴,园友们喜欢可以收藏,关注,博客园主题仅供参考,博主顺便再多说一句,虽然我可以分享给你们,但是我更愿意你们加我 ...
- 在Visual Studio Code里编写ABAP代码
今天在公司在线安装SAPGUI,一上午的时间都没把安装包下载完,有点怀念07年刚入坑ABAP时那会儿身材苗条的SAPGUI. 最近Visual Studio Code里和ABAP相关的扩展越来越多了, ...
- 使用Visual Studio Code配合TypeScript增强SAP UI5开发的语法检查
但凡从ABAP编程语言转到JavaScript这门弱类型编程语言进行SAP ui5开发的顾问们,因为缺乏对书写代码的静态检查,往往很不习惯. 其实我们可以使用Visual Studio Code加上t ...
- 如何在Visual Studio Code中编译C ++代码
PS: This was published on my Blog here. PS:这已发布在我的Blog 此处 . C++ is a statically-typed, free-form, (u ...
- java代码如何与界面联系在一起_如何在Visual Studio Code 中编写Java代码
本文将展示如何在Visual Studio Code中用Java编写和运行一个简单的Hello World程序. 首先您必须在本地开发环境中安装Java SE开发工具包(JDK) Visual Stu ...
- 在 Visual Studio Code 中添加自定义的代码片段
无论是那个编辑器,如果能够添加一些自定义代码片段,能够大大提升代码的输入效率. 本文介绍如何在 Visual Studio Code 中添加自定义代码片段. 本文内容 Visual Studio Co ...
- VSCODE(Visual Studio Code)编写C51代码,环境配置,实现自动补全,C51关键字处理方法
vscode: ctrl + shift + p,输入>edit configurations 选择后面是JSON的项运行,生成c_cpp_properties.json配置文件 defines ...
- Linux操作系统Ubuntu 22.04配置Visual Studio Code与C++代码开发环境的方法
本文介绍在Linux Ubuntu操作系统下,配置Visual Studio Code软件与C++ 代码开发环境的方法. 在文章虚拟机VMware Workstation Pro中配置Linu ...
- 带你掌握Visual Studio Code的格式化程序
摘要:Visual Studio Code 中的所有语言都可以使用其中一种自动格式化程序进行格式化,并且 Python 扩展还支持 linter. 本文分享自华为云社区<Visual Studi ...
最新文章
- java能应聘哪些职位_应聘java专员职位的面试题
- 图解CSS的padding,margin,border属性
- python字符串功能_python字符串内置功能
- ASP.NET MVC 5 学习教程:Details 和 Delete 方法详解
- julia自然常数_Julia中的Sys.KERNEL常数
- SequoiaDB 系列源码分析调整
- python虚函数_virtual(虚函数) vtbl(虚函数表)与vptr(虚函数表指针)
- 虚拟机不能上网以及无法ping通百度的解决方案
- 图文配置Silverlight3.0开发环境(转载)
- java 前后端分离
- 3DsMax导出插件编写(二)——常规SDK方法进行信息获取和保存文件
- truetype字体怎么转换成普通字体_【转】TrueType(二)字体格式解析
- 点击edittext 区域外隐藏输入法和点击edittext 显示输入法
- 真实力好口碑!Fortinet又双叒叕获评Gartner“客户之选”荣誉称号
- 2018大数据培训学习路线图(详细完整版)
- cerr和cout的使用
- 创业时全力以赴和留有后路的结果相同吗?
- 82岁高龄的高德纳仍在写《计算机程序设计艺术》,那是他未完成的人生目标...
- 计算机网络配置RIP路由协议,动态路由协议RIP配置,带你一分钟学会
- 爬取微信公众号方法总结