vscode格式化Vue出现的问题

崔晓明发布于2019-08-22 15:10 / 465人阅读

摘要：一中使用插件格式化文件时，代码会自动加上冒号和分号本来就是简写比较方便舒服，结果一个格式化回到解放前最后找到问题原因首先，默认设置是这个样的。

一、VSCode中使用vetur插件格式化vue文件时，js代码会自动加上冒号和分号

本来就是简写比较方便舒服，结果一个格式化回到解放前

最后找到问题原因：

  首先，vetur默认设置是这个样的。也就是很多是用的prettier插件。

解决办法1 (最快的解决办法)

把"vetur.format.defaultFormatter.js": "prettier",改为 "vetur.format.defaultFormatter.js": "vscode-typescript"

参考自记一次vscode升级后，格式化Vue出现的问题

但是这样就没有用到Prettier这个酷酷的东西，于是自己打算继续研究

解决办法2 (踏实的解决办法)

一打开Prettier官网，阔怕全是英文，还是硬着头皮上

(1)安装

yarn安装

yarn add prettier --dev --exact

或者全局安装

yarn global add prettier

或者npm(当然cnpm也可以)

npm install --save-dev --save-exact prettier

或者全局安装

npm install --global prettier

(2)新建.prettierrc.json配置文件放在vue项目的root目录下(也就是和README.md文件同一目录)

(3)配置.prettierrc.json文件如下

{
    "singleQuote":true,//使用单引号而不是双引号,true就是对
    "semi":false//在语句结尾处打印分号,false就是不打印
}

小伙伴们还想配置其他参数选项可参考官网Prettier的选项和参数描述

现在按快捷键Shift+Alt+f格式化js代码就不会加上冒号和分号了。

作者相关Vue文章

基于Vue2.0实现后台系统权限控制

前端文档汇总

VUE2.0增删改查附编辑添加model(弹框)组件共用

打赏衷心的表示感谢

GPU云服务器云服务器 cdn的出现问题云主机可能出现的问题阿里云服务器容易出现的问题 extjs出现问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93235.html

vscode 配置eslint 开发vue的相关配置

摘要：参考详情请参考此插件允许和修复文件中包含的内联脚本。这是因为中发生了许多内部更改，包括支持预处理器中自动固定的新。请确保在你的配置中使用了该插件自身的配置代码规范解决报错问题如何在vscode中用JavaScript Standard Style风格去验证 vue文件实际上JavaScript Standard Style有一个FAQ, 说明了如何使用。但是有一点非常重要的作者没有...

haobowd 2019-08-02 16:15 评论0 收藏0
vscode 配置eslint 开发vue的相关配置

摘要：参考详情请参考此插件允许和修复文件中包含的内联脚本。这是因为中发生了许多内部更改，包括支持预处理器中自动固定的新。请确保在你的配置中使用了该插件自身的配置代码规范解决报错问题如何在vscode中用JavaScript Standard Style风格去验证 vue文件实际上JavaScript Standard Style有一个FAQ, 说明了如何使用。但是有一点非常重要的作者没有...

lifesimple 2019-08-23 17:13 评论0 收藏0
如何在vscode中用standard style 风格去验证 vue文件

摘要：史上最便捷的统一代码风格的方式，轻松拥有。自动代码格式化。提前发现风格及程序问题。减少代码审查过程中反反复复的修改过程，节约时间。如何在中用风格去验证文件实际上有一个说明了如何使用。 1 JavaScript Standard Style简介本工具通过以下三种方式为你（及你的团队）节省大量时间：无须配置。史上最便捷的统一代码风格的方式，轻松拥有。自动代码格式化。只需运行 s...

gnehc 2019-08-01 18:14 评论0 收藏0
如何在vscode中用standard style 风格去验证 vue文件

摘要：史上最便捷的统一代码风格的方式，轻松拥有。自动代码格式化。提前发现风格及程序问题。减少代码审查过程中反反复复的修改过程，节约时间。如何在中用风格去验证文件实际上有一个说明了如何使用。 1 JavaScript Standard Style简介本工具通过以下三种方式为你（及你的团队）节省大量时间：无须配置。史上最便捷的统一代码风格的方式，轻松拥有。自动代码格式化。只需运行 s...

fredshare 2019-08-22 11:20 评论0 收藏0
如何优雅地使用 VSCode 来编辑 vue 文件？

摘要：注本文首发在我的个人博客最近有个项目使用了，本来一直使用的是来进行开发，可是遇到了很多问题。此外，还有很多规范是帮助我们写出更加优雅而不容易出错的代码的。，终于基本搞定了，可以愉快地开发应用了。注：本文首发在我的个人博客最近有个项目使用了 Vue.js ，本来一直使用的是 PHPStorm 来进行开发，可是遇到了很多问题。后来，果断放弃收费的 PHPStorm ，改用 vsco...

pekonchan 2019-08-20 15:14 评论0 收藏0