| 
文档阅读
Visual Studio Code - Mac, Linux, Windows
vscode - 中文文档
https://jingyan.baidu.com/article/fec4bce21062beb2618d8ba6.html
JavaScript Programming with Visual Studio Code -吗关于使用IDE使用js开发的文档介绍
vscode 代码格式化_慕课手记
vscode汉化
写代码头疼？那你肯定没用过这些 VSCode 插件
知乎 - 为什么vscode很多人用？
我最终还是选择了VS code!
高效使用VSCode的9点建议 - 知乎
Note:
所有的设置，都可以登陆同步到github账号上，换设备直接登陆账号即可，
同步配置环境信息，需要几一点时间，并不是立马就同步完成，期间不要做配置上的修改，最好不要做任何修改，
这里踩了坑，发现自己的主题UI，字体都不对，最后折腾了一番，才找回来，保持各个设备配置一致。
配置文件：
Mac
~/Library/Application Support/Code/User/settings.json
Windows
C:\Users\williamning\AppData\Roaming\Code\User\settings.json
环境
Win10 64位 专业版
Mac pro
简要介绍
VS Code（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器。几乎完美的编辑器。
为什么选择vscode, 参见下方
https://www.zhihu.com/question/365621890/answer/976550502 // 知乎 - 为什么vscode很多人用？
https://zhuanlan.zhihu.com/p/93239107 // 我最终还是选择了VS code！
1. 下载安装 Download Visual Studio Code - Mac, Linux, Windows //官网下载页面 vscode 下载链接 选择相应的版本, 傻瓜式安装即可 2. 使用 2.1.快速生成dom文档结构
新建HTML,英文输入法下输入!, 会出现提示!与!!, 选择第一个回车即可.
2.2 同时打开多个项目
在正常情况下vscode一般只能打开一个项目,
快捷键：shift+ctrl +n 如下所示, 成功打开.
或者 file->open new window [文件->新建窗口]
Note: // 20201102 周一 科学馆
使用命令行快速打开vscode打开某个文件夹
或者, 打开当前目录
2.3 快速生成vue代码片段
前提：安装有识别vue文件的插件，如vetur 见下方插件栏
a. 打开vscode，找到用户代码片段，选择vue.json文件打开，如下图
b. 输入vue， 选择vue.json
c. 将以下代码复制粘贴到vue.json里面，保存 //这里使用第一种
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>\n",
" </div>",
"</template>\n",
"<script>",
"export default {",
" data () {",
" return {",
" msg: ''",
" }",
" },",
" methods: {\n",
" }",
"}",
"</script>\n",
"<style scoped>\n",
"</style>\n"
],
"description": "Log output to console"
}
}
或者
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div></div>",
"</template>",
"",
"<script>",
"export default {",
"data() {",
"return {",
"",
"}",
"},",
"//生命周期 - 创建完成（访问当前this实例）",
"created() {",
"",
"},",
"//生命周期 - 挂载完成（访问DOM元素）",
"mounted() {",
"",
"}",
"}",
"</script>",
"<style scoped>",
"/* @import url(); 引入css类 */",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
d. 新建 xxx.vue文件，输入 vue 然后回车，即可快速生成vue代码片段
2.4 快捷键
1. 格式化代码
shift+alt+f //格式化代码, 或者使用 右键->格式化文档[format document]
备注:
但是似乎并不是那么完美, 有些地方并不是很好的排版, 另外还要多一步格式化操作.
推荐使用vetur插件进行settings.json的配置. 见下面 [插件安装使用-->保存自动格式化代码]
2. shift+ctrl+p //打开搜索框
或者 Ctrl+P //打开文件搜索框 再按下> 即可
3. 打开控制台
ctrl+`
或者点击 下面
2.5 显示中文语言 // 但是不推荐, 一直显示中文[最好稍微熟悉之后, 仍然使用语言英文版]
1. 按下shift+ctrl+p 打开搜索框, 输入 configure 找到配置语言显示配置项.
2. 选择install additional languages ...
3. 选择中文(简体), install 即可
重新打开vscode即可,如下所示:
备注:
如果不能成功, 尝试如下方法
2.6 修改问题, 一直提示xx文件较新, 如何处理, 点开'配置', 选择'overwriteFileOnDisk', 如果选择'askUser'会总是提示.[挺烦] 
2.7 VScode如何自动换行设置
临时自动换行显示：// 关掉窗口或者vscode 恢复原样
查看--> 切换自动换行 //或者直接按Alt+Z
永久自动换行显示：
进入文件>首选项>设置，打开设置界面，在常用设置下 [可以直接搜索Word Wrap] 找到Editor:Word Wrap选项，
默认为off, 设置为on即可。
2.8 vscode 打开新文件覆盖旧文件 // 20200802 周日
解决办法:
settings-> Workbench->Editor Management 里去掉Enable Preview 的勾选项[第二项即可]，
此时单击的文件都会被保留.
此时再打开文件, 不会覆盖之前的打开的文件窗口.
2.9 使用正则进行查找，替换 // 20210609 周三 家里
\d+.-.-.
可以匹配
8761-1-1
... 3. 插件安装使用 推荐:
https://blog.csdn.net/Wjhsmart/article/details/105705649 // 写代码头疼？那你肯定没用过这些 VSCode 插件
3.1 安装vue类型识别插件， 对.vue文件会有语法高亮, 而且支持保存自动格式化代码[即按下ctrl+S即可]
vetur
输入vetur
点击install等待即可.
3.2 保存自动格式化代码配置 如果你想快速配置自己的 vscode 支持保存自动格式化功能 一、安装以下几个 vscode 扩展程序： ESLint Prettier - Code formatter 或者 Beautify --- 不过个人还是更加喜欢前者的风格, 这个因人而异 Vetur [vetur + prettier + eslint 来统一 vue 编码风格] 如图：
 二、打开 settings 文件 打开方式： 先按步骤打开 setting 界面， Code --> preferences -->setting （也可以快捷键 command + ,（mac） 直接打开） 现在看到的是界面配置模式，点击右上角的三个点（如下图），选择打开 settings.json 文件 
有时: 
三、将下面配置添加到 setting.json 文件中 注： 此配置支持 CSS、HTML、JS 和 Vue 等文件的格式化。大家可以参考，然后结合自己的需求去配置。
如果没有特殊需求，也可以拿去直接用.
{
// tab 大小为2个空格
"editor.tabSize": 2,
// 100 列后换行
"editor.wordWrapColumn": 100,
// 保存时格式化
"editor.formatOnSave": true,
// 开启 vscode 文件路径导航
"breadcrumbs.enabled": true,
// prettier 设置语句末尾不加分号
"prettier.semi": false,
// prettier 设置强制单引号
"prettier.singleQuote": true,
// 选择 vue 文件中 template 的格式化工具
"vetur.format.defaultFormatter.html": "prettyhtml",
// 显示 markdown 中英文切换时产生的特殊字符
"editor.renderControlCharacters": true,
// 设置 eslint 保存时自动修复
"eslint.autoFixOnSave": true,
// eslint 检测文件类型
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue"
"autoFix": true
}
],
// vetur 的自定义设置
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
}
}
备注: json文件中不能有注释, 所以, 如果推荐使用下面不带注释的内容. 如果使用上面也可以, 但是后面配置, 只能手动去输入json文件中配置[通过鼠标点击不能生效]
{
"editor.formatOnPaste": true,
"editor.tabSize": 2,
"editor.wordWrapColumn": 100,
"editor.formatOnSave": true, //也可以设置为false,关闭自动保存格式化, 因为有时候不想. 记住把这行注释删除.
"breadcrumbs.enabled": false,
"prettier.semi": false,
"prettier.singleQuote": true,
"vetur.format.defaultFormatter.html": "prettyhtml",
"editor.renderControlCharacters": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
"vetur.format.defaultFormatterOptions": {
"prettier": {
"singleQuote": true,
"semi": false
}
}
}
保存配置，保存格式化代码就完成了，赶快去试试吧 ... 3.3 汉化插件
见上面 '显示中文语言'
3.4 安装git查看历史记录插件 // 前提是已经安装过git [git bash]
GitLens — Git supercharged
其中之一: [显示提交记录作者]
GitLens — Git supercharged - Visual Studio Marketplace
插入 安装的插件列表 
其中: Debugger for Chrome 可以帮助我们直接在项目源文件中进行代码调试 --- 20210319 公司 周五 3.5 文件图标主题 
Material Icon Theme Material Icon Theme - Visual Studio Marketplace 
可以看到, 比vscode默认的icon好看的多. 或者 vscode-icons vscode-icons - Visual Studio Marketplace 3.6 颜色主题
One Dark Pro
One Dark Pro - Visual Studio Marketplace
Dracula Official
Dracula Official - Visual Studio Marketplace
Atom One Dark Theme // 个人比较喜欢 -- 目前正在使用
Atom One Dark Theme - Visual Studio Marketplace
Palenight Theme
Palenight Theme - Visual Studio Marketplace
Power Mode // 带有酷炫效果
Power Mode - Visual Studio Marketplace
Panda Theme // 个人也比较喜欢
Panda Theme - Visual Studio Marketplace
调整字体样式, 以及大小与行距.
C:\Users\williamning\AppData\Roaming\Code\User\settings.json
个人比较推荐的
"editor.fontSize": 16,
"editor.lineHeight": 30,
https://segmentfault.com/q/1010000003872647 完整配置: {
"breadcrumbs.enabled": true,
"php.validate.executablePath": "D:\\wamp\\php-7.4.3-Win32-vc15-x64\\php.exe",
"git.autofetch": true,
"explorer.confirmDelete": false,
"explorer.confirmDragAndDrop": false,
"editor.wordWrap": "on",
"javascript.updateImportsOnFileMove.enabled": "always",
"editor.rename.enablePreview": false,
"workbench.editor.enablePreview": false,
"workbench.editor.enablePreviewFromQuickOpen": false,
"window.zoomLevel": 0,
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"html.format.unformatted": "",
"editor.wordSeparators": "`~!@%^&*()-=+[{]}\\|;:'\",.<>/?",
"diffEditor.ignoreTrimWhitespace": false,
"files.eol": "\n",
"git.enableSmartCommit": true,
"[typescriptreact]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"typescript.updateImportsOnFileMove.enabled": "always",
"[javascript]": {
"editor.defaultFormatter": "vscode.typescript-language-features"
},
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Atom One Dark",
"editor.fontSize": 16,
"editor.lineHeight": 30,
"editor.fontLigatures": true,
}
换字体
vscode中修改字体,使用Fira Code - 简书
#20240808 周四 3.7 源代码管理-传入传出(视图更改配置开关) 
升级完, 就懵了 这什么玩意儿, 一大坨乱七八糟, 看着都决定压抑(真不知道vscode开发者怎么想的) 网上一搜, 网友已经解决了~ 设置 -> SCM: Show History Graph 去掉勾选即可~ 参考: 【Visual Studio Code】源代码管理 传入/传出 更改配置开关_vscode传入传出-CSDN博客 ... 后续补充 .... | 
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
