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 这个扩展包,把上面的属性配置设置可能无效,把这个扩展包禁用或卸载


相关文章
|
1月前
|
移动开发 JavaScript 安全
Vue 应用程序性能优化:代码压缩、加密和混淆配置详解
Vue 应用程序性能优化:代码压缩、加密和混淆配置详解
27 0
|
21天前
|
Linux C++
vscode 如何修改c/c++格式化风格,大括号不换行
vscode 如何修改c/c++格式化风格,大括号不换行
|
21天前
|
JavaScript
vue 钟表功能:动态显示实时时间(时间格式化插件dayjs)
vue 钟表功能:动态显示实时时间(时间格式化插件dayjs)
|
21天前
|
缓存 前端开发 JavaScript
代码如何跑得更快?Vue性能提速指南
代码如何跑得更快?Vue性能提速指南
69 0
代码如何跑得更快?Vue性能提速指南
|
25天前
|
缓存 JavaScript 开发工具
【安装指南】VSCode搭建运行Vue的详细教程
【安装指南】VSCode搭建运行Vue的详细教程
41 0
|
28天前
|
JSON JavaScript 前端开发
TypeScript笔记(2)—— 使用VSCode实时编译TypeScript代码
TypeScript笔记(2)—— 使用VSCode实时编译TypeScript代码
12 0
|
1月前
|
设计模式 JavaScript 前端开发
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(下)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(下)
|
1月前
|
设计模式 JavaScript
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
探索 Vue Mixin 的世界:如何轻松复用代码并提高项目性能(上)
|
1月前
|
JavaScript
vue里面如何把时间格式化
vue里面如何把时间格式化
15 0
|
1月前
|
前端开发 Java Go
vscode怎么运行程序代码的两种方法
VSCode要运行程序的代码,大致要分为两种情况而定,一种是前端的代码,另一种是后端的代码。在VSCode中,后端代码的运行,可以从VSCode打开终端,然后使用命令行工具,使用命令来运行后端代码程序,比如Python的就可以使用命令:python file.py;Golang就可以使用:go run file.go;Java的就可以使用:java file.java,具体的步骤如下
71 1

相关产品

  • 云迁移中心