轻松掌握 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
},
// html 格式化配置
"html.format.wrapLineLength": 150, // 每行最大字符数
// 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. 取消标签频繁换行
Vue2 + Vetur
明明很短的标签,一行就可以显示,但是格式化后却频频换行,看着是不是别扭,别着急,按照下面的配置,轻松搞定它。
- 安装
Vetur
插件,注意版本号,有些最新的版本可能会出现莫名其妙的bug,如果遇到了,卸载后安装低版本即可,(我安装的是v0.36.1
版本,未遇到 bug) - 打开设置的 json 文件,在里面进行编辑,打开方法和配置如下
"[vue]": {
"editor.defaultFormatter": "octref.vetur" // 使用vetur取代vscode默认配置
},
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "auto"
},
},
Vue3 + Volar
在 文件 > 首选项 > 设置 中将 HTML › Format: Wrap Line Length
改为 150
即可,更大也行。
或者直接在 stting.json
中添加一行代码也可。
"html.format.wrapLineLength": 150, // 每行最大字符数
四、插件推荐
1. 主题
-
GitHub Theme
共9种颜色主题,数量虽然不多,但都是精品。
2. git相关
-
Git History
查看和搜索 git 日志以及图表和详细信息。
-
GitLens — Git supercharged 光标所在的那一行,提示代码更新记录,是谁修改的,多久之前修改的。
3.格式化
- Prettier ESLint
一个 Visual Studio Code 扩展,用于使用prettier-eslint包格式化 JavaScript 和 TypeScript 代码。
4.汉化
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
汉化,将VS Code汉化。
5.在浏览器中打开 html 文件
-
open in browser
右击
html
文件,选择open in Default Browser
即可在默认浏览器中打开。
6.图标美化
- vscode-icons
- Material Icon Theme
这两种风格差不多,都是精品,Material Icon Theme
图标稍大一点,个人更喜欢 Material Icon Theme 。
五、其他设置
1. 取消自动保存
在 文件 > 首选项 > 设置 中找到自动保存这一项,也可以搜索,将其设置为 off
即可。
WAIT...
下一篇: 第三节:VS Code界面设置详解