WebStorm和VSCode配置
WebStorm设置
- 换行
File—Settings—Editor—General—勾选Soft-wrap these files，然后在后面添加;*.*来让所有文件都自动换行 - 显示行号
File—Settings—Editor—General—Appearance—Show line numbers - 打开多个项目
File—Settings—Directories—Add Content Root
WebStorm快捷键
- 全局搜索（Ctrl + Shift + F）
Edit—Find—Find in Path - 复制当前行或者所选代码块（Ctrl + D）
- 删除光标所在位置行（Ctrl + Y）
- 格式化代码（Ctrl + Alt + L）
- 行注释（Ctrl + /）
- 块注释（Ctrl + Shift + /）
- 光标所在位置大小写转换（Ctrl + Shift + U）
- 重命名（Shift + F6）
- 环绕标签（Ctrl + Alt + T）
VSCode设置
- 代码缩进2个字符：搜索Detect Indentation然后取消勾选，再搜索tabsize从4改成2
- 自动折行：搜索editor.wordWrap设置为on，需要取消勾选屏幕优化
- 文件自动保存：搜索files.autoSave设置为onFocusChange，编辑器失去焦点时自动保存更新后的文件
- Tab键自动填入最佳推荐值：editor.tabCompletion设置为on
- 设置显示行号：搜索editor.lineNumbers设置为true
- 开启代码提示：搜索prevent取消此项的勾选
- 中文乱码：①搜索files.autoGuessEncoding设置为true；②安装GBKtoUTF8插件
VSCode插件
- View In Browser（运行html文件）
- Webstorm IntelliJ Darcula Theme（和Webstorm一样的字体和主题）
- open in browser（在浏览器中查看）
- Live Server（实时预览。我们在编辑器中修改代码，按Ctrl+S保存，修改效果就会实时同步，显示在浏览器中，不用再手动刷新。）
- Auto Rename Tag（自动修改匹配的HTML标签）
- Highlight Matching Tag（高亮显示匹配标签。帮我们将选中的匹配标签高亮显示）
- Vscode-icons VSCode（文件图标）
- Vscode-icons-mac（mac文件图标）
- TODO Highlight （高亮。如果我们在编写代码时想在某个地方做一个标记，后续再来完善或者修改里面的内容，可以利用此插件高亮显示，之后可以帮助我们快速定位到需要修改的代码行。）
- Code Spell Checker（单词拼写检查。会自动帮我们识别单词拼写错误并且给出修改建议）
- Code Runner（运行选中代码段。右键选择Run Code，支持大量语言，包括Node）
- Improt Cost（成本提示。导入工具包的时候提示这个包的体积）
- GitLens（查看Git信息。将光标移到代码行上，即可显示当前行最近的commit信息和作者，多人开发的时候十分有用，责任到人，防止甩锅）
- Bookmarks（书签。对代码进行书签标记，通过快捷键实现快速跳转到书签位置，具体的快捷键可以在键盘快捷方式中自定义设置。）
- Vscode-element-helper（element-ui。编写标签时自动提示element标签名称）
- Version Lens（工具包版本信息。在package.json中显示你下载安装的npm工具包的版本信息，同时会告诉你当前包的最新版本。）
- Vetur（Vue语言包，语法高亮、智能感知、Emmet等。安装插件后编写vue文件输入vue，按Tab键就可以自动补全模版。）
- Path Intellisense（智能路径提示，可以在你输入文件路径时智能提示。）
- Markdown Preview（实时预览Markdown）
- Stylelint（CSS / SCSS / Less 语法检查）
- VueHelper（snippet代码片段）
- CSScomb（CSS 书写顺序规则）
- 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）
- css-auto-prefix（自动添加 CSS 私有前缀）
- change-case（转换命名风格。快速更改当前选择或当前单词的大小写(camelCase, CONSTANT_CASE, snake_case等)）
- CSS Peek（从html中的class定位到在css样式的位置）
- vscode-json（处理 JSON 文件格式）
- Regex Previewer（实时预览正则表达式的效果）
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
- css-format-one-line（css单行多行格式化。格式化为单行Ctrl + J；格式化为多行Ctrl + I）
- Codelf(变量命名神器)
- Project Manager(项目管理器)
- EditorConfig for VS Code（多人协作统一代码风格）
- Prettier - Code formatter（代码格式化）
- ESLint（代码检测）
- Vue VSCode Snippets（快速生成Vue3代码，使用文档）
- htmltagwrap（外层包裹一层默认的标签（默认标签可以更改），按“Alt+w”、“option+w“）
- Color Info（在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了）
- DotENV（读取.env文件）
- Remote ssh（部署上线时使用，修改远程服务器里面文件的方式）
VSCode快捷键
- 生成vue模板（vue→tab）
- 生成html模板（!→tab）
- 固定窗口打开所有文件（双击文件标题变成正体）
- 最小化窗口（Ctrl+H）
- 剪切一行（Ctrl+X）
- 删除一行（Ctrl+Shift+K）
- 复制一行（向下复制一行shift + alt + ↓ ）（向上复制一行shift + alt + ↑ ）
- 查找替换（Ctrl+H）
- 替换查找的全部内容Ctrl+Alt+Enter
- 块级注释（Shift+Alt+A）（MAC：Shift + Option + A）
WebStorm和VSCode配置相关推荐
- 如何恢复vscode的默认配置_史上最全vscode配置使用教程
工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使用一款前端开发工具.但前端开发工具数不胜数,像HBuilder.Sublime Text.WebStorm.Visual Studio Co ...
- vscode emmet默认模板_史上最全vscode配置使用教程
工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使用一款前端开发工具.但前端开发工具数不胜数,像HBuilder.Sublime Text.WebStorm.Visual Studio Co ...
- vscode html注释快捷键_史上最全vscode配置使用教程
点击上方蓝字"前端码头"一起玩耍 工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使用一款前端开发工具.但前端开发工具数不胜数,像HBuilder.Sublime Tex ...
- 支招 | 轻松几步，快速搞掂Webstorm和VSCode编辑器卡顿
Cocos Creator与Cocos2d-js都是使用Javascript语言,之前文章陆续有介绍过它们与2d-x和Lua在开发理念上的差异.根据我曾接触过的Cocos2d-js.Creator项目 ...
- 史上最全vscode配置使用教程
史上最全vscode配置使用教程 正在上传-重新上传取消 灰蓝宇墨 上海闪店联信息科技有限公司 前端工程师 5,041 人赞同了该文章 工欲善其事,必先利其器.想要优雅且高效的编写代码,必须熟练使 ...
- vscode配置记录
vscode配置记录 按照官网教程安装好vs:实际上只需要配置launch.json的"program"如下所示 "configurations": [{&qu ...
- VScode配置anaconda虚拟环境+运行
文章目录 VScode配置anaconda虚拟环境 VScode配置anaconda虚拟环境 ctrl + shift + P 输入查找 Select Interpreter 在弹出的选项中选中(后缀 ...
- 关闭eslint检查2020_2020 vscode配置eslint保存后自动fix
2020 vscode配置eslint保存后自动fix 这篇文章发布于 2019/10/12,归类于 计算机基础与开发工具 标签: vscode 保存自动fix,vscode 保存执行fix,esli ...
- 中setting怎么配置_用VSCode配置Latex
之前用VScode配置了Latex(原来的配置均从网络汇总),但是换了一台电脑,重新从网上找的配置不太满意,所以把原来的copy过来了,感觉还是原来的顺手呀.就当给自己存个档,顺便留给大家,有需要自取 ...
- Jupyter Nodebook添加代码提示（Vscode配置Jupyter Notebook运行.ipynb文件）
2021.04.14 更新,增加了对Vscode代码提示消失的描述 前言 由于Jupyter Notebook调试Python代码十分方便,受到了许多Coder的欢迎,但是它存在个十分不方便的地方-- ...
最新文章
- TCP 和 UDP的理解
- Linux的计划任务配置
- 浅析java内存管理机制
- node.js require 自动执行脚本 并生成html,利用node.js实现自动生成前端项目组件的方法详解...
- 代码夹带是洪水猛兽吗？
- 云炬Android开发笔记 12基于WebView的混合App框架设计（包含浏览器与原生请求Cookie的处理）
- html给按钮设置背景,设置按钮背景图片(HTML-CSS)
- SAP Fiori Elements里的SAP自定义注解annotation sap-text
- java连接mysql执行ddl_dljd_(007_009)_jdbc执行DQL/DML/DDL语句
- 上海市名校一年级数学考试附加题，难住学霸
- 全球大学文凭“含金量”排名出炉：“北清复”名列30强
- mysql产品优化方案,MySQL优化方案
- 软件工程复习提纲——第二章
- 2021年最新UI/UE设计学习路线图
- 北京科技大学 工科物理实验 大二下
- 个人网页制作 大学生个人网页设计 个人网站模板 简单静态HTML个人网页作品 大学生毕设网页设计源码HTML
- 动态规划基础之挖金矿问题
- CC2540F256RHAR
- android渠道 积分墙,安卓推广：既然能在应用商店做CPD，为什么还一定要做积分墙？...
- 小码哥-玩转【斗鱼直播APP】系列之界面分析