VsCode（Visual Studio Code）格式化代码符合EsLint

最新推荐文章于 2025-09-19 03:30:00 发布

原创最新推荐文章于 2025-09-19 03:30:00 发布 · 置顶 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#VsCode EsLint插件

vue基础同时被 2 个专栏收录

13 篇文章

订阅专栏

编辑器

4 篇文章

订阅专栏

本文介绍如何在VSCode中配置ESLint插件，实现代码的自动格式化和错误修正，包括安装插件、设置自动修复等功能，适用于JavaScript、Vue和HTML等文件。

利用Visual Studio Code ESlint插件，实现自动格式化代码

步骤一：安装ESlint插件=>点击Extensions或者Ctrl+Shift+X=>搜索ESlint=>install EsLint

在这里插入图片描述

步骤二: 重启VsCode，发现代码提示报错，代码不符合规范

在这里插入图片描述

步骤三：鼠标hover在报错的地方，会出现Quick Fix…，点击或者选择这条报错代码Ctrl+.(注意只能使用英文输入法)

在这里插入图片描述

步骤四：选择Fix

拓展如何让Vscode 自动格式化代码符合EsLint格式

步骤一：找到VsCode 的Settings.json文件并打开
windows 系统：
File =>Preferences=>settings=>using Setting =>Text Editor=>Edit in settings.json=>打开settings.json 文件
在这里插入图片描述

步骤二：把下面的代码写入到Setting.json中

 "eslint.autoFixOnSave": true,  //  启用保存时自动修复,默认只支持.js文件
    "eslint.validate": [
       "javascript",  //  用eslint的规则检测js文件
       {
         "language": "vue",   // 检测vue文件
         "autoFix": true   //  为vue文件开启保存自动修复的功能
       },
       {
         "language": "html",
         "autoFix": true
       },
     ],

在这里插入图片描述