详解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 相关文章推荐
8个超棒的学习 jQuery 的网站 推荐收藏
Apr 02 Javascript
jquery实现手机发送验证码的倒计时代码
Feb 12 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
Aug 24 Javascript
js的touch事件的实际引用
Oct 13 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
jQuery前端开发35个小技巧
May 24 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
Node.js使用Angular简单示例
May 11 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
node.js通过url读取文件
Oct 16 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
php session 预定义数组
2009/03/16 PHP
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
点击进行复制的JS代码实例
2013/08/23 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
2018/02/10 Javascript
为vue-router懒加载时下载js的过程中添加loading提示避免无响应问题
2018/04/03 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
2020/09/24 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
flask框架视图函数用法示例
2018/07/19 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
英国领先的电视购物零售商:Ideal World
2019/03/18 全球购物
统计员岗位职责
2013/11/14 职场文书
kfc实习自我鉴定
2013/12/14 职场文书
教师研修随笔感言
2014/01/23 职场文书
2014年统战工作总结
2014/12/09 职场文书
2014年减负工作总结
2014/12/10 职场文书
公司老总年会致辞
2015/07/30 职场文书
《三国志》赏析
2019/08/27 职场文书