Eslint在Vscode中使用技巧的相关技巧

ps :该文章会详细结论构建一个脚手架遇到的问题,会持续更新,请定时查看

Eslint相关​

在vscode中使用eslint插件

  1. 在vscode中用户配置没有开启eslint.enable

  2. 在vscode中工作区配置开启eslint.enable

  1. settings.json中没有做eslint相关配置
  1. 在编写的vue文件中a这个变量没有使用应该是报错的,eslint插件是开启的

应该如何解决开启了eslint插件却没有检测代码没有生效?

有两种方式可以让eslint插件生效:

  1. 开启用户配置中的eslint.enable,这个开关如果没打开的话,即使我们配置了Eslint,检测代码也不会生效。

  2. 在settings.json文件中配置

json 复制代码
{
"eslint.enable": true
}

代码检测功能马上就会生效

ps: 为什么会出现上面这两种情况?个人猜测,如果项目中存在settings.json文件,eslint插件优先读取settings.json的配置,发现没有配置,就去检查用户配置,发现用户配置没有开启就启动检测代码功能,如果发现有配置,并且配置未"eslint.enable": true就开启代码检测

eslint插件自动格式化代码

在.eslintrc的rules里我们可以配置自己的规则,比如我们想要在项目里统一使用单引号的格式(默认是双引号),我们可以进行如下配置:

json 复制代码
   {
    "rules": {
        quotes: ["error", "single"]
    }

可是配置完发现文件都标红了,因为文件默认都是用的双引号,一个个改成单引号又很麻烦,有没有什么简单的方法呢?

我们可以通过在设置中配置editor.codeActionsOnSave在我们进行保存的时候自动格式化代码。

打开了.vscode目录下的settings.json文件,我们在这个文件里添加如下代码:

json 复制代码
{
  "editor.codeActionsOnSave": {
    "source.fixAll": true,
    "source.fixAll.eslint": true
  },
}

这个配置表示在我们保存的时候自动执行fix操作,且使用的是eslint进行fix操作。做完这个配置后我们在刚才标满红波浪线的文件夹中点击保存,发现双引号都被自动替换为单引号了,红波浪线全部消失了。

做完以上配置那么我们的项目已经可以用VsCode进行代码检测了,点击保存的时候也会帮你自动格式化一部分代码。

Prettier相关

上面通过Eslint已经可以检测代码了也可以做自动格式化了,为什么还需要Prettier呢?因为他们的侧重点其实是不同的,Eslint主要用于检测代码质量,帮你发现代码中的错误,而Prettier主要是检测代码格式,也就是检测你的代码美不美观,比如下面这行代码:

javascript 复制代码
const a   ='1';

可以看到a和等号中间有很多空格,看起来很不美观,Eslint是不会帮你调整格式的,这个工作就需要交给Perttier来做。

安装Prettier插件

到vscode的extension选项卡中搜索Prettier安装即可,安装完成后有的人是可以直接保存代码,然后代码就会格式化,这是因为你的编辑器之前有设置过Format On Save这个选项

如果你在上面的Format On Save没有选中,可以直接到settings.json文件中添加如下代码:(个人推荐)
"editor.formatOnSave": true,

起码你知道是你配置了起了作用,如果去修改用户和工作区的Format On Save会导致新项目你无法知道究竟是哪里的配置起了作用,云里雾里。

现在的settings.json文件内容:

json 复制代码
{
  // eslint相关配置
  // 只要安装了插件,就默认开启,即使不写这个配置
  "eslint.enable": true,
  // 保存时为编辑器运行代码操作。必须指定代码操作,并且编辑器不能关闭
  "editor.codeActionsOnSave": {
    // 控制是否应在文件保存时运行自动修复操作
    "source.fixAll": true,
    //使用eslint做代码格式化
    "source.fixAll.eslint": true
  },
  // 保存时自动格式化代码,这里提供给prettier做代码格式化
  "editor.formatOnSave": true
}
相关推荐
陈言必行3 小时前
Unity 性能优化 之 编辑器创建资源优化( 工作流 | 场景 | 预制体)
unity·编辑器·游戏引擎
CAE虚拟与现实11 小时前
VSCode中的下载VSIX是指什么?
ide·vscode·编辑器
路边闲人214 小时前
vscode启用GEMINI CODE ASSIST插件
ide·vscode·gemini
小蕾Java14 小时前
Java 开发工具,最新2025 IDEA使用(附详细教程)
java·ide·intellij-idea
CAE虚拟与现实14 小时前
VSCode官方汉化包
ide·vscode·编辑器·vscode汉化
CAE虚拟与现实14 小时前
VSCode创建Python项目和运行py文件
ide·vscode·编辑器
资讯第一线14 小时前
《RAD Studio 13.0》 [DELPHI 13.0] [官方原版IOS] 下载
ide
过-眼-云-烟16 小时前
新版Android Studio能打包但无法run ‘app‘,编译通过后手机中没有安装,顶部一直转圈
android·ide·android studio
Stardep16 小时前
ssh远程连接服务器到vscode上“连接失败”
服务器·vscode·ssh
扯淡的闲人21 小时前
多语言编码Agent解决方案(4)-Eclipse插件实现
java·ide·eclipse