三步搞定 vscode 代码格式化

一、安装以下几个 vscode 扩展程序：

ESLint
Prettier - Code formatter
Vetur

如图：

二、打开 settings 文件

打开方式：

先按步骤打开 setting 界面，
Code --> preferences -->setting （也可以快捷键 command + ,（mac）直接打开）

现在看到的是界面配置模式，点击右上角的红色区域按钮（如下图），可以打开 settings.json 文件。

三、将下面配置添加到 setting.json 文件中

注：此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考，然后结合自己的需求去配置。
如果没有特殊需求，也可以拿去直接用。

{// tab 大小为2个空格"editor.tabSize": 2,// 100 列后换行"editor.wordWrapColumn": 100,// 保存时格式化"editor.formatOnSave": true,// 开启 vscode 文件路径导航"breadcrumbs.enabled": true,// prettier 设置语句末尾不加分号"prettier.semi": false,// prettier 设置强制单引号"prettier.singleQuote": true,// 选择 vue 文件中 template 的格式化工具"vetur.format.defaultFormatter.html": "prettyhtml",// 显示 markdown 中英文切换时产生的特殊字符"editor.renderControlCharacters": true,// 设置 eslint 保存时自动修复"eslint.autoFixOnSave": true,// eslint 检测文件类型"eslint.validate": ["vue","html","javascript","typescript","javascriptreact","typescriptreact"],// vetur 的自定义设置"vetur.format.defaultFormatterOptions": {"prettier": {"singleQuote": true,"semi": false}},// vue 扩展的文件默认使用 prettier 进行格式化"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
}

保存配置，现在就搞定了，快试试是不是可以保存格式化代码了。

如果你好奇这份配置是怎么来的，或者之后想做修改。那么请看另一篇博客：

聊一聊 vscode 的代码格式化配置

三步搞定 vscode 代码格式化相关推荐

Flash Builder4.7极其简单破解方法-三步搞定（亲测）
资讯类型: 转载来源页面: http://weibo.com/2101024913/yvmR0D9Df 资讯原标题: 资讯原作者: 丿卓越丶星辰翻译词数: 词我的评论: 对这篇文你有啥看法,跟贴 ...
android 图片墙拼贴,三步搞定用APP打造图片文字拼贴效果
相信大家一定见过一种文字拼贴效果的图片,许多大小不一.字体不同.颜色各异的文字拼合出一幅完整的画面.如果你曾经也想自己制作这么一张高端大气上档次的独特图片,却苦于自己的PS水平不到家,那么一定不要错过 ...
linux 无法定位程序,三步搞定无法定位程序输入点于动态链接库上
三步搞定无法定位程序输入点于动态链接库上发布时间:2018-09-17 09:24 来源:互联网当前栏目:电脑教程上网的时候突然咚的一声弹出一个错误提示框,上边写着 iexplore.exe ...
Flash Builder4.7极其简单破解方法-三步搞定
Flash Builder4.7极其简单破解方法-三步搞定(亲测) 原方法适用于4.6版本,同样方法4.7完美破解,不敢独享具体步骤如下: 1.到Adobe官网下载FlashBuilder 4.6, ...
漂亮的PPT模板：三步搞定年终报告
漂亮的PPT模板:三步搞定年终报告 2013年年底悄然而至,有一个不得不做的难题,那就是如何做好年终报告?有没有想要吐槽的欲望,做完前要熬夜,做完后还被折磨.你是不是再也不想做PPT ,再也不会爱它了 ...
caj文件怎么转换成pdf格式？三步搞定
当我们需要查阅一些文献资料时,往往会遇到CAJ文件格式的问题.这种格式需要使用专业的阅读工具才能打开,让我们的阅读体验变得十分不便.为了解决这个问题,我们可以将CAJ文件转换成PDF文件格式.这样,无 ...
pr cpu100%_打工度假签证拿PR三步搞定！高薪，稳定工作，分分钟成为人生赢家！...
国内苦苦工作多年的996上班族, 想要换个新环境,丰富人生经历? 完全可以! 顺利拿到打工度假签来澳洲打工就结束了嘛? 这只是第一步! 合法高薪工作之余, 你还有机会移民澳洲! 符合以下条件的打工 ...
pdf批量添加图章_1分钟学会制作电子公章，三步搞定，轻松在PDF文件中添加公章图片...
相信职场办公的各位都有同感吧,平常需要盖章的地方真的蛮多的,如果是纸质文件还好,但是电子文档如何盖章呢?其实也很简单,今天小编就教大家用Word制作电子印章,超简单的,三步就搞定,一起看看吧! 一.如 ...
如何将讲课视频录制下来，只需要三步搞定.
工作生活中学习无处不在,但是由于时间等原因的限制,目前大部分都会选择网络课程!目前网络课程大多可以分为直播课程与录播课程两种分类.我们只需要选择一种自己感兴趣的课程,待课程开始时就会有相关的提示!但是 ...

三步搞定 vscode 代码格式化

一、安装以下几个 vscode 扩展程序：

二、打开 settings 文件

三、将下面配置添加到 setting.json 文件中

三步搞定 vscode 代码格式化相关推荐

最新文章

热门文章