VSCode打造成为开发神器-程序员宅基地

技术标签: python  java  vue  编程语言  javascript  

VSCode现在是世界上最为常用的编辑器之一,为什么被称为编辑器,是因为它不像IDE一样集成了大量开发环境的配置,必须你手动配置很多东西,才能将它打造成为一个趁手的生产工具。

VSCode最大的优势就在于它是完全免费的,你不需要支付任何费用,就可以得到一个开发各种代码的编辑器,也正因为它具有高拓展性,它可以用来编写Python、C++、C#、GO、Dart等一系列语言。

你可以通过下面的插件将VSCode打造成为一个趁手的开发神器:

1. 编程语言类

下面的几个插件根据情况安装。

C/C++

Dart

dart-import

Go

Go Doc

Python

2. 代码风格类

Beautify:格式化代码插件,不过现在更推荐使用Prettier。

Prettier – Code formatter:当前前端最火的格式化代码插件。

Better Align:对齐代码。

Better Comments:更好的注释提示插件,推荐使用。

change-case:驼峰命名、下划线命名等等命名规则进行相互转化。

ESLint:团队开发的时候统一代码风格神器,以防因为代码风格不同而造成代码冲突。

Guides:代码块提示。

SonarLint:代码质量检测,和ESLint兼容,不会出现相互冲突的规则。

3. 代码提示类

3.1 angular

开发Angular需要的插件。

Angular Snippets (Version 11)

3.2 react

开发React需要的插件。

ES7 React/Redux/GraphQL/React-Native snippets

React Native Tools

3.3 vue

开发Vue需要的插件。

Vetur

vue

Vue 3 Snippets

Vue Peek

Vue VSCode Snippets

3.4 HTML

Auto Close Tag:自动闭合HTML标签。

Auto Rename Tag:更改一个HTML标签其对应的另一个标签也会被同时更改。

3.5 javascript/TypeScript

下面两个插件都为自动引入插件,只需要在文件中输入已经导出的函数名,就会自动添加引入代码!推荐使用!

Auto Import

TypeScript Hero

JavaScript (ES6) code snippets:快速生成代码片段。

3.6 CSS

Color Highlight:颜色高亮插件。

Color Picker:颜色选择插件。

CSS Peek:可以定位到项目中已经声明过的CSS类。

px to rem:将px转化为rem。

Tailwind CSS IntelliSense:原子化CSS库Tailwind的代码提示。

3.7 Flutter

开发Flutter需要的插件。

Flutter

Awesome Flutter Snippets

Flutter Widget Snippets

3.8 小程序

开发小程序需要的插件。

minapp

3.9 其它

Bookmarks:可以在代码中设置书签。

Bracket Pair Colorizer 2:将不同的括号显示不同的颜色。

HTML CSS Support:完成HTML和CSS。

HTML Snippets:HTML片段。

Image preview:引入项目中的图片预览。

Import Cost:检测导入项目中的包的大小,在优化项目的时候非常有用。

JavaScript Booster:将箭头函数和普通函数进行相互转换。

TODO Highlight:将注释中的TODO进行高亮。

Todo Tree:自动跳转到注释中含有TODO的地方。

3.10 慎用系列

IntelliSense for CSS class names in HTML:在编写HTML时获得CSS文件中的类名提示。

注:在开启该插件后,VSCode会有一个很长的文件搜索时间,不推荐使用。

koroFileHeader:在文件头部生成注释,并且能够一键生成函数JSDOC注释。

注:有时候会觉得自动生成比较烦,所以我暂时没有使用。

Live Sass Compiler:将Sass文件转换为CSS文件。

注:在不使用框架的情况下开发项目非常有用,但是使用框架后就不需要将Sass文件转为CSS文件。

Sass/Less/Stylus/pug/Jade/Typescript/Javascript Compile Hero Pro:同上,只是转化的文件类型更多样。

4. 编辑器拓展

4.1 Cocos-creator

让VSCode能够成为Cocos开发工具,cocos-creator目前主要用来做H5游戏。

