写在开始前：如有不准确的地方希望大家提出，文章可以改知识不能错。

创建一个项目

这里已node项目为例

npm init

根据提示填写相关信息

安装eslint

npm install eslint --save

也可以全局安装

npm install eslint -g

初始化 eslint文件

eslint --init

执行命令后会出现如下提示

image.png

Answer Questions about your style:根据提示选择相应的规则设置
Use a popular style guide:选择一个已经写好的规则配置
Inspect your JavaScript file(s):根据源码文件内容生成规则配置

懒得去写可以选择第二项。
eslint 配置相关见官网，https://eslint.org/
命令执行成功后会在项目根目录下生成一个.eslintrc.js文件，使用linux ,mac系统同学注意设置隐藏文件显示。检查规则调整需要在.eslintrc.js文件中修改相应的配置项目。

VSCode相关配置

安装插件

VSCode 插件安装器中搜索‘eslint’并安装

image.png

安装成功后重启VSCode

配置VSCode

打开VSCode配置页面

image.png

添加如下配置

//为了符合eslint的两个空格间隔原则"editor.tabSize": 2,//使用eslint规则重新格式化代码"eslint.autoFixOnSave": true,//关闭自动文件自动存储"files.autoSave": "off","eslint.validate": ["javascript","javascriptreact","html","jsx","vue",{"language": "html","autoFix": true}],

以下为整个配置文件截图

image.png

此时 VSCode 与 eslint 相关配置已经结束

测试

创建index.js文件
并写入内容

function hello () {console.log('Hello Eslint');
}
hello()

VSCode会自动进行代码质量检查如下图

image.png

通常情况下需要根据错误提示手动对代码进行相应的更改然后保存文件。因为在VSCode设置中配置了eslint.autoFixOnSave": true,此时直接保存文件VSCode会根据项目.eslintrc.js文件中的相关配置对代码进行重新格式化，但是自动格式化只能完成代码格式修改，对变量或方法定义单未使用这样的规则不会进行调整。

写在最后

VSCode 配合eslint 进行代码质量检查属于非强制性检查既不符合规则的代码在编译时不会出错只是Ide级的错误提示，如果想做强制质量检查可以在编译脚本中加入eslint相关配置。

作者：挑灯小鬼儿
链接：https://www.jianshu.com/p/76d0aac20715
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

VSCode配合eslint进行JavaScript质量检查相关推荐

vscode 新版eslint自动修复_vscode自动修复eslint规范的插件及配置
在开发大型项目中,经常都是需要多人合作的.相信大家一定都非常头疼于修改别人的代码的吧,而合理的使用eslint规范可以让我们在代码review时变得轻松,也可以让我们在修改小伙伴们的代码的时候会更加清 ...
关闭eslint检查2020_2020 vscode配置eslint保存后自动fix
2020 vscode配置eslint保存后自动fix 这篇文章发布于 2019/10/12,归类于计算机基础与开发工具标签: vscode 保存自动fix,vscode 保存执行fix,esli ...
vscode自动修复eslint规范的插件及配置
在开发大型项目中,经常都是需要多人合作的.相信大家一定都非常头疼于修改别人的代码的吧,而合理的使用eslint规范可以让我们在代码review时变得轻松,也可以让我们在修改小伙伴们的代码的时候会更加清 ...
VScode配置ESlint自动修复格式化
使用vscode安装 eslint + vuter + prettier自动格式化代码配置; 文件-首选项-设置-用户设置-拓展-ESlint-点击"在setting.json"中 ...
VScode配置eslint保存自动格式化，eslint格式化去掉分号和双引号。vscode自动保存去掉分号和双引号；““
本文是开启eslint检验和配置eslint格式化:如果想要关闭eslint,查看这篇关闭eslint方法: 1.必须安装的三个插件eslint, prettier-Code formatter ,v ...
vscode的eslint无效_vscode配置eslint自动保存功能不生效
今天给一个项目添加eslint, 按照网上的教程,配置完就是不生效,半天没解决, 后来终于解决了, 在此总结,把一些坑分享出去. 1. vscode 扩展中安装eslint 2. eslint 扩展要 ...
vscode 新版eslint自动修复_VSCODE 配置eslint规则和自动修复
全局安装eslint 打开终端,运行npm install eslint -g全局安装ESLint. vscode安装插件 vscode 扩展设置依次点击文件 > 首选项 > 设置 { ...
踩坑：VScode 集成 eslint 插件
本文以 Vue 官方脚手架 Vue-cli 为例: 1. 创建 Vue 项目注意:Vue-cli 默认给出了 eslint 配置,一路回车即可.最后在安装模块的时候,选择直接安装!我用淘宝镜像安装时 ...
vscode 使用eslint（保存自动格式化）
前提:在package.json中安装了eslint的依赖 1.在项目跟目录添加.eslintrc.js 文件 // https://cn.eslint.org/docs/rules/ // /** ...

VSCode配合eslint进行JavaScript质量检查

创建一个项目

安装eslint

初始化 eslint文件

VSCode相关配置

安装插件

配置VSCode

测试

写在最后

VSCode配合eslint进行JavaScript质量检查相关推荐

最新文章

热门文章