vscode中vetur、eslint、prettier个人理解
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、问题的出现
- 二、vetur、eslint、prettier是什么？
- 二、解决办法
- 1.安装vetur插件
- 2.安装eslint插件
- 3.安装prettier插件
- 总结
前言
解决问题流程：
首先确定问题是什么->能不能分解成多个小问题->依次解决小问题->反思问题的产生
以下是本篇文章正文内容
一、问题的出现
在编写vue代码时，vscode中使用到vetur、eslint、prettier插件，想实现保存时，自动格式化代码。但事与愿违，保存自动格式化代码后，会出现eslint语法报错。
二、vetur、eslint、prettier是什么？
vetur：主要针对vue文件，有代码高亮、错误检查、格式化、debugger以及一些vue文件的定制功能。
eslint：代码检测工具，用来检测你代码中的不规范，可以统一项目项目的代码规范。
prettier：代码格式化工具，以某种规则来格式化你的代码。
使用背景：虽然vetur同时有错误检查以及格式化，但是代码检测在项目中还是通常用eslint；而格式化工具则是用prettier。vetur则更多的是用到了它的代码高亮等功能
二、解决办法
1.安装vetur插件
安装vetur插件后，vue代码可以高亮了，vetur中也有prettier格式化工具，但只能针对vue文件使用。
2.安装eslint插件
安装eslint插件后，代码不规范的地方，会报出错误。具体的配置可以根据实际需求在.eslintrc.js文件中的rule项里设置对应规则（配置信息也可能在package.json文件中）。
3.安装prettier插件
安装prettier插件后，会根据prettier插件的默认规则来格式化代码，规则可以通过在根目录下，新建.prettierrc.json文件来配置规则。
总结
报错原因：是因为prettier插件格式化代码后，代码的格式化规则和eslint的检测代码的规则有冲突，因此保存后就会报错。
解决办法：修改prettier插件的规则或者eslint设置忽略错误。
（个人见解，如果有误，请多指教）
vscode中vetur、eslint、prettier个人理解相关推荐
- VSCode中使用 eslint+prettier完成代码格式化以及自动化整理
如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码 配置 ESLInt.js vscode软件下载一个ESLint,在到 ...
- vscode中如何修改vetur配置_vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和 ...
- vue项目在vscode中编译eslint报错没显示红色波浪线提示
vue项目在vscode中编译eslint报错没显示红色波浪线提示. 如下图所示: 下图是预期效果: 不符合Eslint校验规则的代码位置都能展示出来,这样一目了然.能帮助我们迅速找到报错的位置. 然 ...
- 一套流程教你完成基于vue脚手架的vscode代码规范(vetur+eslint+prettier)配置
在写代码的过程当中一般都会要求生产统一风格的代码.规范,简洁的代码好处就不用我多说了吧.接下来就按我的方法来初始化代码生产环境吧. 配置步骤 1.在vscode中下载三个插件 vetur,Pretti ...
- VS Code 中 Vetur、prettier、ESLint 使用
一.vue 语法高亮 1.1 安装 Vetur 1.创建. vue 文件, 写些代码, 发现一片漆黑,如何才能让写的代码高亮,并显示不同颜色? 2.安装激活 vetur 插件, 代码就有高亮了.右键菜 ...
- vscode 配置 vetur + eslint
我们都知道,使用 vue 打开代码检查后,常常会报一大堆错误,接下来我们使用 vscode 配置插件,使得可以保存之后自动格式化,并且解决报错. 安装插件 vetur eslint 安装插件的办法就不 ...
- vue中使用 eslint+prettier
ESLint 主要解决了两类问题,但其实 ESLint 主要解决的是代码质量问题.另外一类代码风格问题 这个应该是eslint的报错问题,那么在vue2中如何使用eslint和eslint自动修复呢? ...
- Vscode 中vetur设置，让代码变得更美观
{// ----------------// vscode默认启用了根据文件类型自动设置tabsize的选项"editor.detectIndentation": false, / ...
- vscode+CRA+TypeScript+eslint+prettier+stylelint+husky+lint-staged完整版配置
最近在做一个react项目,需要统一和规范代码风格,并且实现git管理,规范提交.所以基于CRA脚手架搭建项目整体框架,并自定义配置相关需求. CRA 在目标文件夹下打开cmd,项目使用ts开发,输入 ...
最新文章
- WCF 第八章 安全
- js符号输入不可用_js禁止输入特殊字符
- oracle notes,Oracle Notes
- Kafka解惑之Old Producer（4）——Case Analysis
- dealloc不调用的情况
- php nodelist,了解NodeList、HTMLCollection以及NamedNodeMap的使用(代码)
- GPIO应用开发方法【ZT】
- 计算机系统应用的书,基于领域本体与上下文感知计算的智能图书-计算机系统应用.PDF...
- HTML5实现输入密码（六个格子）
- iTerm2 如何设置以单词为单位快速移动光标？
- windows基于vs2017的opencv安装
- python 修改图片_Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
- flutter学习笔记之Dart-8 问号、双问号、感叹号的理解
- Java第五章 常用API
- 微信好友突破10000人，节跳动即将取消饮料补贴福利！！
- Postman 复制粘贴表单参数
- kubernetes 调用 rook 作后端存储
- 软考嵌入式系统工程师知识点整理（嵌入式操作系统）
- 高跟鞋踩猫、踩狗视频下载
- Unity 操作快捷键（全）