热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

编辑器VSCode使用心得

工欲善其事必先利其器,趁手的工具会使我们开发事半功倍。市面上的编辑器我用过许多,编辑器使用经历Notepad++,(开源)这个应该是最轻量级的吧,查看代码还好,编辑代码就算了官网地

工欲善其事必先利其器,趁手的工具会使我们开发事半功倍。
市面上的编辑器我用过许多,

编辑器使用经历

Notepad++,(开源)这个应该是最轻量级的吧,查看代码还好,编辑代码就算了
官网地址:https://notepad-plus-plus.org/

Brackets,(开源)这个也不错,github-star:30k了,上次发布版本是6月18号,我当时弃用的原因是因为对vue支持不太友好
官网:http://brackets.io/

Atom ,(开源)github-star:47.4k,github官方出品
官网地址:https://atom.io

WebStorm,(收费),这是一款很强大的编辑器,基本上就是零配置,功能丰富,缺点也很明显,启动慢,并且付费,没有中文版,中文需要汉化,不知道官方现在有没有中文包,好久没关注了
官网地址:https://www.jetbrains.com/webstorm/

Sublime Text:(收费),这也是一款算是比较轻量级的编辑器,功能需要自己安装扩展插件来完善,我用了好长一段时间
官网地址:http://www.sublimetext.com/

HBuilder:(免费),在国产编辑器中算是不错的,支持的功能也很多,当时用它来开发app,当时很想支持一下国产,但是当项目越来越大时,会很卡,超级卡,如果几个项目同时启动,估计就会挂掉了
官网地址:http://www.dcloud.io/

vscode

vscode是我今天要重点介绍的一款编辑器,微软开源,github-star:66k
官网地址:https://code.visualstudio.com/
大概是从去年年初的时候接触到vscode,一直使用到今天,我并没有否定上面所列举的那些编辑器,只是vscode更适合我,
每个编辑器都有自己的优点、卖点。
没有最好的兵器,只有最趁手的兵器。
vscode有一个很好的卖点,就是它支持中文,这是广大开发者的福利
vscode和很多编辑器一样通过扩展插件来完善自己的功能

vscode常用插件介绍

安装插件我有个重要的参考指标,就是下载量
《编辑器VSCode使用心得》
下载量是受欢迎程度一个参考指标,通常情况下1M以下的下载量我都会慎重考虑,
⚠️:插件不是装的越多越好,有的插件间会有冲突,插件装的太多,会让编辑器变得卡顿,
也就是说,在最好用,最受欢迎的插件里面挑选你最需要的
vscode内部集成了git,如果你的团队也是使用git,那么我想vscode一定是你的首选

GitLens — Git supercharged

截止目前下载量:11M
介绍

GitLens增强了构建在vscode代码中的Git功能。它帮助您通过Git blame注释和代码镜头直观地看到代码作者,无缝地导航和探索Git存储库,通过强大的比较命令获得有价值的见解,等等。

装上以后,是这个样子,每一行 code 的作者、提交时间、commit log 等信息,一目了然。
《编辑器VSCode使用心得》
安装成功后,会出现这个图标
《编辑器VSCode使用心得》
如果开发是vscode+git,这个插件强烈推荐,一眼就能看到是谁改了你的代码😂

Git History

截止目前下载量:4.2M
介绍:

查看和搜索git日志以及图形和详细信息。
查看文件的前一个副本。
查看和搜索历史

  • 查看一个或所有分支的历史(git日志)
  • 查看文件的历史记录
  • 查看文件中某一行的历史(Git fault)。
  • 查看作者的历史

比较:

  • 比较分支
  • 比较有
  • 跨提交比较文件

其他特点:

  • Github化身
  • 挑选提交
  • 重新提交
  • 从提交创建分支
  • 树状视图中的视图提交信息(所有更改的快照)
  • 合并和变基

《编辑器VSCode使用心得》
更多功能需要自己挖掘

Auto Close Tag

截止目前下载量:2.2M
自动添加HTML/XML关闭标签,写前一半标签,后面一半自动补全