Cocos Debug

cocos-creator

4.2 主题

Atom One Dark Theme

One Dark Pro

vscode-icons:将VSCode左侧文件预览图标变得多样化。

4.3 语言包

Chinese (Simplified) Language Pack for Visual Studio Code:VSCode中文语言包。

4.4 工具

Browser Preview:使VSCode内嵌一个浏览器窗口。

Code Runner:使VSCode具有直接运行各种编程语言的能力。

Code Spell Checker:检测项目中的单词是否有拼写上的错误。

Debugger for Chrome:能够使VSCode在Chrome上面调试代码。

Debugger for Firefox:能够使VSCode在Firefox上面调试代码。

Docker:使VSCode具有操控Docker的功能。

Draw.io Integration:可以在VSCode中创建流程图。

Gist:使VSCode能够快速创建Gist代码片段。

git History:可以快速的查看到Git提交历史。

gitignore:快速生成gitignore文件。

GitLens — Git supercharged:使VSCode具有Git管理功能。

Kite AutoComplete AI Code:根据你写的代码,AI自动推测你接下来可能要写的代码。

Live Server:能够启动一个服务器,当代码进行变动时自动刷新浏览器,主要是用于原生开发。

npm:检测项目中的package.json文件,可以通过该插件快速启动项目。

npm Intellisense:自动完成导入模块名称。

open in browser:快速在浏览器中打开HTML文件。

Partial Diff:快速比较两段代码的不同之处。

Paste JSON as Code:自动将JSON文件转化为TypeScript、C#等等各种语言的声明代码。

Path Intellisense:引入文件时具有文件地址提示。

Project Manager:项目管理,如果有几个经常需要打开的项目,就可以使用该插件,可以非常方便的切换项目。

Quokka.js:调试插件。

作者:沧沧凉凉

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qmzma/article/details/119327320

智能推荐

eclipse安装TestNG问题总结_eclipse 安装testng插件 慢-程序员宅基地

文章浏览阅读276次。问题复现步骤:1.点击Help--Install New Software--Add添加testng.zip文件, 2.点击Next后会提示有问题,如下图所示问题解决办法:最后百度发现是eclipse版本问题,eclipse版本不能低于4.2,换成4.5的Mars版本后,问题解决..._eclipse 安装testng插件 慢

华为鸿蒙系统手机上市日期,[财经]华为鸿蒙手机什么时候上市?搭载鸿蒙系统手机发布时间或在17日 - 南方财富网...-程序员宅基地

文章浏览阅读80次。10月12日消息,继Mate 30系列之后,华为手机将再度预告,10月17日推出一款更具创新的全面屏手机,从目前的情况看,其应该是采用了屏下隐藏式前置摄像头设计,同时还有可能搭载鸿蒙系统。从华为晒出的预告图来看,似乎也在极力的暗示,这款新的全面屏手机将一改以往的前置摄像头设计,而是启用最新的屏下隐藏式前置摄像头。目前厂商为了尽可能多的提升手机屏占比,在前置摄像头设计上五花八门,有的是刘海方案,有的...

keras图像风格迁移_from keras.preprocessing.image import load_img, im-程序员宅基地

文章浏览阅读4.4k次,点赞9次,收藏37次。风格迁移: 在内容上尽量与基准图像保持一致,在风格上尽量与风格图像保持一致。1. 使用预训练的VGG19网络提取特征 2. 损失函数之一是“内容损失”(content loss),代表合成的图像的特征与基准图像的特征之间的L2距离,保证生成的图像内容和基准图像保持一致。 3. 损失函数之二是“风格损失”(style loss),代表合成图像的特征与风格图像的特征之间的Gram矩阵之间的差..._from keras.preprocessing.image import load_img, img_to_array

简易社团管理系统(jsp+servlet+三件套+未完成)_jsp社团管理系统-程序员宅基地

文章浏览阅读2.5k次,点赞5次,收藏28次。本文适合那些还在学习并使用jsp技术并要求学生进行本地web端开发的学校的学生学习,主要目的是作者(大二学生)对自己的技术复盘与学习分享。_jsp社团管理系统

