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

智能推荐

docker删除重装,以及极其重要的/etc/docker/key.json文件-程序员宅基地

文章浏览阅读8.9k次,点赞2次,收藏2次。先说以下我为何要删除docker的原因吧:因为我感觉Docker Hub有点慢,就配置了阿里云的镜像加速器,可是按阿里云的官方配置完后我怎么感觉它更慢了,对比昨天配置阿里的maven镜像仓库后快到起飞的速度,我认为是此次配置没有生效。多次确认新加入的/etc/docker/demon.json文件无误后又多次systemctl了未果,随即我怀疑阿里给出的以下方案中的“修改”的/etc/dock...

空间物理——概述_空间物理概论-程序员宅基地

文章浏览阅读1.9k次,点赞3次,收藏4次。文章目录空间物理的研究对象太阳风能量向地球传输的三种方式和所需要的时间太阳内部结构、太阳活动太阳内部结构太阳活动太阳风速度从太阳表面到地球轨道附近变化参考空间物理的研究对象大气层:10KM以上,分成平流层、中层、低热层、热层、逃逸层电离层:60-90KM以上,一直到1000KM左右,部分电离气体,中性成风碰撞的影响不可忽略地球磁层:完全电离的气体,1000KM以上,可忽略碰撞,有太阳风和..._空间物理概论

BQ4050学习笔记(二)-程序员宅基地

文章浏览阅读2.9k次,点赞5次,收藏25次。BQ4050学习笔记(二)永久失效:如果发⽣严重故障,该设备可以永久禁⽤电池组。永久故障检查(IFC 和 DFW 除外)可以通过设置Settings:Enabled PFA、 Settings:Enabled PF B、 Settings:Enabled PF C 和Settings:Enabled PF D 中的相应位单独启⽤或禁⽤。所有永久在设置ManufacturingStatus()[PF]之前,故障检查(IFC 和 DFW 除外)被禁⽤。当任何PFStatus()位置位时,器件进⼊ PER_bq4050

SpringCloudAlibaba-Nacos注册中心的使用_spring-cloud-alibaba 使用nacos 2.1版本-程序员宅基地

文章浏览阅读152次。第二步:填写配置文件参数,这里定义了一个名字为application-user-dev.yaml的配置,使用的是YAML格式。DataID : 非常重要,可以看做是配置的文件的名字,在程序中拉取配置文件的时候需要指定Data ID。如果不使用默认的public命名空间,那么需要指定namespace配置为要使用的命名空间的Id值。第一步:打开Nacos监控面板,进入配置列表,新增一个user服务的配置文件。进入配置列表 ,切换到新建立的命名空间,创建配置文件。修改Nacos,添加命名空间。_spring-cloud-alibaba 使用nacos 2.1版本

CVE-2023-21716 Microsoft Word远程代码执行漏洞Poc_cve-2023-21716复现-程序员宅基地

文章浏览阅读293次。受害者打开python代码生成的RTF文件,RTF解析器解析恶意代码,触发堆溢出,Microsoft Word会闪退,用户其它Word中未保存的内容会丢失。_cve-2023-21716复现

c语言程序设计让a变成A,c语言程序设计a期末模拟试题.docx-程序员宅基地

文章浏览阅读451次。文件排版存档编号:[UYTR-OUPT28-KBNTL98-UYNN208]文件排版存档编号:[UYTR-OUPT28-KBNTL98-UYNN208]C语言程序设计A期末模拟试题C语言程序设计A期末模拟试题一一、单项选择题(每小题2分,共20分)由C++目标文件连接而成的可执行文件的缺省扩展名为( )。A. cpp B. exe C. obj D. li..._c语言如何将a转换成a

随便推点

利用beef和msf实现session远程命令_msf如何切换一个session-程序员宅基地

文章浏览阅读534次。笔记beef启动 beef 的方法msfbeef工具目录 /usr/share/beef-xss配置文件 config.yaml启动 beef 的方法1.beef-xss2./usr/share/beef-xss/beef(使用前需要修改默认的用户名称和密码)Web 管理界面 http://127.0.0.1:3000/ui/panelShellcode http://127.0.0.1:3000/hook.js测试页面 http://127.0.0.1:3000/demos/butch_msf如何切换一个session

python判断丑数_丑数问题及变种小结-程序员宅基地

文章浏览阅读503次。丑数问题及变种小结声明1 判断丑数因子只包含2,3,5的数称为丑数(Ugly Number),习惯上把1当作第一个丑数面试lintcode 517 ugly numbersegmentfault剑指offer 面试题34 丑数数组解法:参考剑指offer,将待判断目标依次连续整除2,3,5,若是最后获得1,证实该数为丑数;优化/*** 依次整除2,3,5判断(2,3,5顺序判断时间最优)* htt..._编写python来证明一个数是丑数

python自动化测试实战 —— WebDriver API的使用_python webdriver api-程序员宅基地

文章浏览阅读1.9k次,点赞30次,收藏11次。Selenium 简介: WebDriver是Selenium Tool套件中最重要的组件。Selenium 2.0之后已经将Selenium和WebDriver进行合并,作为一个更简单、简洁、有利于维护的API提供给测试人员使用。 它提供了一套标准的接口,可以用多种编程语言调用,并且和浏览器进行交互。 WebDriver可以对浏览器进行控制,包括输入URL,点击按钮,填写表单,滚动页面,甚至是执行JavaScript代码。同时,它也能够获取网页中的信息,如文本,标签,属_python webdriver api

Nodejs crypto模块公钥加密私钥解密探索_crypto.publicencrypt-程序员宅基地

文章浏览阅读1w次。1.什么是公钥加密私钥解密 简单一点来说一般加密解密都用的是同一个秘钥或者根本不用,而这里采用的是加密用一个秘钥,解密用另一个秘钥且能解密成功.这就属于不对称加密解密算法的一种了.2.公钥秘钥的生成 由于这种加密方案,公钥秘钥是成对的,所以需要一些工具生成 利用 openssl 生成公钥私钥 生成公钥: openssl genrsa -out rsa_private_key...._crypto.publicencrypt

Maven简明教程(5)---依赖关系(实例篇)_依赖关系怎么写-程序员宅基地

文章浏览阅读1.7k次。[工欲善其事,必先利其器]上文中,我们简单介绍了依赖关系的基本理论与配置方式。但是由于这个知识点在我们日后的开发过程中会经常使用到,因此,我们在本篇中通过演示实例来说明依赖关系,请各位看官一定跟着步骤,亲自尝试一番。仔细观察通过这种方式对我们程序架构造成的影响。特别的,这里以一份已经调试完成的工程为例,因此,与前文说的工程命名不一致,敬请谅解。准备工作:a.操作系统:win7 x6_依赖关系怎么写

2017多校联合第五场1006/hdu6090Rikka with Graph(思维公式)-程序员宅基地

文章浏览阅读343次。Rikka with GraphTime Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submission(s): 592 Accepted Submission(s): 353Problem DescriptionAs we know,