VSCode 开发配置，一文搞定（持续更新中...）

一、快速生成页面骨架

文件 > 首选项 > 配置用户代码片段

选择需要的代码片段或者创建一个新的，这里以

vue.json

举例：

下面为我配置的代码片段，仅供参考：

1. Vue2 + JS

在

.vue

文件中输入

vue2

回车。即可快速生成页面骨架

{"Print to console":{"prefix":"vue2","body":["<template>","  <div class='$1'></div>","</template>","","<script>","export default {","  data() {","    return {}","  },","  computed: {},","  methods: {}","}","</script>","","<style lang='scss' scoped>","","</style>",""],"description":"Log output to console"}}

2. Vue3 + TS

在

.vue

文件中输入

vue3

回车。即可快速生成页面骨架

{"Print to console":{"prefix":"vue3","body":["<script setup lang='ts'>","</script>","","<template>","  <div class='$1'></div>","</template>","","<style lang='scss' scoped>","","</style>",""],"description":"Log output to console"}}

二、格式化配置

这一块有很多配置，就不一一介绍了，直接放上配置项并加上注释，自己选择需要的去配置，以下是我个人的配置习惯

1. Vue2 + JS 配置

settings.json

{// 编辑器配置"workbench.colorTheme":"Atom One Dark","workbench.iconTheme":"vscode-icons","editor.fontSize":15,"editor.links":false,"editor.detectIndentation":true,"editor.formatOnSave":true,"editor.inlayHints.enabled":"off",// 禁用编辑器内嵌提示"editor.tabSize":2,"editor.insertSpaces":false,"editor.codeActionsOnSave":{"source.fixAll.eslint":true},// eslint 配置"eslint.validate":["javascript","javascriptreact","vue"],// vue 格式化程序"[vue]":{"editor.defaultFormatter":"octref.vetur"// 使用 vetur 替换默认格式化},// 配置 vetur 格式化规则"vetur.format.defaultFormatter.html":"js-beautify-html","vetur.format.defaultFormatter.js":"vscode-typescript","vetur.format.options.tabSize":2,"vetur.format.defaultFormatterOptions":{"js-beautify-html":{"wrap_attributes":"auto"// html 标签自动换行（这样设置不会频繁换行）},"prettier":{"semi":false,// 末尾不添加分号"singleQuote":true,// 使用单引号"trailingComma":"none"// 末尾不添加引号}},// js 格式化程序"[javascript]":{"editor.defaultFormatter":"vscode.typescript-language-features"},"js/ts.implicitProjectConfig.experimentalDecorators":true,// json 格式化程序：默认使用 vscode 格式"[jsonc]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},// ts 格式化程序：默认使用 vscode 格式"[typescript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},// scss 格式化程序：默认使用 vscode 格式"[scss]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},// less 格式化程序：默认使用 vscode 格式"[less]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},}

2. Vue3 + TS 配置

如果同时下载了

vetur

和

volar

插件，需要禁用

vetur

插件

{// 编辑器配置"workbench.colorTheme":"Atom One Dark","workbench.iconTheme":"vscode-icons","editor.fontSize":15,"editor.links":false,"editor.detectIndentation":true,"editor.formatOnSave":false,// 是否在保存时自动格式化"editor.inlayHints.enabled":"off",// 禁用编辑器内嵌提示"editor.tabSize":2,"editor.insertSpaces":false,"editor.codeActionsOnSave":{"source.fixAll.eslint":true},// eslint 配置"eslint.validate":["javascript","javascriptreact","vue"],// vue 格式化程序"[vue]":{"editor.defaultFormatter":"Vue.volar"// 使用 volar 替换默认格式化},// 配置 volar 格式化规则"volar.autoCompleteRefs":true,// js 格式化程序"[javascript]":{"editor.defaultFormatter":"vscode.typescript-language-features"},"js/ts.implicitProjectConfig.experimentalDecorators":true,// json 格式化程序：默认使用 vscode 格式"[jsonc]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},// ts 格式化程序：默认使用 vscode 格式"[typescript]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},// scss 格式化程序：默认使用 vscode 格式"[scss]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},// less 格式化程序：默认使用 vscode 格式"[less]":{"editor.defaultFormatter":"esbenp.prettier-vscode"},}

vue3项目不用配置那么多内容，

.prettierrc.json

文件已经包含了这些格式化配置

.prettierrc.json

{"$schema":"https://json.schemastore.org/prettierrc","semi":false,"tabWidth":2,"singleQuote":true,"printWidth":120,"trailingComma":"none"}

三、界面美化配置

1. 取消默认链接显示下划线

这种密密麻麻的下划线，看着是不是很难受？取消这个配置，即可隐藏它。

文件 > 首选项 > 设置 ，中找到

Links

配置，取消它即可。

2. 取消标签频繁换行

明明很短的标签，一行就可以显示，但是格式化后却频频换行，看着是不是别扭，别着急，按照下面的配置，轻松搞定它。

1. 安装 Vetur 插件，注意版本号，有些最新的版本可能会出现莫名其妙的bug，如果遇到了，卸载后安装低版本即可，（我安装的是 v0.36.1 版本，未遇到 bug）
2. 打开设置的 json 文件，在里面进行编辑，打开方法和配置如下

"[vue]":{"editor.defaultFormatter":"octref.vetur"// 使用vetur取代vscode默认配置},"vetur.format.defaultFormatterOptions":{"js-beautify-html":{"wrap_attributes":"auto"},},

END