Auto Rename Tag

截止目前下载量:1.1M
自动重命名成对的HTML/XML标记
修改了html标签的一半(前面或后面),另一半自动修改,(注意输入法要在英文模式下)

Beautify

截止目前下载量:6.7M
代码中美化Javascript、JSON、CSS、Sass和HTML。
这个都会安装吧,代码美化

Bracket Pair Colorizer

截止目前下载量:3.1M
这个扩展允许用颜色来标识匹配的括号。用户可以定义要匹配的字符和要使用的颜色。
《编辑器VSCode使用心得》
成对的括号(大括号,小括号)颜色相同,这在代码多层括号嵌套时显得尤为重要。

ESLint

截止目前下载量:15M
这个不需要介绍了吧,代码格式校验,支持自定义配置,错误是红色的波浪线,警告是绿色的

Javascript (ES6) code snippets

截止目前下载量:2.9M
用于vscode编辑器的ES6语法中的Javascript代码片段(同时支持Javascript和TypeScript)。
《编辑器VSCode使用心得》
这个功能我经常用
js里敲clg,然后回车=> console.log(object);
在调试的时候很方便实用

One Dark Pro

截止目前下载量:7.8M
编辑器颜色主题,一直是我喜欢的风格,

Material Icon Theme

截止目前下载量:4.8M
很漂亮的图标库,用于编辑器左侧树状菜单文件和文件夹图标显示
《编辑器VSCode使用心得》

Vetur

截止目前下载量:7.1M
vue项目必装插件,用于vue代码高亮格式化等

Bookmarks

截止目前下载量:1.3M
《编辑器VSCode使用心得》
当代码行数很大的时候,为代码添加书签,再也不怕迷路了,如果忘记了快捷键,可以在代码中右击鼠标
《编辑器VSCode使用心得》
使用简单

Project Manager

截止目前下载量:2.2M
如果本地项目很多的话,可以用这个插件管理项目,可以快速切换项目,并且每次只打开一个项目,多项目并行开发的最佳选择

关于vscode的插件就介绍那么多了

自定义代码片段

在命令面板中输入Configure User Snippets
《编辑器VSCode使用心得》
选择你要编辑的代码片段,我们一vue来举例
选择vue.json进行编辑
下面是我的配置

"Print to console": {
"prefix": "log1",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
"Vue base Template": {
"prefix": "vue",
"body": [
"",
"\n",
"\n",
"",
],
"description": "vue基本模板"
}
}

格式都是支持自定义的,保存后新建一个vue文件,编辑器中输入vue然后回车
《编辑器VSCode使用心得》
模板分三部分

  • prefix:快捷键名称(vue文件中敲vue,然后回车直接出现自定义模板)
  • body: 模板内容
  • description:模板的描述信息(给你自己看的,不会显示在模板里面)

