VSCode支持Vue自动保存格式化的配置
时间:2022-07-27
本文章向大家介绍VSCode支持Vue自动保存格式化的配置,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
安装插件
安装三个插件:Prettier - Code formatter
、ESLint
、Vetur
。对应的插件图片如下:
修改配置文件
MacOS使用Command + Sheft + P
,windows使用Ctrl + Sheft + P
搜索首选项:打开设置(json)
,然后把下面配置粘贴进去:
{
// 分号
"prettier.semi": false,
"prettier.eslintIntegration": true,
// 单引号包裹字符串
// 尽可能控制尾随逗号的打印
"prettier.trailingComma": "all",
"prettier.singleQuote": true,
"prettier.tabWidth": 2,
// 关闭自带的格式化
"javascript.format.enable": false,
// 让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// 启用eslint
"eslint.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// 格式化.vue中html
"vetur.format.defaultFormatter.html": "js-beautify-html",
// 让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned" // 属性强制折行对齐
}
},
"vetur.format.enable": true,
"eslint.options": {
"extensions": [".js", ".vue"]
},
"eslint.autoFixOnSave": true,
"editor.tabSize": 2,
// 开启行数提示
"editor.lineNumbers": "on",
// 去掉 vscode 自带的自动保存 ,vscode 默认也是 false
"editor.formatOnSave": false,
// vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
"editor.quickSuggestions": {
//开启自动显示建议
"other": true,
"comments": true,
"strings": true
},
"extensions.ignoreRecommendations": false,
"window.zoomLevel": 1,
"files.autoGuessEncoding": false,
"workbench.sideBar.location": "left"
}
确保和项目配置不冲突
如果项目配置和VSCode默认的配置有冲突可能会出现问题,请确保根目录下的.vscode/settings.json
文件和上面的文件并不冲突,可以把.vscode/settings.json
设置为一个空JSON。
- android应用资源预编译,编译和打包全解析
- Python优雅地dumps非标准类型
- html5标签基础
- 彻底搞懂Gradle、Gradle Wrapper与Android Plugin for Gradle的区别和联系
- 社会化分享
- Android真机安装sqlite3的方法
- 二次元世界的Linux—东方Project之B站掠影
- 带三方登录(qq,微信,微博)
- Android Studio移动鼠标显示悬浮提示的设置方法
- Spring Cloud构建微服务架构:服务注册与发现
- 自定义Interpolator
- 解决adb push时出现的"Read-only file system"问题
- 1个掷硬币问题,4个Python解法
- 用xml来编写动画
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【原创】经验分享:一个Content-Length引发的血案(almost....)
- SAP Spartacus里使用Observable访问Component数据
- SAP Spartacus的b2cLayoutConfig
- python判断工作日,节假日
- Shell高级用法之重定向绑定
- 使用Pyspark进行特征工程时的那些坑
- AutoML之自动化特征工程
- 使用Pandas_UDF快速改造Pandas代码
- pandas:根据行间差值进行数据合并
- DeepFM算法解析及Python实现
- 词嵌入技术解析(一)
- 初识TPOT:一个基于Python的自动化机器学习开发工具
- 为你的机器学习模型创建API服务
- Vim实用技巧——使用.swp文件恢复已删除文件
- Dart 中 final 和 const 区别