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 使用 ESLint 增强代码风格检查 - gyzhao - 博客园
前言 在团队协作开发中,为了统一代码风格,避免一些低级错误,应该设有团队成员统一遵守的编码规范.很多语言都提供了Lint工具来实现这样的功能,JavaScript也有类似的工具:ESLint.除了可以 ...
- 在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 ...
- Visual Studio Code插件
文章目录 Visual Studio Code插件 1. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code 2. ESL ...
最新文章
- 第二章例题:DateAndTimeStatus
- python小知识_python-小知识点积累(持续更新)
- 超图桌面版GIS配准基本操作
- 快速谱峭度matlab,一种基于快速谱峭度分析的泵潜在空化故障检测方法与流程
- 全局变量-全局变量定义的位置及代码结构
- 看完这个你还不理解右值引用和移动构造 你就可以来咬我(下)
- 安卓mysql插入数据_Android批量插入数据到SQLite数据库的方法
- matlab自带四旋翼算例asbQuadcopter使用心得
- Android Studio(7)---从模板添加代码
- hfss仿真软件入门教程
- 番茄花园GhostXP sp3快速装机版2012.03
- 支付宝 错误代码 insufficient-isv-permissions 错误原因: ISV权限不足,建议在开发者中心检查签约是否已经生效
- ssh远程连接虚拟机
- word2013自动生成目录的时候,如何调整目录格式?
- termux搭建局域网web服务器
- 倍福--电子凸轮表绘制
- 淘宝直播的定义,淘宝直播小技巧介绍,以及淘宝有哪些推广渠道和展示位?
- 三位整数两位小数掩码_子网掩码转换32位整数
- android技术需求,支撑你各种安卓相机开发需求CameraView
- 商城项目介绍以及ES6的新语法