当前位置：首页 > news >正文

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

news 2025/9/13 1:53:56

一、快速生成页面骨架

文件 > 首选项 > 配置用户代码片段
请添加图片描述

选择需要的代码片段或者创建一个新的，这里以 vue.json 举例：
在这里插入图片描述
下面为我配置的代码片段，仅供参考：

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

二、格式化配置

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

settings.json

{// 编辑器配置"workbench.colorTheme": "Atom One Dark","workbench.iconTheme": "vscode-icons","editor.fontSize": 15,"editor.links": false,"editor.detectIndentation": true,"editor.formatOnSave": true,"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 标签自动换行（这样设置不会频繁换行）}},// js 格式化程序"[javascript]": {"editor.defaultFormatter": "vscode.typescript-language-features"},// json 格式化程序"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}

三、界面美化配置

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

请添加图片描述

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

文件 > 首选项 > 设置 ，中找到 Links 配置，取消它即可。

请添加图片描述

2. 取消标签频繁换行

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

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

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