VS Code 使用小结

用了半年多的VSCode, 小结一下

1. 插件（2022-4-16）

主题插件，选择一个顺眼的主题和文件图标是必不可少的， Material Icon Theme
浏览器自动刷新 live server , html文件-> 右键open with Live Server 保存即可自动刷新浏览器
修改html标签对 Auto Rename Tag 和自动闭合html标签 Auto Close Tag
缩进插件，代码易于阅读，indent-rainbow
括号配对，Bracket Pair Colorizer
保存即可格式化代码 Prettier
样式追踪 Css Peek
英语单词插件插件名是--会了吗
文件路径引入插件 Path Intellisense
查看文件之间相互依赖关系插件 Dependency Cruiser Extension（使用，项目入口文件--右键--viewDependencies）
Vue 必不可少的 Vetur
Vue快捷语法 vue-helper

插件默认存储位置 C:\Users\ 你的用户名\.vscode\extensions

如果想改插件文件位置桌面VSCode图标右键-> 属性

在下图的位置拼接上  --extensions-dir 你想修改的目标文件路径

2.更多插件（2022-5-15）

console-helper
选中要打印的变量，Cmd+shift+l or (Ctrl+l on Windows)，会在控制台打印彩色的输出；Cmd+shift+d or (Ctrl+shift+d on Windows)删除页面所有log
别名路径跳转(Vue组件跳转)
移动到路径或导入的组件上，ctrl并单击跳转

Code Runner

可以运行各种代码。装了之后右上角有个运行标志。选择文件-->右键Run Code运行

Code Spell Checker
拼写不对的单词，会有波浪线提示。
element-ui-helper
The only step to use this extension is moving your cursor to Element-UI tag or prop

3.键盘快捷方式

把选中内容上移、下移一行 --Alt + ↑ -- Alt + ↓
复制光标所在行 --Alt + Shift + ↓
选中光标所在行 Ctrl + L
光标切换到控制台 Ctrl + ~
新建文件 Ctrl + N (Ctrl +s 保存新文件)
搜索目标代码 Ctrl + F 可搜索到该页面所有匹配项（浏览器也支持此快捷方式，可搜索网页内容）
向后同时选中下一个匹配项用于批量修改同一代码段 Ctrl + D
代码块全部折叠 Ctrl + K --> Ctrl + 0 (数字0)
全部展开 Ctrl + K --> Ctrl + J
智能代码提示 Ctrl + I
转到目标行 Ctrl + G （编辑器上方输入目标行数）
搜索项目文件 Ctrl + P
打开命令面板 Ctrl+Shift+P
打开设置面板 Ctrl + ,（逗号）
将选中的多行内容在单行展示， Ctrl+Shift+P -->输入Join Lines
多行同列同时编辑: 先确定光标的位置，然后同时按住Alt+Shift这两个键，接着鼠标左键直接点击你所要选中的多行里面的最后一行需要修改的那一列

4. 配置--保存后自己想要的格式化规则(注意区别用户设置和工作区设置)

打开设置面板 Ctrl + ,（逗号）
文件 > 首选项 > 设置
在settings.json中编辑

用户设置（VsCode全局设置，所有项目都起效）
C:\Users\86182\AppData\Roaming\Code\User\settings.json
工作区设置（项目设置，只在该项目起效）
D:\文档\vuetest\.vscode\settings.json

3. 在你选择的settings.json文件配置

{
  "files.autoSave": "off", // 自动保存

  "editor.formatOnSave": true, // 保存格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 默认格式化程序
  // "editor.fontSize": 16, // 字号
  "editor.tabSize": 1, // 一个tab强制转换为2个空格
  // "editor.fontFamily": "Input Mono, Fira Code, monospace", // 字体
  "editor.smoothScrolling": true, // 滚动时启用动画
  "editor.renderWhitespace": "all", // 空白字符显示方式
  "editor.quickSuggestions": {
    "strings": true // 在键入字符串时启用建议
  },
  "editor.wordWrap": "on", // 在视区宽度处换行,
  "editor.bracketPairColorization.enabled": true, // 彩虹🌈括号

  "explorer.confirmDragAndDrop": true, // 控制在资源管理器内拖放移动文件或文件夹时是否进行确认

  "workbench.tree.indent": 16, // 树缩进

  "terminal.integrated.defaultProfile.windows": "PowerShell", // 默认终端
  "terminal.integrated.defaultProfile.osx": "zsh", // 默认终端
  "terminal.integrated.copyOnSelection": true, // 终端选中复制
  // "terminal.integrated.fontSize": 16, // 终端字号

  "breadcrumbs.enabled": true, // 开启 vscode 文件路径导航

  "security.workspace.trust.untrustedFiles": "prompt", // 不显示信任引入提示

  // prettier 设置
  "prettier.semi": false, // 设置分号
  "prettier.singleQuote": true, // 强制单引号
  "prettier.trailingComma": "none", // 随时添加逗号
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always"
}

前端VS Code 使用小结

VS Code 使用小结

1. 插件（2022-4-16）

2.更多插件（2022-5-15）

3.键盘快捷方式

4. 配置--保存后自己想要的格式化规则(注意区别用户设置和工作区设置)