17370845950

首先整理一些觉得不错的插件，体验一段时间后再进行调整。

一、常用插件

1. vscode-icon：为vscode的文件夹目录添加对应的图标，提升用户体验。

注：如果安装后不生效，请前往“文件 -- 首选项 -- 文件图标主题 -- 选择vscode icons”。

2. jQuery Code Snippets：jQuery开发必备插件，提供代码片段。

3. view in broswer：通过快捷键Ctrl + F1在默认浏览器中运行当前的HTML文件，适合习惯使用HBuilder和WebStorm的开发者。

4. Path Intellisense：自动补全文件路径，提高开发效率。

5. Vue插件-vetur：提供Vue的语法高亮、智能感知和Emmet等功能。

6. tortoiseSvn

7. markdown-helper

8. Bracket Pair Colorizer：为括号添加独立颜色，方便识别。

9. Debugger for Chrome：使vscode映射Chrome的调试功能，可用于静态页面的断点调试。

10. VueHelper：提供Vue的snippet代码片段。

11. setting sync：将插件保存到GitHub上，方便同步。

12. Auto Rename Tag：自动同步修改标签，提高开发效率。

13. Markdown Preview Enhanced：增强的Markdown预览器。

14. Ash Scss Snippets：在编写Scss时，以CSS方式提示常用属性。

二、vscode常用快捷键

• 列选择：ALT + 左键
• 命令面板：F1
• 切出新编辑器：Ctrl + 左键文件
• 代码行缩进：Ctrl + [、Ctrl + ]
• 文件切换：Ctrl + Tab
• 转到行首/行尾：Home / End
• 转到文件头/文件尾：Ctrl + Home / Ctrl + End
• 重命名：F2
• 转定义：F12 或 Ctrl + click
• 转定义（切出新编辑器）：Ctrl + Alt + click
• 查看定义：Alt + F12
• 查看引用：Shift + F12
• 上下移动一行：Alt + Up / Alt + Down
• 代码格式化：Shift + Alt + F

三、将多个项目文件夹展示在一个工作区

展示成这样的：

第一步：先打开一个文件夹，添加到工作区，保存工作区。

第二步：把另一个文件夹拖拽到工作区，保存工作区。

四、一般设置使用

1. 安装卸载扩展

   1.1 安装扩展

   Mac：cmd+shift+p

   Windows / Linux：ctrl+shift+p

   然后键入“ext install”。选择合适的扩展，再按回车键。

   1.2 扩展推荐

   Mac: cmd+shift+p

   Windows / Linux: ctrl+shift+p

   键入“ext”→选择“Show Extension Recommendations”

   1.3 卸载扩展

   Mac: cmd+shift+p

   Windows / Linux: ctrl+shift+p

   键入“ext”→选择“Show Installed Extensions”→点击extension card右下角的“x”

   2. 编辑器切换

   Mac: cmd+1, cmd+2, cmd+3

   Windows / Linux: ctrl+1, ctrl+2, ctrl+3

   3. 历史

   使用ctrl+tab来浏览历史。

   3.1 向后浏览：

   Mac: ctrl+-

   Windows / Linux: alt+left

   3.2 向前浏览：

   Mac: ctrl+shift+up

   Windows / Linux: alt+right

五、常用编辑技巧

1. 括号匹配

   Mac: cmd+shift+\

   Windows / Linux: ctrl+shift+\

2. 多游标选择

   Mac: opt+cmd+up 或 opt+cmd+down

   Windows: ctrl+alt+up 或 ctrl+alt+down

   Linux: alt+shift+up 或 alt+shift+down

   为当前选择添加游标。

3. 复制一行

   Mac: opt+shift+up 或 opt+shift+down

   Windows / Linux(Issue #5363): shift+alt+down 或 shift+alt+up

   4. 缩小/扩大选择

   Mac: ctrl+shift+cmd+left 或 ctrl+shift+cmd+right

   Windows / Linux: shift+alt+left 或 shift+alt+right

   5. 定位特定的一行

   Mac: ctrl+g 或 cmd+p , :

   Windows / Linux: ctrl+g

   6. 撤销游标位置

   Mac: cmd+u

   Windows / Linux: ctrl+u

   7. 上下移动一行

   Mac: opt+up 或 opt+down

   Windows / Linux: alt+up 或 alt+down

   8. 代码格式化

   Mac: opt+shift+f

   Windows / Linux: shift+alt+f

   9. 代码折叠

   Mac: shift+cmd+[ 和 shift+cmd+]

   Windows / Linux: ctrl+shift+[ 和 ctrl+shift+]

   10. 选择当前一行

   Mac: cmd+i

   Windows / Linux: ctrl+i

   11. 打开README预览

   在markdown文件中使用：

   Mac: shift+cmd+v

   Windows / Linux: ctrl+shift+v

   12. 分割（Side by Side）Markdown编辑和预览

   在markdown文件中使用：

   Linux: ctrl+k v

4. 预览选择一个符号

   键入alt+f12，或者使用快捷菜单。

   14. 查找所有引用

   选择一个符号，键入shift+f12，或者使用快捷菜单。

   其他配置问题：以下问题需在文件-首选项-设置中添加

5. scss的css提示问题

   // scss提示
   "files.associations": {
     "*.css": "scss"
   }

6. 编辑器缩进问题

   // 缩进问题
   "editor.detectIndentation": false,
   "editor.tabSize": 2,
   "editor.insertSpaces": true,
   // 控制编辑器是否应自动设置粘贴内容的格式。格式化程序必须可用并且能设置文档中某一范围的格式。
   "editor.formatOnPaste": true,
   // 保存时设置文件的格式。格式化程序必须可用，不能自动保存文件，并且不能关闭编辑器。
   "editor.formatOnSave": false,

   针对当前文件也可以在右下角状态栏中点击空格，设置相关参数。

参考文档：

1. VsCode插件安装及推荐：https://www./link/0810699abe09927a03a8b5a0247c6797

2. vscode 插件推荐 - 献给所有前端工程师（2017.8.18更新）：https://www./link/17de40aac6ef19073756e1237c8c0cb0

3. vscode开发技巧集锦：https://www./link/cfa57ce2b96aa179a800c08015a481b7