详解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 相关文章推荐
javascript下IE与FF兼容函数收集
Sep 17 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
javascript自定义in_array()函数实现方法
Aug 03 Javascript
javascript对象的创建和访问
Mar 08 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
微信小程序开发教程之增加mixin扩展
Aug 09 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
PHP网站基础优化方法小结
2008/09/29 PHP
编写Smarty插件在模板中直接加载数据的详细介绍
2013/06/26 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP把数字转成人民币大写的函数分享
2014/06/30 PHP
php中的ini配置原理详解
2014/10/14 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
jquery.ui.draggable中文文档
2009/11/24 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
如何用js实现鼠标向上滚动时浮动导航
2016/07/18 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
2017/03/07 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
Servlet返回的数据js解析2种方法
2019/12/12 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
Vue3为什么这么快
2020/09/23 Javascript
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
Python常见工厂函数用法示例
2018/03/21 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
大四本科生的自我评价
2013/12/30 职场文书
2014年父亲节活动方案
2014/03/06 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技
Python与C++中梯度方向直方图的实现
2022/03/17 Python
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android