二级域名对搜索引擎屏蔽不收录,操作经验分享_二级域名不收录-程序员宅基地

文章浏览阅读682次。2.无法利用robots禁止搜索引擎收录某个二级域名情况,建议方法是301,对于有用的页面将所有的二级目录类域名重定向,无用的就直接删除。我二级域名由于业务需要和考虑宣传重点,往往不需要收录。如何解决这样的问题,思路如下,供大家参考。在网站根目录下建立robots.txt文件,强制搜索引擎不收录。3.分二级目录时,将主目录和二级目录分开在不同的文件夹。4.解析时候直接采用三W的的域名采用主域名。_二级域名不收录

esp8266 通过Arduino与电脑串口通信_arduino uno和esp8266串口通信-程序员宅基地

文章浏览阅读279次。esp8266_arduino uno和esp8266串口通信

随便推点

vue ref是在组件里唯一吗_Vue.js 组件通信精髓归纳-程序员宅基地

文章浏览阅读148次。(给前端大学加星标,提升前端技能.)作者:张炳https://segmentfault.com/a/1190000018241972组件的分类常规页面组件由 vue-router 产生的每个页面,它本质上也是一个组件( .vue),主要承载当前页面的 HTML 结构,会包含数据获取、数据整理、数据可视化等常规业务。功能性抽象组件不包含业务,独立、具体功能的基础组件,比如日期选择器、弹窗警..._组件加上ref是否能够有唯一性

热修复-程序员宅基地

文章浏览阅读57次。微信热修复 tinker 及 tinker server 快速接入博客: 安卓之家掘金: jp1017 微博: 追风 917CSDN: 蒋朋的家简书: 追风 917 来自 unsplash 的美图 当前热修复方案很多,今天研究了下微信的 tinker,使用效果还是不错的,配合 tinker server 服用更佳。下面介绍两者的使用,以..._可能是目前最完整的 android 热修复分享文章,绍文同学说,如果大家有问题可以直接

vs上运行c++程序时显示错误无法打开.exe进行写入(补充)_vs无法进行写入-程序员宅基地

文章浏览阅读1.6w次,点赞16次,收藏21次。针对VS编译时提示:“无法打开xxx.exe进行写入”,分析其触发情况及产生原因,并提出解决方案。触发通常出现在,编译时出现中断错误,点中断后会出现如下提示:如果不进行上图的强制“立即停止”操作,则程序会一直卡在这里,等待调试完全停止,窗口才会关闭。但是如果“立即停止”,则下一次再进行编译时,即会出现如题“无法打开xxx.exe进行写入”的错误。原因如上图提示所述,当强制“立即停止”时,..._vs无法进行写入

Mybatis-PLUS API_mybatis plusapi文档-程序员宅基地

文章浏览阅读3.3k次。insert/** * <p> * 插入一条记录 * </p> * * @param entity 实体对象 * @return 插入成功记录数 */int insert(T entity);deleteById/** * <p> * 根据 ID 删除 * </p> * * @param id 主键ID *..._mybatis plusapi文档

swagger接口导出excel文件打不开_swagger 下载的excel打不开-程序员宅基地

文章浏览阅读2.1k次。swagger接口导出excel文件打不开:接口添加produces="application/octet-stream"@ApiOperation(value = "列表导出",produces="application/octet-stream")_swagger 下载的excel打不开

Hibernate各种查询方法_hibernatr 规定方法名查询-程序员宅基地

文章浏览阅读1w次,点赞8次,收藏45次。1 hibernate的查询方式2 对象导航查询3 hql查询 (1)查询所有 (2)条件查询 (3)排序查询 (4)分页查询 (5)投影查询 (6)聚集函数使用4 qbc查询 (1)查询所有 (2)条件查询 (3)排序查询 (4)分页查询 (5)统计查询5 hql多表查询 (1)mysql多表查询回顾 (2)hql多表查询6 hibernate的检索..._hibernatr 规定方法名查询