配置

VS Code 文件 -> 首选项 -> 设置 -> 用户设置栏 -> 扩展 -> Vetur

打开文件加入如下配置：

{// tab 大小为2个空格"editor.tabSize": 2,// 字體大小"editor.fontSize": 16,// 設置行高"editor.lineHeight": 25,// 保存时格式化"editor.formatOnSave": true,// 开启 vscode 文件路径导航"breadcrumbs.enabled": true,// 显示 markdown 中英文切换时产生的特殊字符 "editor.renderControlCharacters": true,// 设置 eslint 保存时自动修复"eslint.autoFixOnSave": true,// 添加 vue 支持"eslint.validate": ["javascriptreact","vue","javascript",{"language": "vue","autoFix": true},"html",{"language": "html","autoFix": true}],// #让函数(名)和后面的括号之间加个空格"javascript.format.insertSpaceBeforeFunctionParenthesis": true,// #选择 vue 文件中 template 的格式化工具"vetur.format.defaultFormatter.html": "js-beautify-html",// #让vue中的js按编辑器自带的ts格式进行格式化"vetur.format.defaultFormatter.js": "vscode-typescript",// vetur 的自定义设置"vetur.format.defaultFormatterOptions": {"prettier": {"singleQuote": false,"semi": true}},//颜色配置"editor.tokenColorCustomizations": {"comments": "#858c99", // 注释"keywords": "#c678dd", // 关键字"variables": "#9fb2bf", // 变量名"strings": "#98c379", // 字符串"functions": "#e06c75", // 函数名"numbers": "#d19a66", // 数字},// 选中高亮的颜色"workbench.colorCustomizations": {"editor.selectionBackground": "#4e8bda7e", //选中高亮"editor.background": "#282c35", //背景色"editorCursor.foreground": "#bebebe", //编辑器光标颜色"editor.lineHighlightBackground": "#14524e", //光标所在行高亮内容的背景颜色"editor.lineHighlightBorder": "#00000000", //光标所在行四周边框的背景颜色"sideBar.background": "#21252b","sideBar.foreground": "#b3bccc","tab.inactiveBackground": "#21252b",},"editor.codeActionsOnSave": {"source.fixAll.eslint": true},"gitlens.advanced.messages": {"suppressGitVersionWarning": true},"files.autoSave": "onFocusChange",
}

完成

在Vue文件中 ctrl+s 保存一下，你会惊奇的发现。

vscode vue settings.json 代码格式化配置！自定义设置 VSCode代码颜色设置（霸霸看了都说好）相关推荐

Typora 设置代码块的默认编程语言以及字体颜色设置
Typora 设置代码块的默认编程语言以及字体颜色设置 1.链接下载ahk.https://autohotkey.com/download/ahk-install.exe 安装完成后,就可以直接新建a ...
vscode代码格式化配置。
目的统一团队代码风格,防止协作中不必要的冲突,团队主要技术栈VUE. 编辑器:vscode 插件:Vetur.Prettier.koroFileHeader(添加文件头部注释和方法注释) 配置文件位 ...
前端代码规范之代码格式化配置
前言由于每个前端人员的格式化配置或安装的格式化插件不一,导致在对项目开发的过程中代码风格不一,影响团队开发效率: 为了方便维护及统一代码风格制定团队的一套格式化配置,来对项目代码进行约束以及对部分问 ...
google风格代码格式化配置（eclipse和idea）
目录 1. Eclipse平台可以使用eclipse-java-google-style.xml配置 1.1 平台配置 1.2 保存代码自动格式化设置 2. IDEA平台可以使用intellij-ja ...
在使用 VScode 进行代码格式化后，保存发现代码又变乱了，怎么办？
出现的问题: 在用 VScode 时,代码使用格式化文档时,可以完美的进行格式化,但保存后,代码变乱或遇到如下问题: 保存代码的时候,代码被自动格式化,然后格式就变乱了(只要保存,格式就被打乱) ...
vscode vue解决跨域_Vue + WebPack + Typescript初学者VSCode项目 (按需加载、跨域调试、await/async）...
万事开头难,一个好的Hello World程序可以节省我们好多的学习时间,帮助我们快速入门.Hello World程序之所以是入门必读必会,就是因为其代码量少,简单易懂.但我觉得,还应该做到功能丰富, ...
dw html5怎么美化,DW CS5/CS6代码格式化、美化插件 Dreamweaver代码格式化美化插件
这个<DW CS5/CS6代码格式化.美化插件>应该是现在最好用的代码格式化扩展了. 众所周知Dreamweaver CS5 CS6自带的应用源格式只能独自格式化HTML文件与CSS文件, ...
VSCode中针对C语言的代码格式化配置
默认格式化工具打开设置(Ctrl + ,) ,选择"用户"配置,找到"文本编辑器" - "Default Formatter": 安装了C ...
在使用 VScode 进行代码格式化后，保存发现代码又变乱了，怎么办？vs去掉格式化
第一,去掉系统格式化去掉勾第二:查找项目里是否有 JS-CSS-HTML Formatter 的插件,有的话建议直接卸载第三,检查是否有这些插件 ESLint.Prettier - Cod ...

vscode vue settings.json 代码格式化配置！自定义设置 VSCode代码颜色设置（霸霸看了都说好）

配置

完成

vscode vue settings.json 代码格式化配置！自定义设置 VSCode代码颜色设置（霸霸看了都说好）相关推荐

最新文章

热门文章