WebStorm和VSCode配置

本文详细介绍了WebStorm和VSCode的个性化设置,包括自动换行、行号显示、多项目管理等。同时,列举了两款编辑器的常用快捷键,如全局搜索、代码格式化、行注释等,提升开发效率。此外,还分享了VSCode的配置,如代码缩进、自动保存、插件安装及快捷键设置,并推荐了一些实用插件,如LiveServer、GitLens、CodeSpellChecker等,帮助开发者打造高效的工作环境。
摘要由CSDN通过智能技术生成

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)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值