VSCode Vue 代码自动格式化问题

简介: VSCode Vue 代码自动格式化问题

#####VSCode 版本

image.png

#####插件安装列表

image.png使用 yarn 全局安装 prettier

gyw@gyw:~$ yarn -v
1.7.0
gyw@gyw:~$ yarn global add prettier
yarn global v1.7.0
(node:7222) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Installed "prettier@1.13.7" with binaries:
      - prettier
Done in 3.25s.

前端 vue 项目根目录下添加 .prettierrc.json 文件, 配置如下就好了

{
    "singleQuote": true,
    "semi": false
}


singleQuote: true 使用单引号 semi: false 在语句末尾不打印分号


Missing space before function parentheses

  ✘  http://eslint.org/docs/rules/space-before-function-paren  Missing space before function parentheses
  src/views/home.vue:467:18
      onUploadError(err, file, fileList) {
                    ^
✘ 30 problems (30 errors, 0 warnings)
Errors:
  30  http://eslint.org/docs/rules/space-before-function-paren
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.

解决方式

使用 VSCode 自带的 ts 格式化,配置以下内容:

"vetur.format.defaultFormatter.js": "vscode-typescript""javascript.format.insertSpaceBeforeFunctionParenthesis": true 函数括号前插入空格


image.png

VSCode EXTENSIONS

image.png


VS Code 保存时自动格式化功能取消

User Settings 里面设置 editor.formatOnSave 属性为 false

如果安装了 JS-CS-HTML Formatter 这个扩展包,把上面的属性配置设置可能无效,把这个扩展包禁用或卸载


目录
相关文章
|
3天前
|
JavaScript 前端开发 开发者
Vue3:快速生成模板代码
Vue3:快速生成模板代码
|
29天前
|
JavaScript
Vue3代码展示(vue-codemirror)
`vue-codemirror`插件为Vue应用提供了一个强大的代码编辑器组件,支持代码高亮、自定义样式、暗黑模式等特性。通过简单的配置即可实现丰富的代码编辑体验。安装依赖后,创建`CodeMirror.vue`组件并在目标页面中使用即可。
183 1
Vue3代码展示(vue-codemirror)
|
1月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
146 5
|
1月前
|
缓存 JavaScript 前端开发
没想到 Vue 中滥用 watch 危害这么大!吓得我连夜修改代码
没想到 Vue 中滥用 watch 危害这么大!吓得我连夜修改代码
|
1月前
|
JavaScript 容器
Vue学习之--------组件在Vue脚手架中的使用(代码实现)(2022/7/24)
这篇文章通过代码示例和项目目录结构图,介绍了如何在Vue脚手架中使用组件来实现一个产品列表页。文章详细展示了组件的编写、引入、注册和使用步骤,并提供了实际效果截图。同时,文章还友情提示读者需要使用Vue脚手架来完成这些操作。
Vue学习之--------组件在Vue脚手架中的使用(代码实现)(2022/7/24)
|
1月前
|
JavaScript 程序员
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
这篇文章通过代码示例和效果图,详细阐述了Vue中组件的嵌套使用,包括创建组件、组件间的嵌套、注册组件以及实现的效果。同时,文章还介绍了VueComponent的相关知识,包括组件实例对象和Vue实例对象的区别。
Vue学习之--------组件嵌套以及VueComponent的讲解(代码实现)(2022/7/23)
|
1月前
|
JavaScript 容器
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
这篇文章讲解了Vue中组件的基本使用方法,包括组件的定义、注册和使用过程,并通过代码实例演示了非单文件组件的创建和使用,同时指出了一些使用组件时的注意事项。
Vue学习之--------组件的基本使用(非单文件组件)(代码实现)(2022/7/22)
|
1月前
|
JavaScript 前端开发
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
这篇文章介绍了Vue中使用v-model实现表单数据收集的方法,包括基础知识、代码实例和测试效果,并提供了一些额外建议。
Vue学习之--------Vue中收集表单数据(使用v-model 实现双向数据绑定、代码实现)(2022/7/18)
|
1月前
|
Java 数据安全/隐私保护
VScode将代码提交到远程服务器、同时解决每次提交都要输入密码的问题(这里以gitee为例子)
这篇文章介绍了如何在VSCode中将代码提交到Gitee远程服务器,并提供了解决每次提交都需要输入密码问题的方法。
VScode将代码提交到远程服务器、同时解决每次提交都要输入密码的问题(这里以gitee为例子)
|
1月前
|
JavaScript 前端开发 开发者
【颠覆你的前端世界!】VSCode + ESLint + Prettier:一键拯救Vue代码于水深火热之中,打造极致编程体验之旅!
【8月更文挑战第9天】随着前端技术的发展,保持代码规范一致至关重要。本文介绍如何在VSCode中利用ESLint和Prettier检查并格式化Vue.js代码。ESLint检测代码错误,Prettier保证风格统一。首先需安装VSCode插件及Node.js包,然后配置ESLint和Prettier选项。在VSCode设置中启用保存时自动修复与格式化功能。配置完成后,VSCode将自动应用规则,提升编码效率和代码质量。
220 1