VsCode(Visual Studio Code)格式化代码符合EsLint

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

利用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
       },
     ],

在这里插入图片描述

备注:

成果展示:
在这里插入图片描述

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看