首页 > 其他 > 详细

vscode配置eslint自动保存功能不生效

时间:2020-11-11 20:08:46      阅读:377      评论:0      收藏:0      [点我收藏+]

今天给一个项目添加eslint, 按照网上的教程,配置完就是不生效,半天没解决, 后来终于解决了, 在此总结,把一些坑分享出去。

1. vscode 扩展中安装eslint

技术分享图片

 2. eslint 扩展要是开启状态(开启关闭如果没生效,重启vscode即可)

技术分享图片

3.修改eslint 的 setting(配置), 步骤如下

技术分享图片技术分享图片

 参考我的配置,可以直接复制过去:

{
    "stylelint.enable": true,
    "eslint.options": { // 这个配置可以去掉,vscode 会自动找到根目录下的eslint配置文件, 如果配置了,名字必须对上,不然eslint检测不生效
        "configFile": ".eslintrc.json"
    },
    "eslint.validate": ["html", "vue", "javascript", "jsx"],
    // "eslint.autoFixOnSave": true,
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "editor.wordWrapColumn": 220,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

 网上写的都是配置  "eslint.autoFixOnSave": true,  这个是老版本的配置了, 我的vscode 版本比较新, 提示要用新的配置,如下所示,

技术分享图片

意思就是把 "eslint.autoFixOnSave": true,  改为如下:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
 }

4.项目根目录下添加eslint配置文件

技术分享图片 

文件可以是 JSON 格式还可以是 JavaScript  YAML Deprecated  格式的,

但是记得 必须跟上面配置的 configFile 的值对应上, 不然不生效。

 5.检查是否关闭了vscode 的 eslint 功能

如下图,这种情况下 ESLint功能是关闭的,点击一下

技术分享图片

会出现下面这个弹框, 选择是应用在当前wokrspace(工作空间) 还是全部项目下。

技术分享图片

其他相关配置可以参考 eslint官网 : http://eslint.cn/ 

 

vscode配置eslint自动保存功能不生效

原文:https://www.cnblogs.com/yalong/p/13960211.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!