您现在的位置是:首页 > Javascript
当前栏目
VS Code保存后自动格式化Vue代码
2023-04-18 15:25:18 时间
在VS Code里面编辑Vue代码,通常我们会安装插件Vetur,本次介绍的格式化代码也依赖于Vetur插件。具体见一下步骤
注: VS Code版本为1.74.3
1. 安装插件Vetur
2. 配置自动格式化,具体路径【文件】-【首选项】-【设置】,打开设置(json)
3. 将以下内容复制到settings.json
{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 4, "editor.fontSize": 22, // #每次保存的时候自动格式化 "editor.formatOnSave": true, "editor.formatOnType": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, // 一个tab 代表4个空格宽度 "vetur.format.options.tabSize": 4, // 编辑器默认格式化工具 很重要 "editor.defaultFormatter": "octref.vetur", // 配置格式化工具的选项 根据需要自己配置 "vetur.format.defaultFormatterOptions": { "prettier": { // Prettier option here https://prettier.io/docs/en/options.html // 字符串单引号 "singleQuote": true, // 去掉行末尾分号要 "semi": false, // 箭头函数 参数需要()包起来 "arrowParens": "always", // 是否用tab false的话用空格代替tab "useTabs": false, // 去掉对象末尾的逗号 "trailingComma": "none" } } }
完成以上配置,即可实现VS Code编辑代码后自动格式化代码
相关文章
- React Native中加载指示器组件ActivityIndicator使用方法
- Cesium 组件重写
- EasyCVR如何添加流量统计功能?
- JSBridge 技术原理分析
- HTTP跨域请求后台处理
- 五分钟带你入门基于Nodejs的强大的Web框架— NestJS
- Spring Boot 面试杀手锏:自动配置原理
- Web-Hacking-ToolKit:一款带有GUI的Web安全测试Docker镜像
- FreeBuf周报 | 成人视频网站StripChat数据库泄漏;macOS曝出零日漏洞
- LeetCode笔记:492. Construct the Rectangle
- CSS 基础知识
- 每次新增页面复制粘贴?100多行源码的 element-ui 的新增组件功能教你解愁
- Flutter 控件布局
- 面向数据的架构
- HTTP中Origin和Referer的区别?
- JavaScript 高频函数优化-函数防抖&函数节流
- js 动态修改_after_before伪元素content值
- JS中DOM事件流总结
- Electron快速上手并将网站直接生成桌面应用
- 分享 12 个重要的 JS 函数,建议每个前端开发人员都要搞清楚