vscode, eslint, prettier, vetur冲突及解决
这3工具都必须安装. 但是安装之后, 规则冲突又让人头疼. 讲下解决方案吧.
一 从0开始
1. 禁止工作区插件, 如下图:
2. 清空用户和工作区设置(Code–>首选项–>设置–>[右上角可以打开json,左侧切换“用户|工作区”])
3. 为了不影响其他vue项目, 在项目下新建一个.vscode 目录和settings.json 文件, 这个文件就是工作区设置, 好处是上传到项目配置库, 整个团队共享
文件中只留了几句,
"window.zoomLevel": -1, // 表示窗口缩小20%.
"editor.wordWrap": "wordWrapColumn", // 超长代码一般出现在html中, 我不喜欢html属性换行, 但是又想看到全部, 那就只能设置编辑器视觉上的换行了. "editor.wordWrapColumn": 150, // 同上
工作区如何设置参考链接: link(https://code.visualstudio.com/docs/getstarted/settings)
二 vue语法高亮
2.1 安装Vetur
1. 创建.vue文件, 写些代码, 发现一片漆黑
2. 安装激活vetur插件, 代码就有高亮了. 右键菜单还会变多一些, 主要多了个格式化文档.
看下vetur的特性: 语法高亮, 代码片段(emmet给我的感觉是一个写好了的snippet), 质量提示&错误、格式化/风格、智能提示等. 参考链接: link(https://vuejs.github.io/vetur/).
2.2 Vetur的质量提示&错误、格式化/风格
质量提示&错误之——提示即Lint
红色圈起来的. 第一个链接, 赫然看见
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.
格式化/风格——后面还会讲
- Vetur只支持整个文档格式化, 不支持选中某个片段格式化
- Vetur内嵌了如下格式化工具, 如果本地安装了相应版本, 则会使用本地安装的版本, 默认配置如图
-
prettier: For css/scss/less/js/ts.prettier-eslint: For js. Runprettierandeslint --fix.prettyhtml: For html.stylus-supremacy: For stylus.vscode-typescript: For js/ts. The same js/ts formatter for VS Code.sass-formatter: For the .sass section of the files.
这里, 说一句:
- ESLint主要负责: 质量检查(例如使用了某个变量却忘记了定义)、风格检查
- 后面用到的Prettier主要负责: 风格检查, 没有质量检查
三 安装ESLint
1. 安装npm包
npm install -D eslint
2. 安装ESLint插件
这时候, ESLint其实已经可以用了, 例如
Vetur也继续可用
3. 启用ESLint
.vscode/settings.json文件(或者 code-》首选项-》设置-》工作区JSON)加入如下配置
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
},
]
有如下提示. 因为autoFix缺省是启用的. 改一下就行
反正, ESLint 已经能够对 和