vsCode代码格式化(明白eslint、vetur、prettier,实现格式化文档以及ctrl+ ...

打印 上一主题 下一主题

主题 1005|帖子 1005|积分 3015

目次
第一章 媒介
第二章 vscode插件安装
2.1 ESLint
2.2 Vetur 
2.3 Prettier - Code formatter
2.4 总结
第三章 实用场景(办理常见代码规范题目)
3.1 实现crtl+s生存自动格式化代码
3.2 办理格式化文档自动出现的双引号、分号等报错
3.3 办理缩进报错
3.4 总结的eslint配置规则
3.5 总结


第一章 媒介

我们在写前端代码、格式化代码、把别人的项目拉到本身的vscode运行的时候,会出现这么一些报错:双引号、空格、分号等等,那么我们为什么会出现这样的题目标,为什么格式化还报错……接下来是小编的一些想法,供大家参考。
第二章 vscode插件安装

这里就不多说了,相信大家在百度的过程中,终极肯定也会安装如下三个插件
2.1 ESLint



  • 小编明白

  • 它是javascript代码检测工具,资助我们进步编码标准和代码的可维护性,但是留意,小编说到它只是检测工具
  • ESLint可以查抄语法错误,资助开发者避免常见的错误,通过它自带的一些规则查抄
  • 我们可以配置文件自定义规则,从而检测出一些报错,让我们去修改,从而同一代码风格,例如:一些语法的错误、大概格式上分号、缩进的报错……
  • 小编发起eslint配置不要配置每次生存时格式化js,只用于语法查抄
2.2 Vetur 



  • 小编明白

  • 小编也看了很多百度上对这个插件的阐明,确实这个插件的功能也是很多,是为vue专门打造的一个插件,可以语法高亮、代码补全、代码导航、语法查抄等等,也可以格式化html、标准css(有分号 、大括号的那种)、标准js(有分号 、双引号的那种)、vue文件
  • 但是小编要说的是它的格式化题目,它的格式化的标准js文件不符合ESlint规范,比如我们安装Vetur之后格式化文档会给我们自动添加分号、双引号等等,从而造成报错,如下:(但是不消也是不可能的)

2.3 Prettier - Code formatter



  • 小编明白

  • 这是一个只关注格式化,并不具有eslint查抄语法等本领,只关心格式化文件(最大长度、混淆标签和空格、引用样式等),包罗JavaScript、TypeScript 、CSS 、SCSS、 Less 、JSX 、Vue 
2.4 总结

明白了以上三个插件,我们怎样搭配使用呢。小编总结后给出的思绪——只使用eslint举行语法查抄(可以通过配置规则从而束缚代码规范),vue项目vetur是必不可少的,但是由于它的格式化与eslit语法不符合,但是我们又必要更加简便的代码,就不能在eslint的配置规则允许引号分号等通过查抄,那就必要使用Prettier这个只针对文件格式化工具配置参数,从而实现格式化时既简便又符合语法的代码。
第三章 实用场景(办理常见代码规范题目)

3.1 实现crtl+s生存自动格式化代码



  • 进入vscode的公共设置:文件 -> 首选项 -> 设置



  • 点击该该按钮填写配置项



  • 在源代码中添加 "editor.formatOnSave": true, 从而实现ctrl+s即可格式化文档
  1. // 值设置为true时,每次保存的时候自动格式化;值设置为false时,代码格式化请按shift+alt+F
  2. "editor.formatOnSave": true,
复制代码

3.2 办理格式化文档自动出现的双引号、分号等报错



  • 首先查看是否用的vetur举行格式化文档

 



  • 配置,点击默认格式化程序后即可选择



  •  在没有配置对应的配置项之前,格式化文档会自动使用双引号、添加分号…



  • 添加配置项

  1. "prettier": {
  2.     "semi": false,
  3.     "singleQuote": true,
  4. }
复制代码


  •  配置位置与3.1相同
  • 配置好后,格式化文档发现会为我们删去多余的分号、也都使用单引号



  • 题目办理 
3.3 办理缩进报错



  • 也是在3.1中的文件,添加配置项

  1. "vetur.format.options.tabSize": 4, // 修改缩进
复制代码


  •  配置好后,我们格式化文档,便会自动格式成4个空格的缩进



  • 但是看小编的代码,为什么会飘红呢?其实是小编的eslint没有配置对应的语法规则导致的,后续就必要看3.4,eslint配置必要怎样配置,项目怎么同一。
3.4 总结的eslint配置规则



  • 该内容必要等待小编有时间时更新完成
3.5 总结


  • 以上全部的配置前提是必要小编说到的3个插件的安装
  • 小编的配置是在vscode的用户设置中配置的,也就是全局下配置,不发起大家配置太多,只必要把开发过程中一些默认的,大家都这么做的配置即可
  • eslint查抄也是很重要的,我们也必要有一套便于开发的配置规则,等待小编的更新
  • 都看到这了,总结公共配置不容易,给小编来个一键三连吧!!!


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

反转基因福娃

论坛元老
这个人很懒什么都没写!
快速回复 返回顶部 返回列表