优化VSCode：让你的VSCode变得好⽤⼜美观
⼀、基本设置
以下是setting.json的基本内容，可以优化vscode写代码体验，设置项的意义已经注释：
{
/*editor*/
"editor.cursorBlinking": "smooth",//使编辑器光标的闪烁平滑，有呼吸感
"editor.formatOnPaste": true,//在粘贴时格式化代码
"editor.formatOnType": true,//敲完⼀⾏代码⾃动格式化
"editor.smoothScrolling": true,//使编辑器滚动变平滑
"editor.tabCompletion": "on",//启⽤Tab补全
"editor.fontFamily": "'Jetbrains Mono', '思源⿊体'",//字体设置，个⼈喜欢Jetbrains Mono作英⽂字体，思源⿊体作中⽂字体
"editor.fontLigatures": true,//启⽤字体连字
"editor.detectIndentation": false,//不基于⽂件内容选择缩进⽤制表符还是空格
visual studio和vs code的区别/*
因为有时候VSCode的判断是错误的
*/
"editor.insertSpaces": true,//敲下Tab键时插⼊4个空格⽽不是制表符
"pyWithSyntaxHighlighting": false,//复制代码时复制纯⽂本⽽不是连语法⾼亮都复制了
"editor.suggest.snippetsPreventQuickSuggestions": false,//这个开不开效果好像都⼀样，据说是因为⼀个bug，建议关掉
"editor.stickyTabStops": true,//在缩进上移动光标时四个空格⼀组来移动，就仿佛它们是制表符(\t)⼀样
"editor.wordBasedSuggestions": false,//关闭基于⽂件中单词来联想的功能（语⾔⾃带的联想就够了，开了这个会导致⽤vscode写MarkDown时的中⽂引号异常联想）
"editor.linkedEditing": true,//html标签⾃动重命名（喜⼤普奔！终于不需要Auto Rename Tag插件了！）
"editor.wordWrap": "on",//在⽂件内容溢出vscode显⽰区域时⾃动折⾏
"editor.cursorSmoothCaretAnimation": true,//让光标移动、插⼊变得平滑
"derControlCharacters": true,//编辑器中显⽰不可见的控制字符
"derWhitespace": "boundary",//除了两个单词之间⽤于分隔单词的⼀个空格，以⼀个⼩灰点的样⼦使空格可见
/*terminal*/
"terminal.integrated.defaultProfile.windows": "Command Prompt",//将终端设为cmd，个⼈⽐较喜欢cmd作为终端
"terminal.integrated.cursorBlinking": true,//终端光标闪烁
"terminal.integrated.rightClickBehavior": "default",//在终端中右键时显⽰菜单⽽不是粘贴（个⼈喜好）
/
*files*/
"files.autoGuessEncoding": true,//让VScode⾃动猜源代码⽂件的编码格式
"files.autoSave": "onFocusChange",//在编辑器失去焦点时⾃动保存，这使⾃动保存近乎达到“⽆感知”的体验
"lude": {//隐藏⼀些碍眼的⽂件夹
"**/.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
},
/*workbench*/
"workbench.list.smoothScrolling": true,//使⽂件列表滚动变平滑
"ablePreview": false,//打开⽂件时不是“预览”模式，即在编辑⼀个⽂件时打开编辑另⼀个⽂件不会覆盖当前编辑的⽂件⽽是新建⼀个标签页
"workbench.editor.wrapTabs": true,//编辑器标签页在空间不⾜时以多⾏显⽰
"workbench.editor.untitled.hint": "hidden",//隐藏新建⽆标题⽂件时的“选择语⾔？”提⽰（个⼈喜好，可以删掉此⾏然后Ctrl+N打开⽆标题新⽂件看看不hidden的效果）
/*explorer*/
"firmDelete": false,//删除⽂件时不弹出确认弹窗（因为很烦）
"firmDragAndDrop": false,//往左边⽂件资源管理器拖动东西来移动/复制时不显⽰确认窗⼝（因为很烦）
/*search*/
"search.followSymlinks": false,//据说可以减少vscode的CPU和内存占⽤
/
*window*/
"uBarVisibility": "visible",//在全屏模式下仍然显⽰窗⼝顶部菜单（没有菜单很难受）
"window.dialogStyle": "custom",//使⽤更具有VSCode的UI风格的弹窗提⽰（更美观）
/*debug*/
"debug.internalConsoleOptions": "openOnSessionStart",//每次调试都打开调试控制台，⽅便调试
"debug.showBreakpointsInOverviewRuler": true,//在滚动条标尺上显⽰断点的位置，便于查断点的位置
"lBarLocation": "docked",//固定调试时⼯具条的位置，防⽌遮挡代码内容（个⼈喜好）
"debug.saveBeforeStart": "nonUntitledEditorsInActiveGroup",//在启动调试会话前保存除了⽆标题⽂档以外的⽂档（毕竟你创建了⽆标题⽂档就说明你根本没有想保存它的意思（⾄少我是这样的。））"TaskErrors": "showErrors",//预启动任务出错后显⽰错误，并不启动调试
/*html*/
"html.format.indentHandlebars": true//在写包含形如{{xxx}}的标签的html⽂档时，也对标签进⾏缩进（更美观）
}
好⽤的插件及其相关设置
以下列出了⼀些好⽤的插件及其相关设置，按使⽤情景分类。
⾃⾏选择需要的安装。
⼆、通⽤
1、Chinese (Simplified) Language Pack for Visual Studio Code：必不可少的中⽂插件
你的vscode！让界⾯、设置等都变成中⽂！
配置
⽆需配置，即装即⽤，记得装完后重启vscode。
2、驼峰翻译助⼿：不再让取变量名成为⼀件难事
英⽂不好写代码起变量名时候你是否⼀直这样⼲?
打开翻译软件
输⼊中⽂
复制翻译结果
粘贴英⽂之后修改命名格式（⽐如⼩驼峰、⼤驼峰）
现在你只需要按动图这样来就可以了：
选中输⼊按快捷键⼀键得到翻译结果(悄悄告诉你直接选择英⽂⽂本还可以跳过翻译快速改变命名格式)
选择你喜欢的命名格式（⽐如⼩驼峰、⼤驼峰）
快捷键
win: "Alt+shift+t"
mac": "cmd+shift+t"
3、Error Lens：在⾏内突出显⽰代码ERROR/WARNING
配置
在settings.json中加⼊如下内容作为配置，设置项的意义已经注释：
"errorLens.gutterIconsEnabled": true,//在⾏号的左边显⽰⼩错误图标（个⼈喜好）
"errorLens.fontStyleItalic": true//使错误信息的字体为斜体（个⼈喜好）
5、Bracket Pair Colorizer 2：美观的彩虹括号，让你不再为繁杂的括号烦恼
使⽤前：
使⽤后：
配置
⽆需配置，即装即⽤，记得装完后重启vscode。
6、Code Runner：以最简洁的⽅式运⾏任何代码
不需要繁琐的“调试”配置，Code Runner可以快速地以最简洁的⽅式运⾏你的任何代码！
⽀持超过40种语⾔！
⼀键运⾏
安装好Code Runner插件之后，打开你所要运⾏的⽂件，有多种⽅式来快捷地运⾏你的代码：
键盘快捷键 Ctrl+Alt+N
快捷键 F1 或 Ctrl+Shift+P 调出命令⾯板, 然后输⼊ Run Code
在编辑区右键选择 Run Code
在侧边栏⽂件管理器中右键你要运⾏的⽂件，选择 Run Code
右上⾓的运⾏⼩三⾓按钮
这么多运⾏代码的⽅式，够便捷不？
停⽌运⾏
如果要停⽌代码运⾏，也有如下⼏种⽅式：
键盘快捷键 Ctrl+Alt+M
快捷键 F1 或 Ctrl+Shift+P 调出命令⾯板, 然后输⼊ Stop Code Run
配置
想要舒服的使⽤ Code Runner 插件，你需要进⾏⼀些配置。
提⽰：
事实上，通过控制台输⼊命令的⽅式能运⾏⼤部分代码，⽽Code Runner的原理就是帮你在控制台输⼊这些命令。
因此，Code Runner并不能提供运⾏你的代码所需的环境或编译器，你仍需要下载安装这些环境或编译器。
在settings.json中加⼊如下内容作为配置，设置项的意义已经注释：
"code-runner.runInTerminal": true,//在控制台运⾏代码，防⽌乱码和不能输⼊
"utorMap": {
"javascript": " cls && cd /d $dir && node $fullFileName && pause",
"python": " cls && cd /d $dir && \"$pythonPath\" -u $fullFileName && pause",
"bat": " cls && cd /d $dir && $fullFileName"
/*这是每种语⾔运⾏时所执⾏命令的对应表，因为笔者使⽤的语⾔有限，这⾥只列出了javascript、python和windows批处理的命令，其他语⾔的命令可⾃⾏添加*/ /*笔者其他博客中可能会有关于对此设置项的添加或删改的内容*/
},
"code-runner.saveFileBeforeRun": true, //运⾏前⾃动保存
"code-runner.customCommand": " cls",//这使Ctrl+Alt+K这个快捷键可以快速清空控制台内容
"spectShebang": false//我是Windows系统所以不需要按shebang来运⾏
"code-runner.ignoreSelection": true,//禁⽤“运⾏选中部分的代码”功能（个⼈喜好，感觉这个功能很鸡
肋）
//需要注意的是，所有命令前都有⼀个空格，⽤来“喂给”上⼀次运⾏结尾的“请按任意键继续. . .”
运⾏效果
运⾏python：
运⾏javascript：
运⾏windows批处理：
7、VS Code Counter：统计代码⾏数
统计你的项⽬中有多少⾏代码！以及各语⾔的占⽐！
⽤法
快捷键 F1 或 Ctrl+Shift+P 调出命令⾯板, 然后输⼊ Count lines in directory 以开始统计。
统计完成会⽣成⼀个.VSCodeCounter ⽂件夹，并⾃动打开⾥⾯的报告：
例如：
三、前端开发
1、CSS Navigation：快速跳转到CSS的类定义
由于未知原因，笔者电脑上CSS Peek插件有时不起作⽤，遂采⽤更稳定的CSS Navigation作为替代品。
按住Ctrl键，⿏标移到html中的CSS类名上，可悬浮预览该类的CSS定义，此时按下⿏标左键，快速跳转到CSS定义处。效果
缺点
不能悬浮预览和跳转到html⽂件内<style>标签内的CSS类定义，只能悬浮预览和跳转到外部.css⽂件的CSS类定义处。配置
⽆需配置，即装即⽤，记得装完后重启vscode。
2、css-auto-prefix：写CSS时不再为浏览器前缀发愁
⾃动补全不同浏览器的CSS3前缀。
效果
配置
⽆需配置，即装即⽤，记得装完后重启vscode。
2、Image Preview：快速预览HTML中的图⽚
功能
当⿏标移到html⽂档中的图⽚路径上时，悬浮预览图⽚，还可跳转到侧边栏⽂件管理器中或系统⽂件管理器中
配置
安装这个插件后默认还会在⾏号左边显⽰图⽚缩略图：
笔者不太喜欢，所以通过在setting.json中添加如下配置关掉了这个功能："gutterpreview.showImagePreviewOnGutter": false
3、IntelliSense for CSS class names in HTML：⾃动补全CSS类名
⾃动补全CSS类名。
效果
配置
⽆需配置，即装即⽤，记得装完后重启vscode。
4、JS-CSS-HTML Formatter：格式化js、css、html⽂件
⽤于格式化js、css、html⽂件（其实主要是⽤来格式css⽂件，因为前两者vscode有内置格式化引擎）
配置
需要在setting.json中加⼊如下内容作为配置：
"[html]": {
"editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
},
"[javascript]": {
"editor.defaultFormatter": "lonefy.vscode-JS-CSS-HTML-formatter"
}
"[json]": {
"editor.defaultFormatter": "vscode.json-language-features"
},
⽤于把 html和 js的格式化也交给这个插件负责的同时不要把json的格式化交给它负责。
5、Live Server：实时地使⽤浏览器预览你的前端页⾯
还在浏览器⾥频繁地刷新来预览前端页⾯？忍受不了写⼀会代码就要刷新⼀下来预览页⾯？试试Live Server！⽤法
在侧边栏⽂件资源管理器中右键⽂件选择 Open with Live Server 启动：
或打开编辑 html ⽂件时点击 vscode下⽅状态栏右边的 Go Live 启动：
此时Live Server启动了⼀个服务器来实现实时预览前端页⾯。
保存⽂件时浏览器便会实时更新页⾯。
效果
停⽌
快捷键 F1 或 Ctrl+Shift+P 调出命令⾯板, 然后输⼊ Stop Live Server 以停⽌Live Server服务器。
也可以点击vscode下⽅状态栏右边的图标停⽌Live Server服务器。
注意：关闭浏览器并不会停⽌Live Server服务器，但关闭vscode可以停⽌Live Server服务器。
配置

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。