vscode保存代码时自动eslint格式化

本文介绍了如何在Visual Studio Code (VSCode)中设置和使用ESLint插件,以实现在保存时自动依据ESLint规则格式化JavaScript、JavaScript React、Vue、HTML等文件的代码。首先,需要安装ESLint插件,然后在设置中修改`settings.json`文件,添加相关配置,包括启用保存时的自动修复功能。按照这些步骤操作后,每次保存代码,VSCode将自动进行格式化。

背景

我们期望使用vscode编码时,可以依据eslint规则,自动格式化我们的代码。那么可以通过设置vscode的自动格式化,来实现这一需求。

实现方式

  1. 安装vscode插件Eslint
    在这里插入图片描述

  2. 修改vscode设置
    文件-首选项-设置,或通过ctrl + shift + p => 首选项:打开工作区设置,打开vscode设置界面
    在这里插入图片描述

  3. 打开settings.json,添加下面的配置
    在这里插入图片描述

    {
      "search.followSymlinks": false,
      "editor.tabSize": 2,
      //配置eslint
      "eslint.validate": [
        "javascript",  // 用eslint的规则检测js文件
        "javascriptreact",
        "vue",
        "html",
      ],
      // 启用保存时自动修复eslint,默认只支持.js文件
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      }
    }
    

    在这里插入图片描述

  4. 之后写代码的时候,保存代码,vscode即可自动依据eslint规则对代码格式化

文章参考:https://blog.csdn.net/halo1416/article/details/120945975

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值