WebStorm和VSCode配置_vscode快捷键设置为webstorm的

WebStorm设置

1. 换行
   File—Settings—Editor—General—勾选Soft-wrap these files，然后在后面添加;*.*来让所有文件都自动换行
2. 显示行号
   File—Settings—Editor—General—Appearance—Show line numbers
3. 打开多个项目
   File—Settings—Directories—Add Content Root

WebStorm快捷键

1. 全局搜索（Ctrl + Shift + F）
   Edit—Find—Find in Path
2. 复制当前行或者所选代码块（Ctrl + D）
3. 删除光标所在位置行（Ctrl + Y）
4. 格式化代码（Ctrl + Alt + L）
5. 行注释（Ctrl + /）
6. 块注释（Ctrl + Shift + /）
7. 光标所在位置大小写转换（Ctrl + Shift + U）
8. 重命名（Shift + F6）
9. 环绕标签（Ctrl + Alt + T）

VSCode设置

1. 代码缩进2个字符：搜索Detect Indentation然后取消勾选，再搜索tabsize从4改成2
2. 自动折行：搜索editor.wordWrap设置为on，需要取消勾选屏幕优化
3. 文件自动保存：搜索files.autoSave设置为onFocusChange，编辑器失去焦点时自动保存更新后的文件
4. Tab键自动填入最佳推荐值：editor.tabCompletion设置为on
5. 设置显示行号：搜索editor.lineNumbers设置为true
6. 开启代码提示：搜索prevent取消此项的勾选
7. 中文乱码：①搜索files.autoGuessEncoding设置为true；②安装GBKtoUTF8插件

VSCode插件

1. View In Browser（运行html文件）
2. Webstorm IntelliJ Darcula Theme（和Webstorm一样的字体和主题）
3. open in browser（在浏览器中查看）
4. Live Server（实时预览。我们在编辑器中修改代码，按Ctrl+S保存，修改效果就会实时同步，显示在浏览器中，不用再手动刷新。）
5. Auto Rename Tag（自动修改匹配的HTML标签）
6. Highlight Matching Tag（高亮显示匹配标签。帮我们将选中的匹配标签高亮显示）
7. Vscode-icons VSCode（文件图标）
8. Vscode-icons-mac（mac文件图标）
9. TODO Highlight （高亮。如果我们在编写代码时想在某个地方做一个标记，后续再来完善或者修改里面的内容，可以利用此插件高亮显示，之后可以帮助我们快速定位到需要修改的代码行。）
10. Code Spell Checker（单词拼写检查。会自动帮我们识别单词拼写错误并且给出修改建议）
11. Code Runner（运行选中代码段。右键选择Run Code，支持大量语言，包括Node）
12. Improt Cost（成本提示。导入工具包的时候提示这个包的体积）
13. GitLens（查看Git信息。将光标移到代码行上，即可显示当前行最近的commit信息和作者，多人开发的时候十分有用，责任到人，防止甩锅）
14. Bookmarks（书签。对代码进行书签标记，通过快捷键实现快速跳转到书签位置，具体的快捷键可以在键盘快捷方式中自定义设置。）
15. Vscode-element-helper（element-ui。编写标签时自动提示element标签名称）
16. Version Lens（工具包版本信息。在package.json中显示你下载安装的npm工具包的版本信息，同时会告诉你当前包的最新版本。）
17. Vetur（Vue语言包，语法高亮、智能感知、Emmet等。安装插件后编写vue文件输入vue，按Tab键就可以自动补全模版。）
18. Path Intellisense（智能路径提示，可以在你输入文件路径时智能提示。）
19. Markdown Preview（实时预览Markdown）
20. Stylelint（CSS / SCSS / Less 语法检查）
21. VueHelper（snippet代码片段）
22. CSScomb（CSS 书写顺序规则）
23. Turbo Console Log（快捷添加 console.log，一键 注释 / 启用 / 删除 所有 console.log。ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log；alt + shift + c 注释所有 console.log；alt + shift + u 启用所有 console.log；alt + shift + d 删除所有 console.log）
24. css-auto-prefix（自动添加 CSS 私有前缀）
25. change-case（转换命名风格。快速更改当前选择或当前单词的大小写(camelCase, CONSTANT_CASE, snake_case等)）
26. CSS Peek（从html中的class定位到在css样式的位置）
27. vscode-json（处理 JSON 文件格式）
28. Regex Previewer（实时预览正则表达式的效果）
29. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
30. css-format-one-line（css单行多行格式化。格式化为单行Ctrl + J；格式化为多行Ctrl + I）
31. Codelf(变量命名神器)
32. Project Manager(项目管理器)
33. EditorConfig for VS Code（多人协作统一代码风格）
34. Prettier - Code formatter（代码格式化）
35. ESLint（代码检测）
36. Vue VSCode Snippets（快速生成Vue3代码，使用文档）
37. htmltagwrap（外层包裹一层默认的标签（默认标签可以更改），按“Alt+w”、“option+w“）
38. Color Info（在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了）
39. DotENV（读取.env文件）
40. Remote ssh（部署上线时使用，修改远程服务器里面文件的方式）

VSCode快捷键

1. 生成vue模板（vue→tab）
2. 生成html模板（!→tab）
3. 固定窗口打开所有文件（双击文件标题变成正体）
4. 最小化窗口（Ctrl+H）
5. 剪切一行（Ctrl+X）
6. 删除一行（Ctrl+Shift+K）
7. 复制一行（向下复制一行shift + alt + ↓ ）（向上复制一行shift + alt + ↑ ）
8. 查找替换（Ctrl+H）
9. 替换查找的全部内容Ctrl+Alt+Enter
10. 块级注释（Shift+Alt+A）（MAC：Shift + Option + A）