IT评测·应用市场-qidao123.com

标题: vsCode代码格式化（明白eslint、vetur、prettier，实现格式化文档以及ctrl+ [打印本页]

作者: 反转基因福娃 时间: 2024-6-14 00:29
标题: vsCode代码格式化（明白eslint、vetur、prettier，实现格式化文档以及ctrl+
目次
第一章媒介
第二章 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生存自动格式化代码