详解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 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
jQuery DOM操作小结与实例
Jan 07 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
jQuery插件开发详细教程
Jun 06 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
js命名空间写法示例
Dec 18 Javascript
JS中JSON对象和String之间的互转及处理技巧
Apr 06 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
Jun 06 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 Javascript
layui实现三级导航菜单
Jul 26 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
用函数读出数据表内容放入二维数组
2006/10/09 PHP
如何在PHP中进行身份认证
2006/10/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
javascript tips提示框组件实现代码
2010/11/19 Javascript
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
AngularJS递归指令实现Tree View效果示例
2016/11/07 Javascript
javascript history对象详解
2017/02/09 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
webpack自动打包和热更新的实现方法
2019/06/24 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
python验证码识别实例代码
2018/02/03 Python
python3实现多线程聊天室
2018/12/12 Python
解决keras backend 越跑越慢问题
2020/06/18 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
中兴通讯全球官方网站:ZTE
2020/12/26 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
应用艺术专业个人的自我评价
2014/01/03 职场文书
美术课外活动总结
2014/07/08 职场文书
2014年实习生工作总结
2014/11/27 职场文书
2015年暑期见闻
2015/07/14 职场文书
初中毕业生感言
2015/07/31 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
施工安全责任协议书
2016/03/23 职场文书
婚礼必备主持词范本!
2019/07/23 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python