vscode中eslint插件的配置-prettier

深碍√TFBOYSˉ_ 2021-11-29 20:44 625阅读 0赞

用vue-cli构建vue项目，会有个eslint代码检测的安装

可vscode自带代码格式化是prettier格式（右键有格式化文件或alt+shift+f）

这时候要在vscode上装一个eslint插件

![1483803-20181209134111224-1794941318.png][]

装完后在文件-----》首选项-------》设置里找到settings.json

![1483803-20181209134446761-1455489055.png][]

eslint配置如下，（配置的·具体详情还有待研究，我也是网上copy的，不过亲测可用）。保存配置后每次写.vue文件只要**control+s**保存，就可以把代码格式改成符合eslint标准

{
      "editor.fontSize": 20,
      "files.autoSave": "off",
      "eslint.autoFixOnSave": true,
      "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
      },
      "[css]": {
        "editor.defaultFormatter": "michelemelluso.code-beautifier"
      },
      //eslint 代码自动检查相关配置
      "eslint.enable": true,
      "eslint.run": "onType",
      "eslint.options": {
        "extensions": [".js", ".vue"]
      },
      "eslint.validate": [
        "javascriptreact",
        "javascript",
        {
          "language": "vue",
          "autoFix": true
        },
        "html",
        {
          "language": "html",
          "autoFix": true
        }
      ]
      }
    }

在写vue的时候很多人会选择prettier+eslint来规范代码格式

这时候有些人就很奇怪，我明明在setting.json里配置了prettier的格式化规范，怎么就不生效呢

其实用vscode做vue开发的时候都会安装一个Vetur的插件来对.vue格式的文件进行处理，Vetur自带了格式化，规范就是使用prettier

如果你有装prettier插件，并且在设置或setting.json里配置了prettier的话是无效的

![1483803-20190507143853492-2015258152.png][]

![1483803-20190507143911605-604260246.png][]

如上图，在设置勾选后配置后就会在setting.json里生成对应配置代码，不过由于Vetur的存在，此时的prettier其实并未起作用（可能是优先级问题吧，我也不清楚）

正确配置看下图和Vetur官方文档

**[官网链接][Link 1]**

![1483803-20190507143446654-1693231858.png][]

所以说有两种方法配置，一种是在根目录下写一个.prettier文件，文件里的内容可以参考网上其它文章。另一种就是如上图所示，在setting.json里配置

![1483803-20190507144647978-449398208.png][]

\------------------------------------------------------------------------------分割线---------------------------------------------------

eslint也是能格式化的，只是有局限性，所以要prettier来配合

完整配置：

转载于:https://www.cnblogs.com/matd/p/10972319.html

[1483803-20181209134111224-1794941318.png]: /images/20211129/c04b9937791049ba9ef7204b65c073a8.png
[1483803-20181209134446761-1455489055.png]: /images/20211129/adb9d41dc2584def9529b7482c15f1d8.png
[1483803-20190507143853492-2015258152.png]: /images/20211129/6b4ae45df0dc41cfaa4c7e574f98054a.png
[1483803-20190507143911605-604260246.png]: /images/20211129/b61a976991924e07bc270efe54bb440a.png
[Link 1]: https://vuejs.github.io/vetur/formatting.html#settings
[1483803-20190507143446654-1693231858.png]: /images/20211129/e78fd7186b064c5c9fd1a17c6b3cc34a.png
[1483803-20190507144647978-449398208.png]: /images/20211129/7b453aef536e4815a672774e1306c2ea.png