这样配置vs code (Visual Studio Code)会让你的前端开发飞起来
一、开局引入:选择vs code的原因, vs code比sublime开源,比atom更快,比webstorm更轻。当然HBuilder也不错,我们会在后续和大家聊一聊。二、初步印象:- 文件目录管理很强大。- 自定义配置,主题,自动保存,可以设置延迟毫秒后保存,也可以设置文件失去焦点时自动保存。- 集成Git,快速diff,而且修改文件后会左边会显示指示器,比如删除会显示红色,增加显示绿色,修
目录:
一、开局引入
二、安装和下载的地址
三、侧边栏介绍
四、初步印象
五、其它优点
六、你需要知道VSCode的缺点
七、方便的快捷键
八、插件支持及安装
九、VSCode系统中英文切换
一、开局引入:
选择vs code的原因, vs code 比sublime开源,比atom更快,比webstorm更轻。当然HBuilder也不错,会在后续和大家聊一聊。
二、windows系统下安装和下载的地址:
https://code.visualstudio.com/Download
三、侧边栏介绍:
四、初步印象:
- 文件目录管理很强大。
- 自定义配置,主题,自动保存,可以设置延迟毫秒后保存,也可以设置文件失去焦点时自动保存。
- 集成Git,快速diff,而且修改文件后会左边会显示指示器,比如删除会显示红色,增加显示绿色,修改则显示蓝色。
- 智能提示很强大。
- Go to Definition很方便,按F12自动跳转到方法定义处,如果不想跳转,直接shift+F12实现Peek功能!
- 自带emmet支持html/jade/css/less/sass/xml,前端福音。
- 自带强大的调试功能。
-庞大的开源社区和所有开发者需要的和想要的功能。
五、其它优点:
-加载大文件几乎秒开。
-C#支持高亮,已经编译过的还支持引用。
-JS、HTML等支持高亮和补全。
-免费 开源,这点很香。-插件支持极好:安装+卸载+查找都方便+数量多+质量高
-可以在github上在线使用。
-可扩展和可定制性强。
六、你需要知道VSCode的缺点:
-对C#支持还不够好。
-不支持工程加载,只支持文件夹加载,引用比较复杂的大工程支持力度低。
-支持git但是对github没提供接口。
-debug需要手动输入参数,虽不复杂,但和VS一贯定位不符。
七、方便的快捷键:
7.1主命令框:
- 显示所有命令:ctrl+shift+P 或 单键F1 ;
7.2编辑器与窗口管理:
-打开一个新窗口:
Ctrl+Shift+N ;
-关闭窗口:
Ctrl+Shift+W ;
-新建文件 :
Ctrl+N ;
-文件之间切换 :
Ctrl+Tab;
-切出一个新的文集编辑窗口:Ctrl+\
;
7.3代码格式调整:
-代码行缩进: Ctrl+[ 、 Ctrl+];
-复制或剪切当前行/当前选中内容:Ctrl+C 、 Ctrl+V ;
-代码格式化: Shift+Alt+F;
-光标上下移动一行: Alt+↑ 或 Alt+↓;
-向上向下复制一行: Shift+Alt+↑ 或 Shift+Alt+↓;
-准备在当前行下边插入一行,光标移动: Ctrl+Enter;
-准备在当前行上方插入一行,光标移动: Ctrl+Shift+Enter;
7.4鼠标光标位置相关:
-移动到当前行 行首: Home键;
-移动到当前行 行尾: End键;
-移动到文件结尾: Ctrl+End;
-移动到文件开头: Ctrl+Home;
-移动到后半个括号: Ctrl+Shift+];
-选择从光标到行尾: Shift+End;
-选择从行首到光标处: Shift+Home;
-删除光标右侧的所有字: Ctrl+Delete;
-扩展/缩小选取范围: Shift+Alt+Left 和 Shift+Alt+Right;
-快速多行列编辑:Alt+Shift+鼠标左键;
-手动多行列编辑:Alt + 鼠标左键逐个点击;
-同时选中所有匹配项: Ctrl+D ;
-回退上一个光标操作: Ctrl+U;
7.5重构代码:
-找到所有的引用: Shift+F12;
-同时修改本文件中所有匹配的: Ctrl+F12;
-重命名:比如要修改一个方法名,可以选中后按 F2,输入新名字,回车,则所有该方法的引用也都同步更新了;
-当有多个错误时可以按 :F8 逐个跳转;
7.6查找和替换:
-查找: Ctrl+F;
-查找替换: Ctrl+H;
-整个文件夹中查找: Ctrl+Shift+F 侧边栏中的Search;
7.7显示相关:
-全屏/退出全屏:F11;
-侧边栏显/隐: Ctrl+B;
-显示 Debug: Ctrl+Shift+D;
-显示 Output: Ctrl+Shift+U;
-显示常用终端命令工具TERMINAL: Ctrl +`(Esc下边那个键)
7.8其它:
- 开始调试: F5;
- 快速切换项目文件:Ctrl+P;
- 打开终端:Ctrl+ `(esc下边的那个键);
-创建新的终端:Ctrl+Shift +`(esc下边的那个键);
- 打开命令行(其他指令其实都是基于命令行的,可直接在输入框输入?来查询指令): Ctrl+E ;
- 跳转到指定行:Ctrl+G,在输入要调到的行数;-自动保存:File -> AutoSave,或者 Ctrl+Shift+P,输入 auto;
- 调整代码行整体上下移动:alt+↑/↓;
八、插件支持及安装:点击Extensions(拓展模块),然后对需要的插件进行install。
8.1自动闭合HTML标签:
推荐安装:Auto Close Tag
8.2文件类型一目了然:
推荐安装 :vscode-icons
8.3更加高效的管理项目:
推荐安装:Project Manager
8.4美化你的代码:
推荐安装:Beautify
8.5括号对彩色化:
推荐安装:Bracket Pair Colorizer
8.6一键搭建各类语言的学习测试环境-万能语言运行环境 :
推荐安装:Code Runner
8.7如何实时自动检测你的代码规范与代码中的错误:团队代码格式一致化检查-代码检查工具
推荐安装:ESLint/TSLint
8.8代码拼写检查器:
推荐安装:Code Spell Checker
8.9让代码适当缩进和分隔:
推荐安装:Prettier - Code formatter
8.10文件路径处理器工具:
推荐安装:Path Intellisense
8.11编辑器内部预览浏览器效果:
推荐安装:View In Browser
8.12ES6代码片段:
推荐安装:JavaScript (ES6) code snippets
8.13github扩展:
推荐安装:GitHub
8.14GitLens:
推荐安装:GitLens — Git supercharged
8.15 node包管理工具:
推荐安装:npm
8.16快速注释:
安装推荐:Document This
8.17Chrome浏览器联动调试:
推荐安装:Debugger for Chrome
8.18备忘插件:
推荐安装:TODO Highlight
8.19如何集成并美化你的终端到VSCode:
推荐安装:Integrated Terminal Filedir
8.20顶部注释:
推荐安装:vscode-fileheader
8.21在编辑器底部状态栏显示当前文件大小:
推荐安装:filesize
8.22引入包大小计算:
推荐安装:Import Cost
8.23Vue相关:
推荐安装:vue,Vue VSCode Snippets,Vetur,Vuex Suggest
8.24同步vscode设置到码云(gitee):
推荐安装:code settings sync
文章推荐 — 同步个人vs code 习惯性配置 到码云(Gitee) : https://blog.csdn.net/xinxiaoyonng/article/details/106587205
九、VSCode系统中英文切换:
9.1 其它语言插件安装:点击Extensions(拓展模块),搜索 language,会显示一系列语言插件。
英文由于是原生态版本,无需安装插件。其它语言需要去安装语言支持插件。
中文插件安装:Chinese (Simplified) Language Pack for Visual Studio Code
日文插件安装:Japanese Language Pack for Visual Studio Code
韩语插件安装:Korean Language Pack for Visual Studio Code
9.2 执行搜索快捷键 Ctrl+Shift+P,调出所有配置搜索框。
9.3 在搜索框内输入:Configure Display Language(配置显示语言) 然后执行搜索,选择显示的系统语言,英文选择en,中文zh-cn。
9.4 选择重启按钮,VSCode编辑器会被关掉,此时什么都不需要做,只需稍等几秒中,VSCode就会自动重新启动。
十、最后的结语:
这是我使用vs code时习惯使用的快捷键和插件支持。
在这里一是为自己记录一下,二是向大家推荐一下。
由于个人使用习惯不同,所以仅供大家参考。
谢谢您的阅读。
更多推荐
所有评论(0)