这3工具都必须安装. 但是安装之后, 规则冲突又让人头疼. 讲下解决方案吧.
### 从0开始
1. 禁止插件, 如下图
2. 清空用户设置
(Code–>首选项–>设置–>[右上角可以打开json,左侧切换“用户|工作区”])
全部删除. 我只留了这一句
"window.zoomLevel": -1,
### vue语法高亮
1. 创建.vue文件, 写些代码, 发现一片漆黑
2. 安装激活vetur插件, 代码就有高亮了. 右键菜单还会变多一些, 主要多了个格式化文档
这时候格式化文档其实也是可以用的.
3. 既然已经安装了vetur, 那就得物尽其用. 参考链接[link](https://vuejs.github.io/vetur/)
4. 我们主要看红色圈起来的. 进入第一个链接, 赫然看见
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其实已经可以用了, 例如
3. 根据说明在code-》首选项-》设置-》用户JSON加入如下配置
```
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
]
```
但是有如下提示. 不用管他
### 红色1: 安装 eslint-plugin-vue 用来 linting <template> section
其实可以继续使用vetur默认使用的eslint-plugin-vue版本的. 如果自己有版本, 那就只能npm安装一个版本,参考下图
看, 已经有效果了
### 红色2: format
vetur的默认代码风格工具如下.
```
"vetur.format.defaultFormatter.html": "prettyhtml",
"vetur.format.defaultFormatter.css": "prettier",
"vetur.format.defaultFormatter.postcss": "prettier",
"vetur.format.defaultFormatter.scss": "prettier",
"vetur.format.defaultFormatter.less": "prettier",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
"vetur.format.defaultFormatter.js": "prettier",
"vetur.format.defaultFormatter.ts": "prettier"
```
把它贴到工作区吧, 方便将来修改. 现在我就要改一个, 把 “"vetur.format.defaultFormatter.html": "prettyhtml",”
修改成
"vetur.format.defaultFormatter.html": "js-beautify-html", 如下图
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
// js-beautify-html settings here
}
}
怎么配置呢, 打开链接 [link](https://beautifier.io/)
配置完, 把配置贴过来
效果也有了.
vscode, eslint, prettier, vetur冲突及解决
原文：https://www.cnblogs.com/mspeer/p/12055962.html