程序员经验分享-hwhale

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

2023-05-16

一、安装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，点击添加按钮，做下图的配置：

  1. ProjectFileDir 指工程所在目录。
  2. 2.FilePathRelativeToProjectRoot 指文件相对于工程所在的路径。
    在这里插入图片描述
    配置完成后，右键点击 .js或者 .vue文件就会出现 External Tools -> eslint fix的选项，点击该选项，就完成了.vue文件的自动修复操作，同时在控制台会打印存在问题的代码位置及描述：
    在这里插入图片描述
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

如何在webstorm使用eslint检查代码规范 的相关文章

随机推荐

  • Maven 使用slf4j 没有输出控制台

    Maven 使用slf4j 没有输出控制台并报如下错 xff1a log4j WARN No appenders could be found span class hljs keyword for span logger Redissen

  • 管道鸟cortex-M4（TM4C1294）

    看到满屏的贪吃蛇 xff0c 我也来开源一个Ti开发板 xff08 TM4C1294 xff09 的游戏 将简化版的管道鸟 xff0c 根据自己玩的经历 xff0c 在cortexm4开发板上重新撸了一边 xff0c 设计思路 xff1a

  • C#连接MYSQL数据库并进行查询

    之前用MFC开发结果界面太难看被pass了 要求用C 重新来开发 gt lt 不过终于摆脱VC6 0的蛋疼操作了Y 先来连接数据库 xff08 1 xff09 用c 连接MYSQL数据库需要用到mysql connector net xff

  • Jetson tx2刷机过程中的坑

    暑假各种事忙得差不多后 xff0c 终于有时间拿出早就申请到的tx2 xff0c 开始刷机教程 xff0c 这两天几乎踩边了所有的坑 第一个坑 xff0c 虚拟机 一般在安装VMware虚拟机时 xff0c 建议的安装空间20GB xff0

  • python词云实现

    python的一个蛮酷炫的功能是可以轻松地实现词云 github上有关于这个项目的开源代码 xff1a https github com amueller word cloud 注意跑例程时要删除里面的wordcloud文件夹 词云的功能有

  • ubuntu18切换为gnome桌面托盘图标消失

    在软件菜单中选择 优化 拓展 gt Ubuntu appindicators xff0c 打开此项即可 效果

  • Expression #1 of ORDER BY clause is not in SELECT list, references column 'ekbX1.t0.name' which is n

    报错信息 xff1a Expression 1 of ORDER BY clause is not in SELECT list references column 39 ekbX1 t0 name 39 which is not in S

  • Archlinux + kde桌面环境 安装

    1 首先余留磁盘空间 2 xff1a 官网下载ArchLinux镜像 3 xff1a rufus刻录 4 xff1a 打开电脑从u盘启动 5 xff1a 首先联网 如果用wifi终端输入下面命令 xff1a wifi menu 如果是用网线

  • 判断图的连通子图个数

    题目要求 给定一个具有n个顶点 m条边的无向图G 假设项点的编号为1 n 基于深度优先搜索算法 xff0c 编写程序 求无向图G连通子图的个数 输入格式 第一行两个整数n m 分别表示图G的顶点数和边的数量 下面m行的每 行有两个整数a和b

  • Java常用包有哪些

    Java lang 语言包 Java语言的基础类 xff0c 包括Object类 Thread类 String Math System Runtime Class Exception Process等 xff0c 是Java的核心类库 最重

  • QT 建立透明背景图像QPixmap

    列将下面背景透明图片1转变成图片2 图1 图2 span class hljs preprocessor include 34 mainwindow h 34 span span class hljs preprocessor includ

  • Spring Boot——日志文件

    文章目录 1 日志的作用2 日志的用法3 自定义日志打印日志格式的说明 4 日志级别5 在配置文件中设置日志级别5 1设置全局的日志级别和局部文件夹的日志级别 6 日志持久化7 更简单的日志输出 lombok 1 日志的作用 日志的作用 x

  • VxWorks入门06：虚拟机中运行

    在下载的VxWorks安装包中 xff0c 包含了一份在虚拟机下安装测试的文档 xff0c 我们按照这个文档测试一下 VxWorks 6 8 3 43 VxWorks Workbench 3 2 3 43 VMware 16 1 2 43

  • 后浪小萌新Python --- 类中的属性

    一 什么是属性 我们通过类中的属性来保存类相关的属性 二 属性的分类 类中的属性分为两种 xff1a 类属性和对象属性 类属性 类的字段 a 定义 xff1a 直接定义在类中的变量就是类属性 b 使用 xff1a 类 属性 c 什么时候用

  • 业务架构的定义、特性和方法

    引言 业务架构一般不被开发重视 xff0c 开发人员喜欢追求新技术 xff0c 而技术是服务于业务的 xff0c 现在没有一项技术是自娱自乐的 xff0c 一定要支撑业务 xff0c 否则没有场景 设计好业务架构要考虑的方面比较多 xff0

  • VMware虚拟机扩展磁盘空间Ubuntu（超简单）

    一 简介 在平时使用时 xff0c 会遇到安装的虚拟机磁盘空间不足 的情况 此时需要给系统扩展磁盘空间 网上的很多教程都是输入一堆命令 xff0c 申请 分配 初始化 挂载等等特别麻烦 今天介绍一个最简单 最实用 的方法 二 实操 先进入r

  • Ubuntu 安装git及git命令

    1 检查git是否已经安装 xff0c 输入git version命令即可 xff0c 如果没有显示版本号表示没有安装git 2 安装git sudo apt get install git 3 配置git全局环境 git config g

  • Bad method handle type 7异常解决

    在利用androidx版本写demo时 xff0c 在添加了一些依赖后 xff0c 遇到了java lang ClassNotFoundExceptionbug xff0c 这就很奇怪了 xff0c 我就添加rxjava3的依赖 xff0c

  • linux防火墙添加端口

    iptables版 iptables nL line number vi etc sysconfig iptables 添加以下语句 A RH Firewall 1 INPUT p tcp m state state NEW m tcp d

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

    一 安装esLint xff08 一 xff09 打开项目代码 xff0c 进入terminal xff08 二 xff09 安装esLint 1 安装esLint npm install eslint span class token o

热门标签