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 - 简书
3.7 TBD... 后续补充 .... |
