现在用 VSCode 开发 Vue.js 应用几乎已经是前端的标配了，但很多时候我们看到的代码混乱不堪，作为一个前端工程师，单引号双引号乱用，一段有分号一段没有分号，有的地方有逗号有的地方没有逗号，空格回车都对不齐，还说自己做事认真，这不是开玩笑的事情。

我们今天从头开始，完整地讲述一下一个重度代码洁癖患者该如何用 VSCode 开发 Vue，以及如何把一个已经可以宣判死刑的全身各种格式错误几万条的项目整容成标准美女。

从安装开始

为了准确起见，我们把 VSCode 里所有插件全部禁用，把用户设置清空，以让它尽可能恢复成原始的样子：

作为代码洁癖患者，对于系统的版本要求一定也是最苛刻的，不管什么时候，都让我们把所有的系统能升级的都升级到最高版本：

npm install -g @vue/cli

然后，我们开始创建项目：

vue create hello-world

在这里，一定要选择第一项：babel + eslint，这两个是必不可少的。我见到有些人嫌 eslint 麻烦，居然在项目建立好之后手工把 eslint 关掉的，简直无语。

安装完毕：

我们先不急着执行，执行代码是最容易的事情，我们先打开代码看一下：

好吧，至少我们需要先安装 vetur 插件。这几乎已经确定是开发 Vue 项目的标配了，即使我不说，VSCode 也会强烈建议你安装它。

装上 vetur 以后多少有点人样了。接下来我们来试一试能不能自动格式化，这部分才是洁癖患者的最爱。胡乱加几个空格，然后保存试试看：

不能格式化，连个提示都没有！

用lint格式化

就算 VSCode 里的 vetur 不能帮我们自动格式化，好在 package.json 命令里还有一个 lint 命令，我们看看 lint 命令能不能帮我们自动格式化：

lint 居然说没有错误！明明就是多了很多空格的错误好吧，为什么？

这是因为缺省的 vue-cli 没有为我们安装 @vue/prettier 插件，我们先来手工安装一下：

yarn add -D @vue/eslint-config-prettier

然后在package.json或者.eslintrc.js或者其它什么你设置eslint的地方，给它加上：

 "extends": [ "plugin:vue/essential

eslint vscode 自动格式化_使用 VSCode 的必备三大神器，这才是开发 Vue 的真香解决方案...相关推荐

eslint vscode 自动格式化_配置VSCode编辑器适配VUE3开发
团队协作开发一般都有统一的编码规范,举个例子:A习惯一个tab占位2个空格,B习惯一个tab占位4个空格,如果不统一,提交到仓库的代码将变得难以阅读和维护. 幸运的是我们可以通过插件来规范化代码,只要 ...
eslint 保存自动格式化_代码规范之理解ESLint、Prettier、EditorConfig
授权转载自:nowThen https://juejin.cn/post/6895889063111294990 前言团队多人协同开发项目中困恼团队管理一个很大的问题是:无可避免地会出现每个开发者编 ...
synctoy 自动同步_用SyncToy给硬盘备份保证数据安全，来自微软的馅饼真香
HDD没我们想象的那样安全,HDD切忌震动.SSD也没我们想象的那样脆,SSD切忌异常断电.注意使用得当,那么HDD.SSD都是很耐用的.但是,不管我们使用SSD还是HDD,都可能遇到一些意外的风险. ...
vscode自动格式化不符合eslint_VsCode（Visual Studio Code）格式化代码符合EsLint
利用Visual Studio Code ESlint插件,实现自动格式化代码步骤一:安装ESlint插件=>点击Extensions或者Ctrl+Shift+X=>搜索ESlint=& ...
vscode中如何修改vetur配置_vscode 配置vue+vetur+eslint+prettier自动格式化功能
该配置用于vue开发,最终效果是保存时自动根据eslint对js.html和css代码进行格式化. vscode Vetur插件 Vetur插件用于识别vue文件,原本vetur自带格式化功能,但是和 ...
VScode配置eslint保存自动格式化，eslint格式化去掉分号和双引号。vscode自动保存去掉分号和双引号；““
本文是开启eslint检验和配置eslint格式化:如果想要关闭eslint,查看这篇关闭eslint方法: 1.必须安装的三个插件eslint, prettier-Code formatter ,v ...
eslint vscode 自动格式化_Vue 入门系列第二期，开发环境与 ESLint 配置
引言开发 Vue 项目前,做好开发环境的相关配置非常重要,它可以提高我们的开发效率. 在「Vue 入门系列」第一期,新手快速入门指南,初识 Vue 一期中,我们利用 Vue CLI 搭建了项目骨架, ...
vscode html 格式化_详解VSCode 格式化不符合预期的问题
一句话总结不同格式化程序执行时长不一样,导致文件格式好后和预期不符. 请务必保持校验(Lint)规则和格式化(Format)规则一致,不然格式化后还是不符合预期是非常讨厌的. 本篇主要讲解怎么调教V ...
【攻破css系列——附加篇】vscode自动格式化
文章目录 1. 快速格式化 1.1 格式化的定义 1.2 vscode的格式化组合键 2. 自动格式化 2.1 定义 2.2 设置自动格式化的步骤 1. 快速格式化 1.1 格式化的定义格式化会让我 ...

eslint vscode 自动格式化_使用 VSCode 的必备三大神器，这才是开发 Vue 的真香解决方案...

从安装开始

用lint格式化

eslint vscode 自动格式化_使用 VSCode 的必备三大神器，这才是开发 Vue 的真香解决方案...相关推荐

最新文章

热门文章