Fred-Brock 前端笔记

VSCode 插件

  1. Quokka
  2. Npm Intellisense
  3. ESlint
  4. Debugger for Chrome
  5. HTML CSS Support
  6. HTML Snippets
  7. Path Intellisense
  8. HTMLHint
  9. Atuo Rename Tag
  10. Auto Close Tag
  11. GitLens
  12. fileheader
  13. filesize
  14. vetur
  15. VueHelper
  16. Import Cost
  17. Material Theme
  18. Prettier - Code formatter
  19. Node.js Modules Intellisense (nodejs 模块提示)
  20. Theme - Oceanic Next
  21. JS Refactor（提取方法，变量）
  22. HTML Preview （HTML 预览工具）
  23. Version Lens （显示包版本信息）
  24. SCSS IntelliSense
  25. IntelliSense for CSS, SCSS class names in HTML, Slim and SCSS
  26. Class autocomplete for HTML
  27. Inline HTML
  28. Template Literal Editor （模板字符串语言注入）
  29. koroFileHeader (注释插件)
  30. Debugger for chrome
  31. Javascript (ES6) Code Snippets
  32. ESLint
  33. Live server
  34. Bracket Pair Colorizor
  35. Auto Rename Tag
  36. Quokka
  37. 8Path Intellisense
  38. Project Manager
  39. Editor Config
  40. Sublime Text Keymap
  41. Browser Preview
  42. Git Lens
  43. Polacode
  44. Prettier
  45. Better Comments
  46. Git Link
  47. VS Code Icons
  48. Material Icon Theme
  49. Settings Sync
  50. Better Align
  51. VIM
  52. Import Cost
  53. Code Spell Checker

VSCode 快捷键

基本编辑

Ctrl + X : 剪切行 editor.action.clipboardCutAction Ctrl + C : 复制行 editor.action.clipboardCopyAction Ctrl + Shift + K: 删除行 editor.action.deleteLines Ctrl + Enter: 向下新插入一行 editor.action.insertLineAfter Ctrl + Shift + Enter: 向上新插入一行 editor.action.insertLineBefore Alt + ↓: 下移当前行代码 Alt + ↑ : 上移当前行代码 Shift + Alt + 上: 向上复制一行 Shift + Alt + ↓ : 向下复制一行 Ctrl + D: 选中 Ctrl + U : 撤回上一个光标操作 Shift + ALT + I: Ctrl + F2: 选择当前出现的单词 editor.action.changeAll Ctrl + Alt + ↓: 向下插入光标 Ctrl + Alt + ↑ : 向上插入光标

其他

命令调试面板: Ctrl + Shift + P. 快速打开文件: Ctrl + P

显示状态栏: Ctrl+Shift+M

跳转错误信息: F8 或者 Shift+F8

关联类型文件语言模式: Ctrl+K M

修改主题: Ctrl+K Ctrl+T

自定义键盘快捷方式;Ctrl+K Ctrl+S

打开 Setting: Ctrl+,

打开扩展:Ctrl+Shift+X

集成终端: Ctrl +

切换侧边栏: Ctrl+B

禅模式 : Ctrl+K Z

zen mode

退出连按两下Esc

分栏:Ctrl+\

分栏选择: Ctrl+1,Ctrl+2 ....

打开资源管理器栏: Ctrl+Shift+E

移动到链接如:'src',快速创建或者打开一个文件:Ctrl+click

create and open file

关闭当前打开的文件夹:Ctrl+F4

导航历史记录

  • 浏览整个历史 : Ctrl+Tab
  • 向后导航历史: Alt+Left
  • 向前导航历史:Alt+Right

多光标选择: Alt+Click(Option+click on macOS). 光标选择上方或者下方:Ctrl+Alt+Up or Ctrl+Alt+Down

当前选项所有出现的位置:Ctrl+Shift+L

添加单个光标选择: Ctrl+D

矩形光标选择: Shift+Alt (Shift+Option on macOS) 同时拖动鼠标

快速滚动: Alt

复制行 上/下: Shift+Alt+Up or Shift+Alt+Dow copy line down

移动 上/下:Alt+Up or Alt+Down

move line up and down

转到文件中的符号:Ctrl+Shift+O

导航到特定的行: Ctrl+G

取消光标位置:Ctrl+U

修剪尾部空格:Ctrl+K Ctrl+X

Code 格式化:

  • 选中区域格式化:Ctrl+K Ctrl+F
  • 文档格式化:Ctrl+K Ctrl+F

代码折叠:Ctrl+Shift+[ and Ctrl+Shift+]

选中当前行:Ctrl+L

导航到文件开头和结尾:Ctrl+Home and Ctrl+End

Markdown preview:Ctrl+Shift+V

Side Markdown preview:Ctrl+K V

上下文:Alt+F12

peek

转到定义区:F12 或者Ctrl+click (Cmd+click on macOS)

go to definition

查看参考:Shift+F12

Git 集成:Ctrl+Shift+G

查看输出:Ctrl+Shift+U

调试配置:Ctrl+Shift+P ---> Debug: Open launch.json

VSCode 配置

"editor.formatOnSave": true,
"editor.tabSize": 4,
"editor.insertSpaces": true // tab 或者空格 insertSpaces
"editor.fontLigatures": true // 使用连字体
"files.autoSave": "afterDelay" // 自动保存文件
"editor.formatOnSave": true //保存格式化代码
"editor.tabSize": 4 //缩进
"[languageid]": {  // 特定语言Setting "[typescript]":{}

}
"files.associations": { // 创建文件关联
    ".database": "json"
}
editor.fastScrollSensitivity:5 // 快速滚动值,默认5

特定语言

将vscode 作为默认merge工具:git config --global merge.tool code