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

 更新时间:2019年03月20日 14:55:43   作者:胡不归vac  
这篇文章主要介绍了详解VS Code使用之Vue工程配置format代码格式化,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

编辑器另外一个很重要的功能就是代码格式化了,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

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

相关文章

  • vue使用echart自定义标签以及颜色

    vue使用echart自定义标签以及颜色

    这篇文章主要为大家详细介绍了vue使用echart自定义标签以及颜色,应用于echart 5.0以上版本,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • VUE+jszip如何实现下载多个文件导出为一个zip格式

    VUE+jszip如何实现下载多个文件导出为一个zip格式

    这篇文章主要介绍了VUE+jszip如何实现下载多个文件导出为一个zip格式方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3配置Element及element-plus/lib/theme-chalk/index.css报错的解决

    vue3配置Element及element-plus/lib/theme-chalk/index.css报错的解决

    这篇文章主要介绍了vue3配置Element及element-plus/lib/theme-chalk/index.css报错的解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • ElementUI中的el-dropdown传入多参数的实现方法

    ElementUI中的el-dropdown传入多参数的实现方法

    本文主要介绍了ElementUI中的el-dropdown传入多参数的实现方法,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue2移动端+swiper实现异形的slide方式

    vue2移动端+swiper实现异形的slide方式

    这篇文章主要介绍了vue2移动端+swiper实现异形的slide方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue项目实现点击目标区域之外可关闭(隐藏)目标区域

    vue项目实现点击目标区域之外可关闭(隐藏)目标区域

    这篇文章主要介绍了vue项目实现点击目标区域之外可关闭(隐藏)目标区域,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue3 如何通过虚拟DOM更新页面详解

    Vue3 如何通过虚拟DOM更新页面详解

    这篇文章主要为大家介绍了Vue3 如何通过虚拟DOM更新页面详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 老生常谈vue3组件通信方式

    老生常谈vue3组件通信方式

    这篇文章主要介绍了vue3组件通信方式,面试题经常会问到vue3组件间的通信方式,今天就通过实例代码给大家详细介绍下,对vue3组件通信相关知识感兴趣的朋友一起看看吧
    2022-08-08
  • vue.js集成echarts时遇到的一些问题总结

    vue.js集成echarts时遇到的一些问题总结

    这篇文章主要给大家总结介绍了关于vue.js集成echarts遇到的一些问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • vue.js利用defineProperty实现数据的双向绑定

    vue.js利用defineProperty实现数据的双向绑定

    本篇文章主要介绍了用Node.js当作后台、jQuery写前台AJAX代码实现用户登录和注册的功能的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04

最新评论