编辑器设置
Vscode 设置
{
"files.eol": "\n", // 换行符
"editor.tabSize": 2, // 一些插件会根据文件类型覆盖该配置。 比如下面一行
"vetur.format.options.tabSize": 2, // 安装vetur插件时配置
"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化程序设置为prettier
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode" // 针对js文件单独设置格式化程序
}
}
EditorConfig 配置
必须有EditorConfig for VS Code 插件才会生效
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
配置文件优先级
会从根目录起往找上级.editorconfig 文件直到找到root=true 为止
编辑器插件
必要的
EditorConfig for VS Code
项目纬度编辑器配置统一工具。(prettier也会读取改配置，进行格式化优先级参考prettier说明)
prettier
代码美化插件，一般prettier有两种方案， 一种是vscode插件， 一种是npm 安装到项目中，通过git hooks 在提交阶段进行prettier， 两种可以结合使用。两者可以共用一套配置。
eslint
stylelint
Vetur（vue2）
社区第三方的插件，对于vue2 的支持比较完善，如果仅进行vue2开发，推荐此插件。
但是Vetur 插件对于 ts 几乎没有支持，同时伴随着 vue3 和最近的 vue3.2 的出世，Vetur 几乎已经不能支持 vue 单文件组件了，ts 自然是不支持的，但还有一些 vue3 的新特性，比如： vue3 的 template 不再需要写根标签了，vetur 无法做很好的适配。
Volar（vue3）
Volar， vue 官方开发的vscode插件，支持vue3和部分vue2，在使用前需要禁用 vetur 以避免冲突。
弥补了Vetur 对于ts 和 Vue3语法支持不够完善的不足。还有其他的一些代码转换的功能。
ES7+ React/Redux/React-Native snippets （React）
ES7+ React/Redux/React-Native snippets
推荐的
gitLens
git 图形化工具，跟vscode 自带git工具有所区分，主要方便查看文件变更历史，行变更历史，提交日志等，是对于git log 日志的分析归类。方便代码溯源。
Auto Import
函数变量自动引入。
change-case
命名规则切换， 可以自由选择大驼峰，小驼峰，常量, 帕斯卡等17种命名规则等转换。
Project Manager
Project Manager 官方默认的工作区最近项目有数量限制，历史的项目想要打开需要重新打开文件夹，推荐此插件可以管理多个工程，添加标签分类等
Code Runner
Code Runner 运行多种语言的代码片段或代码文件 除了chrome控制台外，你还可以选择在此执行。 
除了js外还支持C，C++，Java，JavaScript，PHP，Python，Perl，Perl 6，Ruby，Go，Lua，Groovy，PowerShell，BAT / CMD，BASH / SH，F#Script，F#（.NET Core），C#Script，C#（.NET Core），VBScript， TypeScript，CoffeeScript，Scala，Swift，Julia，Crystal，OCaml Script，R，AppleScript，Elixir，Visual Basic .NET，Clojure，Haxe，Objective-C，Rust， Racket， Scheme， AutoHotkey， AutoIt， Kotlin， Dart， Free Pascal， Haskell， Nim， D， Lisp， Kit， V， SCSS， Sass， CUDA， Less， Fortran， Ring， Standard ML
其他的
Debugger for Chrome
已废弃， 内置JavaScript Debugger可替代
Bracket Pair Colorizer
功能已内置，可以卸载。
Document This
功能已内置，可以卸载。
CSS Peek
这个插件只是用于查找html的外部css样式，对于vue、react等文件是不起作用的，并且目前处于失效中
Beautify
推荐统一使用prettier
import-cost
会引起CPU占用过高。不推荐
SVG Viewer
停止维护， 可以使用vscode-svg2
TSLint
Tslint 本身已经废弃，Ts 相关的lint规则被集成到了Eslint插件中
setting sync
JavaScript (ES6) code snippets
2年没更新了，可以使用ES7+ React/Redux/React-Native snippets 替代， 更全更多。
调试配置
客户端
- 项目启动后, 选择需要断点的位置点击行号。
- 按
F5, 选择 webapp chrome - 自动生成lanuch.json配置文件，将url改成项目启动url
- 再次按
F5, 启动调试。自动打开chrome浏览器。 - 进行调试即可。
服务端
某些场景下我们要在node环境进行调试，比如Nuxt环境，或者调试vue-cli 调试启动命令，那么我们就需要使用到服务端调试。
按F1, 输入Debug: Toggle Auto Attach,
- 始终 每一个node进程都会开启调试模式
- 仅带标识 仅带有 --inspect 标识才会开启
- 智能 运行node_modules未包含脚本时
- 禁用 所有进程都不开启
根据自己情况选择一种。如果选择始终，记得调试完成后禁用。
默认配置说明
# win
ctrl + shift + p
# mac
Fn + F1
# 命令行输入
open default settings
常用快捷键
Ctrl + K Ctrl + S 查看所有快捷键
下面列举部分常用快捷键， 以windows为例，mac 上大部分快捷键相同，使用Comand 代替Ctrl
| 平台 | 键盘 |
|---|---|
| macOS | Ctrl, Shift, Alt, Cmd |
| Windows | Ctrl, Shift, Alt, Win |
| Linux | Ctrl, Shift, Alt, Meta |
| 快捷键 | 描述 |
|---|---|
| Ctrl + Shift + P，F1 | 显示命令面板 |
| Ctrl + P | 快速打开 |
| Ctrl + Shift + N | 打开新窗口 |
| Ctrl + Shift + W | 关闭新窗口 |
| Ctrl + / | 添加关闭注释 |
| Ctrl+Shift+K | 删除当前行 |
| Ctrl+Shift+Enter | 上面插入一行 |
| Alt+Down | 下移一行 |
| Alt+Up | 上移一行 |
| Shift+Alt+Down | 下移并复制一行 |
| Shift+Alt+Up | 下移并复制一行 |
| Ctrl+Z | 撤销 |
| Ctrl+Y | 恢复 |
| Ctrl+Q | 恢复 |
| Ctrl+' | 打开终端 |
