vscode, eslint, prettier, vetur冲突及解决

Posted 2021-03-22 mspeer

这3工具都必须安装. 但是安装之后, 规则冲突又让人头疼. 讲下解决方案吧.

从0开始

1. 禁止插件, 如下图
   

2. 清空用户设置
   (Code–>首选项–>设置–>[右上角可以打开json,左侧切换“用户|工作区”])

全部删除. 我只留了这一句
"window.zoomLevel": -1,

vue语法高亮

1. 创建.vue文件, 写些代码, 发现一片漆黑
   

2. 安装激活vetur插件, 代码就有高亮了. 右键菜单还会变多一些, 主要多了个格式化文档
   

这时候格式化文档其实也是可以用的.

1. 既然已经安装了vetur, 那就得物尽其用. 参考链接link
   

2. 我们主要看红色圈起来的. 进入第一个链接, 赫然看见

Linting

Install ESLint plugin for the best linting experience. Vetur‘s template linting is only for quick start and does not support rule configuration.

vetur 的代码检查不支持任何配置, 建议安装ESLint. 那就安装.

红色1: 安装ESLint

1. 安装npm包
   npm install -D eslint

2. 安装ESLint插件

这时候, ESLint其实已经可以用了, 例如

1. 根据说明在code-》首选项-》设置-》用户JSON加入如下配置

"eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
  ]

但是有如下提示. 不用管他

红色1: 安装 eslint-plugin-vue 用来 linting