一、安装esLint

（一）打开项目代码，进入terminal

（二）安装esLint

1、安装esLint

npm install eslint --save-dev

2、设置一个esLint的配置文件

eslint --init

3、之后可以在项目中任何地方使用eslint检查代码

eslint ./static/config.js

这样配置完成后，项目代码中不规范的地方esLint会自动提示，如图所示：

二、webStorm集成esLint，使用代码检查及语法修复功能

此时eslint可以初步使用，接下来我们把esLint集成到WebStorm工具上：

（一）在setting中安装eslint插件

（二）在setting中配置esLint

完成上述配置后，在项目代码中或者项目工程目录中右键，就会多一个Fix Eslint Problems的选项。点击可以自动修复js文件，该选项本质上就是执行了eslint --fix filename.js。

三、处理低版本webStorm右键没有Fix Eslint Problems的问题

webstorm的版本过低，配置了eslint后，右键.vue文件却不会出现Fix Eslint Problems选项，如果我们希望自动修复.vue文件中的js代码，只能在命令行里操作，并且需要为eslint命令指定文件所在目录以及文件名，或者cd到文件所在目录执行，如eslint --fix ‘src/pages/home.vue’；每次要修复时，都要这样写，显然不能接受。
那么我们需要自定义代码修复工具：

（一）配置Webstorm的Tools

打开settings -> Tools -> External Tools，点击添加按钮，做下图的配置：

ProjectFileDir 指工程所在目录。
2.FilePathRelativeToProjectRoot 指文件相对于工程所在的路径。

配置完成后，右键点击 .js或者 .vue文件就会出现 External Tools -> eslint fix的选项，点击该选项，就完成了.vue文件的自动修复操作，同时在控制台会打印存在问题的代码位置及描述：

如何在webstorm使用eslint检查代码规范相关推荐

Webpack 2 视频教程 009 - 配置 ESLint 实现代码规范自动测试 (上)
原文发表于我的技术博客这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...
python 检查代码规范，类型标注
python提供了一些包可以用来format代码,检查代码规范,检查类型标注是否正确等. 1.black format代码,cd 到对应的目录,执行 black -l 120 . 2.flake8 检 ...
idea，配置checkstyle 【提高代码质量,检查代码规范的工具】Checkstyle，FindBugs，PMD，Jtest
idea,配置checkstyle [提高代码质量,检查代码规范的工具 ]Checkstyle,FindBugs,PMD,Jtest 2016年12月15日 14:19:02 common_util ...
WebStorm设置前端开发代码规范
Prettier 代码格式化添加依赖 yarn add prettier 配置 WebStorm 格式化文件在根目录下新建.prettierrc.json的文件,标识格式化规范文件内容如下 {& ...
Vue eslint 团队代码规范
原文:nice.lovejade.cn/zh/article/- Prettier 是一个有见识的代码格式化工具.它通过解析代码并使用自己的规则重新打印它,并考虑最大行长来强制执行一致的样式,并在必要 ...
python 检查代码规范_Python代码规范检测
一定要注重代码规范,按照平时的代码管理,可以将Python代码规范检测分为两种: 静态本地检测:可以借助静态检查工具,比如:Flake8,Pylint等,调研了一下,用Flake8的相对较多,功能满足 ...
idea 配置checkstyle【提高代码质量,检查代码规范的工具】
下面主要介绍IDEA,如何配置,使用checkstyle 1.CheckStyle插件安装和使用一,打开settings的plugins,点击查找CheckStyle-IDEA安装,如果查找不到,B ...
WebStorm配置eslint检查自动格式化(自动解决eslint问题\Vue3项目解决ESLint问题)
参考注意:需要修改一个地方才能ctrl + s保存,并且根据eslint的规则自动格式化(我一般都是按个空格,然后ctrl + s保存). 还可以设置:(未测试)
如何使用pmd检查代码规范
https://pmd.sourceforge.io/pmd-6.32.0/pmd_userdocs_tools_maven.html 官网介绍了这几种方式,由于我是用的idea maven开发.所以 ...

如何在webstorm使用eslint检查代码规范