语法:

  1. 在body中,使用转义字符来书写制表符Tab、双引号”等内容; 使用${num: default
  2. 使用${num: default name}来定义输入位置,按下Tab键来递进光标到下一个;
  3. num的值为0,1,2,3…。0为光标的最终位置,1,2,3…决定了光标的顺序位置;
  4. default name是默认值,可按下Tab不编辑直接跳过。

上面的模板是针对vue文件的,你也可以可以根据需要配置其他文件的模板,而且支持全局文件模板
选择 New Global snippets file…
新建一个全局模板

{
"Print to mounted": {
"prefix": "mounted",
"body": [
"mounted(){",
"this.$nextTick(()=>{",
"$5",
"})",
"},",
],
"description": "mounted模板"
}
}

《编辑器VSCode使用心得》
方便吧😄

关于vscode的一些小建议

vscode支持命令行,可以通过命令行按照依赖包,类似于:npm install
但是不建议在命令行中启动项目,类似于:npm start
为什么?当你重启编辑器的时候,服务也会跟着重启,你会说了,我为什么要重启编辑器呢?
我遇到过以下几种情况,编辑器会重载的

  1. 编辑器很卡,代码格式化失效
  2. 编辑器很卡,代码提示没了
  3. 编辑器莫名其妙的变成英文的,虽然不影响使用,但是看着别扭
  4. 编辑器升级,自动重启
  5. 按装或者卸载了插件,启用或者禁用了插件,需要重新加载

以上这些情况都会重启编辑器,导致在编辑器内启动的命令行工具跟着重启,所以不建议在命令行内启动项目服务

插件安装要谨慎,不要装太多,只安装你需要的,装的太多,会拖慢编辑器,安装时留意一下插件的下载量,相同功能的插件不要重复安装,可能会有冲突。

还是那句话:没有最好的兵器,只有最趁手的兵器。

(只是个人建议)

关于vscode的心得就介绍那么多,希望能对你有所帮助。

原文链接

《编辑器VSCode使用心得》


推荐阅读
  • 本文介绍了 Vue 开发的入门指南,重点讲解了开发环境的配置与项目的基本搭建。推荐使用 WebStorm 作为 IDE,其下载地址为 。安装时请选择适合您操作系统的版本,并通过 获取激活码。WebStorm 是前端开发者的理想选择,提供了丰富的功能和强大的代码编辑能力。 ... [详细]
  • 本文总结了优化代码可读性的核心原则与技巧,通过合理的变量命名、函数和对象的结构化组织,以及遵循一致性等方法,帮助开发者编写更易读、维护性更高的代码。 ... [详细]
  • 使用 Azure Service Principal 和 Microsoft Graph API 获取 AAD 用户列表
    本文介绍了一段通用代码示例,该代码不仅能够操作 Azure Active Directory (AAD),还可以通过 Azure Service Principal 的授权访问和管理 Azure 订阅资源。Azure 的架构可以分为两个层级:AAD 和 Subscription。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • QBlog开源博客系统:Page_Load生命周期与参数传递优化(第四部分)
    本教程将深入探讨QBlog开源博客系统的Page_Load生命周期,并介绍一种简洁的参数传递重构方法。通过视频演示和详细讲解,帮助开发者更好地理解和应用这些技术。 ... [详细]
  • 本文将介绍如何编写一些有趣的VBScript脚本,这些脚本可以在朋友之间进行无害的恶作剧。通过简单的代码示例,帮助您了解VBScript的基本语法和功能。 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • 尽管某些细分市场如WAN优化表现不佳,但全球运营商路由器和交换机市场持续增长。根据最新研究,该市场预计在2023年达到202亿美元的规模。 ... [详细]
  • 本文详细介绍了如何在ECharts中使用线性渐变色,通过echarts.graphic.LinearGradient方法实现。文章不仅提供了完整的代码示例,还解释了各个参数的具体含义及其应用场景。 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中,将行标题字段呈现为锚点(即可点击链接),帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释,即使是新手也能轻松掌握。 ... [详细]
  • 资源推荐 | TensorFlow官方中文教程助力英语非母语者学习
    来源:机器之心。本文详细介绍了TensorFlow官方提供的中文版教程和指南,帮助开发者更好地理解和应用这一强大的开源机器学习平台。 ... [详细]
  • 深入解析Spring Cloud Ribbon负载均衡机制
    本文详细介绍了Spring Cloud中的Ribbon组件如何实现服务调用的负载均衡。通过分析其工作原理、源码结构及配置方式,帮助读者理解Ribbon在分布式系统中的重要作用。 ... [详细]
  • 本文详细介绍了Java编程语言中的核心概念和常见面试问题,包括集合类、数据结构、线程处理、Java虚拟机(JVM)、HTTP协议以及Git操作等方面的内容。通过深入分析每个主题,帮助读者更好地理解Java的关键特性和最佳实践。 ... [详细]
  • Java毕业设计项目:“传情旧物”网站(含源码与数据库)
    本项目介绍了如何配置和运行“传情旧物”网站,包括所需的技术栈、环境配置以及具体的操作步骤。 ... [详细]
author-avatar
Liko2502860873
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有