编辑器设置

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， 两种可以结合使用。两者可以共用一套配置。

prettier配置

 

eslint

eslint配置

 

stylelint

stylelint配置

 

Vetur（vue2）

社区第三方的插件，对于vue2 的支持比较完善，如果仅进行vue2开发，推荐此插件。

但是Vetur 插件对于 ts 几乎没有支持，同时伴随着 vue3 和最近的 vue3.2 的出世，Vetur 几乎已经不能支持 vue 单文件组件了，ts 自然是不支持的，但还有一些 vue3 的新特性，比如： vue3 的 template 不再需要写根标签了，vetur 无法做很好的适配。

 

Volar（vue3）

Volaropen in new window， 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 Manageropen in new window 官方默认的工作区最近项目有数量限制，历史的项目想要打开需要重新打开文件夹，推荐此插件可以管理多个工程，添加标签分类等

 

Code Runner

Code Runneropen in new window 运行多种语言的代码片段或代码文件 除了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 替代， 更全更多。

 

调试配置

客户端

1. 项目启动后, 选择需要断点的位置点击行号。
2. 按F5, 选择 webapp chrome
3. 自动生成lanuch.json配置文件，将url改成项目启动url
4. 再次按F5, 启动调试。自动打开chrome浏览器。
5. 进行调试即可。

 

服务端

某些场景下我们要在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+'	打开终端