美文网首页
vscode 自动 eslint 校验

vscode 自动 eslint 校验

作者: 梧桐月明中 | 来源:发表于2020-11-16 16:11 被阅读0次

    在对 Element-UI 二次开发之前,先配置了 vscode 的 eslint 校验,走了一些弯路,这里记录一下。

    • 开启保存时自动校验后,我的 vscode 默认是使用的 prettier 的 formatter,于是在校验时就会和 eslint 产生一些冲突。也就是保存成了 prettier 的规则,lint 时会有报错。
    • 当时傻乎乎地根据 eslint 的规则写了几个 prettier 的规则到 package.json 里,才终于发现这样治标不治本。
    • 另一个问题是 eslint 不会检验 .vue 文件,于是启用了 vetur 的校验,它默认的 formatter 也是 prettier。也曾尝试在 vscode 的 settings.json 里加入:
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    }, 
    "vetur.format.defaultFormatterOptions": {                    
      "prettier": {                                                                        
        "singleQuote": true,
        "comma-dangle": "never"
      }
    }
    
    • 但其实我想要的是按照 eslint 的规则校验啊,清醒一下!
      如下配置成功解题:
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "vue"
    ]
    

    如果用 ts,eslint.validate 里再加入 typescript``typescriptreact
    如此,校验修复的事情不再让 prettier 和 vetur 来插手,纯正的 eslint 规则。(想要 prettier 的话其实作为 eslint 的插件来引入使用会更方便)


    同样的 vscode,同样的 settings.json,在另一个项目里 eslint 的自动校验竟然没有生效,怎么回事?
    发现在文件开头 import 下面有红色波浪线,显示:

    ESLint is disabled since its execution has not been approved or denied yet. Use the light bulb menu to open the approval dialog.
    

    提示我 eslint 没有开启。
    View -> appearance -> show status bar 打开 vscode 的底部状态栏,果然 eslint 显示禁用,点击后选择 Allow Everywhere 即可。


    附 vscode 快捷指令:
    command + shift + p 打开指令输入框。
    输入 open settings 打开设置文件。
    一些设置更改了以后要重启才生效,实际上输入 reload window 重新加载窗口即可。

    相关文章

      网友评论

          本文标题:vscode 自动 eslint 校验

          本文链接:https://www.haomeiwen.com/subject/smqzbktx.html