详解VS Code使用之Vue工程配置format代码格式化


Posted in Javascript onMarch 20, 2019

编辑器另外一个很重要的功能就是代码格式化了,VS Code默认提供常见文件的格式化,如.js,.html等。

添加对.vue文件的格式化支持

这里我们添加对 .vue 文件的格式化支持。
1. 安装 Vetur 插件
2. 在 VS Code 的设置中添加如下规则:

{
   "vetur.format.defaultFormatter": {
    "html": "prettier",
    "css": "prettier",
    "postcss": "prettier",
    "scss": "prettier",
    "less": "prettier",
    "js": "prettier",
    "ts": "prettier",
    "stylus": "stylus-supremacy"
  }
}

这里是设置 Vetur 默认使用的格式化插件 prettier。 这样对于.vue文件中的 html 和 javascript 代码都有格式化支持了。

使用符合 ESLint 规范的格式化

1、使用 prettier 格式化 .js 文件

可以设置 prettier 在格式化的时候,读取项目的 .eslintrc的配置,对 js代码进行格式化。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

  1. 首先为 VS Code 安装 prettier 插件
  2. 在 VS Code 的设置中添加如下配置
    1. json
    2. "prettier.eslintIntegration": true

2、对.vue文件的格式化

prettier插件对 .vue 文件格式化时,暂不能支持将 eslint规范应用到 js代码中。

但是我们可以先将其格式化,然后利用 ESLint 保存文件时自动修复错误的特性,修复一些诸如 分号,空格,缩进 等错误。

参考资料:

- Vetur

本文首发于我的github

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
javascript eval和JSON之间的联系
Dec 31 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
Dec 29 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
Feb 06 Javascript
JS中offset和匀速动画详解
Feb 06 Javascript
详解Vue Elememt-UI构建管理后台
Feb 27 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
vue路由对不同界面进行传参及跳转的总结
Apr 20 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
vue使用Proxy实现双向绑定的方法示例
Mar 20 #Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 #Javascript
详解JavaScript作用域和作用域链
Mar 19 #Javascript
vue双向绑定及观察者模式详解
Mar 19 #Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
Mar 19 #Javascript
在vue中使用G2图表的示例代码
Mar 19 #Javascript
Three.js中矩阵和向量的使用教程
Mar 19 #Javascript
You might like
浅谈电磁辐射对健康的影响
2021/03/01 无线电
PHP数据类型之布尔型的介绍
2013/04/28 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
DOM精简教程
2006/10/03 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
2007/02/15 Javascript
js拦截alert对话框另类应用
2013/01/16 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
2020/07/20 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
python执行get提交的方法
2015/04/29 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
代码中finally中的代码会不会执行
2012/02/06 面试题
大学四年规划书范文
2013/12/27 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
六五普法规划实施方案
2014/03/21 职场文书
促销活动计划书
2014/05/02 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
HR必备:超全面的薪酬待遇管理方案!
2019/07/12 职场文书
导游词之峨眉山
2019/12/16 职场文书