vscode配置分为用户/远程/工作区。其中用户设置我用来放一些全局的配置，工作区用来放每个项目独自用到的插件配置。如果某些配置只希望在远程上起作用，就在远程里单独配置。
进入配置页面的方法是：
- 点击左下角的齿轮
- 点击设置
默认进入的是用户配置，点击对应的标签即可切换至对应的配置页面，如点击工作区，就会切至工作区配置。
一般我们使用json文件进行配置设置，在配置页面的左上角，有个打开设置(json)按钮
，点击后即可打开settings.json，同样，在哪个标签页打开的配置文件，就是设置哪个类别的配置。
公共配置
以下为我的公共配置，放在用户配置文件中。这个是全局生效的。
{
/*远程连接配置，安装远程连接插件配置远程主机后会自动生成，也可以自己手动更改*/
"remote.SSH.remotePlatform": {
"ip": "linux"
},
/*editor有关编辑区域的配置*/
"editor.cursorBlinking": "smooth", //使编辑器光标的闪烁平滑，有呼吸感
"editor.formatOnPaste": true, //在粘贴时格式化代码
"editor.formatOnType": true, //敲完一行代码自动格式化
"editor.formatOnSave": true, //保存时格式化代码
"editor.smoothScrolling": true, //使编辑器滚动变平滑
"editor.tabCompletion": "on", //启用Tab补全
"editor.fontFamily": "'Consolas', '微软雅黑'", //字体设置
"editor.fontLigatures": true, //启用字体连字
"editor.rulers": [80], //设置后会出现个垂直标尺
"workbench.colorCustomizations": {
"editorRuler.foreground": "#ff4081"//设置垂直标尺的颜色
},
/*workbench*/
"workbench.startupEditor": "none", //新的工作空间开启时是否开启未定义文件
"workbench.list.smoothScrolling": true, //使文件列表滚动变平滑
"workbench.editor.untitled.hint": "hidden", //隐藏新建无标题文件时的“选择语言？”提示
/*terminal*/
"terminal.integrated.cursorBlinking": true, //终端光标闪烁
"terminal.integrated.rightClickBehavior": "default", //在终端中右键时显示菜单而不是粘贴
/*files*/
"files.autoGuessEncoding": true, //让VScode自动猜源代码文件的编码格式
"files.insertFinalNewline": true, //自动在末尾加空行
"files.exclude": {
//隐藏一些碍眼的文件夹
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/tmp": true,
"**/node_modules": true,
"**/bower_components": true
},
"files.watcherExclude": {
//不索引一些不必要索引的大文件夹以减少内存和CPU消耗
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/node_modules/**": true,
"**/tmp/**": true,
"**/bower_components/**": true,
"**/dist/**": true
},
/*定义文件类型*/
"files.associations": {
// "**/templates/*.html": "django-html",
"**/templates/**/*.html": "django-html",
"**/*.html": "html"
},
/*window*/
"window.menuBarVisibility": "visible", //在全屏模式下仍然显示窗口顶部菜单
"window.dialogStyle": "custom", //使用更具有VSCode的UI风格的弹窗提示
"workbench.iconTheme": "vscode-icons", //设置文件图标主题
"workbench.colorTheme": "Dracula Soft",//设置界面主题
"explorer.confirmDragAndDrop": false, //在文件管理器中拖放文件时是否需要确认
/*formatter*/
"[html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[django-html]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[javascript]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[css]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
"[json]": {
"editor.defaultFormatter": "HookyQR.beautify"
},
/*插件Highlight Matching Tag设置，选择html标签后会在匹配的标签下显示下划线*/
"highlight-matching-tag.styles": {
"opening": {
"name": {
"underline": "yellow"//设置高亮下划线的颜色
}
}
},
/*指定哪些文件的格式化工具为prettier(弃用，对django-html支持不友好)*/
/*"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},*/
/*prettier(弃用，对django-html支持不友好)*/
/* "prettier.semi": false, // 去掉代码结尾的分号
"prettier.printWidth": 140, // 超过最大值换行
"prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.singleQuote": true, // 使用单引号替代双引号
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号*/
"javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 让函数(名)和后面的括号之间加个空格
/*python代码格式化*/
"python.formatting.provider": "yapf" // python代码格式化工具
}
项目配置
单独为某个项目做的配置，我放在了工作区中，会在当前项目根目录里生成settings.json，目前没有用到太多
{
"git.enabled": false
}
相关插件
# python插件
插件：Pylance
功能：代码检查、自动导入、代码补全等
安装：vscode插件市场
设置："python.languageServer": "Pylance" //不设置貌似也没影响，装了就可以用了
插件：yapf
功能：代码格式化
安装：pip install yapf
设置："python.formatting.provider": "yapf"
# 前端插件
插件：Auto Close Tag
功能：自动补全闭合标签（如输入<div>会自动补上</div>）
安装：vscode插件市场
设置：无
插件：HTML Snippets
功能：html代码补全（如输入div自动补全<div></div），可与Auto Close Tag二选一
安装：vscode插件市场
设置：无
插件：Auto Rename Tag
功能：自动重命名标签（和Auto Close Tag差不多，只不过是改名字）
安装：vscode插件市场
设置：无
插件：Highlight Matching Tag
功能：高亮配对标签
安装：vscode插件市场
设置："highlight-matching-tag.styles": { "opening": { "name": { "underline": "yellow" } } } （默认背景色灰色，这里的设置是标签打开时标签名下划线的颜色为黄色）
插件：HTML Boilerplate
功能：html结构快速生成，新建html，输入html，选择html:5或输入！再按tab键，即可快速生成html结构
安装：vscode插件市场
设置：无
插件：JavaScript (ES6) code snippets（未使用）
功能：提供了一些常用的JavaScript (ES6)代码片段
安装：vscode插件市场
设置：无
插件：open in browser
功能：添加右键菜单快捷键，在html文件中点击右键-选择open in default browser，即可在浏览器快捷打开
安装：vscode插件市场
设置：无
插件：Prettier - Code formatter(弃用，对django-html支持不友好)
功能：前端代码格式化插件，包含html、css、js
安装：vscode插件市场
设置：
"prettier.semi": false, // 去掉代码结尾的分号
"prettier.printWidth": 140, // 超过最大值换行
"prettier.trailingComma": "none", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）
"prettier.singleQuote": true, // 使用单引号替代双引号
"prettier.arrowParens": "avoid", // (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
插件：beautify
功能：html css js格式化插件
安装：vscode插件市场
设置：
"beautify.language": {
"html": [
"htm",
"html",
"django-html"
]
},
插件：ESLint(未使用，prettier满足了我的需求，这个就没研究了)
功能：js等语法检查，和Prettier - Code formatter配合使用
安装：vscode插件市场
设置：
"eslint.validate": [
"javascript",
"javascriptreact"
],
插件：CSS Peek
功能：按住ctrl，鼠标移至标签属性名即可快速查看css样式，点击鼠标左键即可快速跳转至css样式行，仅支持css样式写在单独文件
安装：vscode插件市场
设置：无
插件：HTML CSS Support
功能：css代码补全提示
安装：vscode插件市场
设置：无
插件：Image preview
功能：引入图片后，在代码左侧可看到小的预览图
安装：vscode插件市场
设置：无
# 公用插件
插件：indent-rainbow
功能：缩进区域背景高亮
安装：vscode插件市场
设置：无
插件：Bracket Pair Colorizer
功能：不同颜色高亮不同括号
安装：vscode插件市场
设置：无
插件：Path Intellisense
功能：文件路径联想
安装：vscode插件市场
设置：无（可以配置联想规则，我这里没做任何配置，只是输入文件时自动联想）
插件：Chinese (Simplified)
功能：简体中文包
安装：vscode插件市场
设置：无
插件：Dracula Official
功能：主题包
安装：vscode插件市场
设置："workbench.colorTheme": "Dracula Soft"
插件：Project Manager
功能：在左边栏添加个文件夹图标，点击图标进去后上方有个保存按钮，点击即可将当前项目储存在此处，下次可通过这里快速打开
安装：vscode插件市场
设置：无
插件：vscode-icons
功能：根据vscode文件夹和文件的属性展示不同的图标
安装：vscode插件市场
设置："workbench.colorTheme": "Dracula Soft",
