前端-Vue的开发工具VScode使用Vetur和eslint插件

悠悠 2023-02-18 10:55 41阅读 0赞

由于VScode版本原因，在使用ESlint插件时，对setting.json文件的配置：

（确保vue项目也有ESlint依赖，才能使用ESlint插件）

> **打开VScode的setting.json文件：**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70][]
> 
>  
> 
> **旧版（版本 < 1.41.0）配置：**  
>  
> 
>     {
>         //配置eslint
>         "eslint.autoFixOnSave": true,  //  启用保存时自动修复,默认只支持.js文件
>         "eslint.validate": [
>            "javascript",  //  用eslint的规则检测js文件
>            {
>              "language": "vue",   // 检测vue文件
>              "autoFix": true   //  为vue文件开启保存自动修复的功能
>            },
>            {
>              "language": "html",
>              "autoFix": true
>            }
>          ]
>     }
> 
>   
>   
>   
> **新版（版本 >1.41.0）配置：**  
>   
>  
> 
>     {
>         //autoFixedOnSave 设置已废弃，采用如下新的设置
>         "editor.codeActionsOnSave": {
>           "source.fixAll.eslint": true
>         },
>         "eslint.format.enable": true,
>         //autoFix默认开启，只需输入字符串数组即可
>         "eslint.validate": ["javascript", "vue", "html"]
>     }
> 
>  
> 
> **（我的是1.4.3版本，如图所示：）**
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200617151914771.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200617152034214.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RpbWVndXlz,size_16,color_FFFFFF,t_70